Question

希望，如果可能的话，我希望得到一些帮助。我有一个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>

谢谢你：）

Answer 1

我今天遇到了同样的问题。只有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功能以及背景。您可以将此背景图像设置为您选择的任何图像。我通过使用播放按钮保持简单。您还可以使用poster属性而不是设置背景图像。如果你使用海报，那么你不需要额外的javascript来删除背景。

希望这有帮助。

-John

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

Answer 2

对我来说不幸的是，Slashin8r的回答并没有帮助我，但this answer做到了。基本上，我只需要重新安排我的资源，以便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>

HTML5视频控件 - 仅在chrome中暂停后无法播放

2 个答案: