4

嗨，如果可能的话，我希望能得到一些帮助。我有一个 HTML5 视频，在 chrome 中查看时表现得很奇怪。

当用户第一次点击播放时，视频播放。如果他们点击暂停，视频会暂停。但是播放按钮根本不起作用，播放视频的唯一方法是单击视频屏幕。

关于为什么会发生这种情况以及我如何解决这个问题的任何想法？

这是我正在使用的代码：

<video width="560" height="320" preload controls>
<source src="videos/Testimonial2.mp4" type="video/mp4" />
<source src="videos/Testimonial2.ogv" type="video/ogg" />
<source src="videos/Testimonial2.webm" "type=video/webm" />
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="560" height="320">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="wmode" value="transparent" />
<param name="bgcolor" value="#FFFFFF" />
<param name="quality" value="high" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<a href="http://www.adobe.com/go/getflash">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<param name="flashvars" value="vdo=videos/Testimonial2.flv&amp;autoplay=false" />
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</video>

谢谢你 ：）

4

2 回答 2

4

我今天刚遇到同样的问题。只有 Chrome 导致了这个问题。我会播放一个视频，然后在任何时间后，我都会暂停它。在暂停任何时间后尝试恢复视频时，它会播放片刻然后冻结。

我找到的唯一解决方案是设置 preload="none"。我不确定为什么会这样，但它对我有用。问题是我不再显示预览图像，因此我使用了用于 Internet Explorer 的解决方法。我现在在所有浏览器上运行此解决方法。见下文。

<div style="display:inline-block; margin-top:-14px; padding:5px;">
  <video id="video14" width="310" height="200" style="background:#000000 url('images/play.png') no-repeat;" preload="none" controls>
    <source src="videos/video1.mp4" type="video/mp4">
    <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="310" height="200">
      <param name="src" value="videos/video1.mp4">
      <param name="type" value="video/mp4">
      <param name="controller" value="true">
      <param name="autoplay" value="false">
      <embed src="videos/video1.mp4" type="video/mp4" width="310" height="200" controller="true" autoplay="false"></embed>
    </object>
  </video>
  <script>
    document.getElementById('video14').onclick = function () {
      document.getElementById('video14').play();
      document.getElementById('video14').onclick = '';
      document.getElementById('video14').style.background = '';
    };
  </script>
</div>

上面，我给我的视频一个 id 和一个播放按钮的背景图像。然后我设置了一些 javascript 在单击时播放视频，并在第一次单击后删除 onclick 功能以及背景。您可以将此背景图像设置为您选择的任何图像。我使用播放按钮保持简单。您也可以使用海报属性而不是设置背景图像。如果您使用海报，则不需要额外的 javascript 来删除背景。

希望这可以帮助。

-约翰

编辑：我尝试使用海报属性，但它在 IE9 中不起作用，所以现在坚持使用背景。还尝试将 video.js 与海报一起使用，但也没有使用 IE9。我猜IE9就是不喜欢海报，呵呵。

于 2013-09-30T18:06:36.013 回答
1

对我来说不幸的是，Slashin8r 的回答对我没有帮助，但这个答案确实有帮助。基本上，我只需要重新排列我的来源，以便 OGV 和 WEBM 视频排在 MP4 之前。不知道为什么。我也打开了 preload="none" 。看起来很傻，但是，嘿，不管怎样，对吧？

前：

<video width="1920" height="1080" controls preload="none">
    <source src="example.mp4" type="video/mp4" />
    <source src="example.ogv" type="video/ogg" />
    <source src="example.webm" type="video/webm" />
</video>

后：

<video width="1920" height="1080" controls preload="none">
    <source src="example.ogv" type="video/ogg" />
    <source src="example.webm" type="video/webm" />
    <source src="example.mp4" type="video/mp4" />
</video>
于 2015-10-01T15:38:43.703 回答