HTML5视频控件 - 仅在Chrome中暂停后无法播放 [英] HTML5 video controls - Cannot play after pause in chrome only

问题描述

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

当用户第一次玩游戏时，视频播放。
如果他们点击暂停，视频暂停。但是，然后播放按钮根本不起作用，进行视频播放的唯一方法就是点击视频屏幕。

有关这种情况发生的原因以及我该如何解决这个问题？

以下是我使用的代码：

 < video width =560height =320预加载控件> 
< source src =videos / Testimonial2.mp4type =video / mp4/> 
< source src =videos / Testimonial2.ogvtype =video / ogg/> 
< source src =videos / Testimonial2.webmtype = video / webm/> 
< object type =application / x-shockwave-flashdata =http://releases.flowplayer.org/swf/flowplayer-3.2.1.swfwidth =560height =320 > 
< param name =movievalue =http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf/> 
< param name =wmodevalue =transparent/> 
< param name =bgcolorvalue =＃FFFFFF/> 
< param name =qualityvalue =high/> 
< param name =allowFullScreenvalue =true/> 
< param name =allowscriptaccessvalue =always/> 
< a href =http://www.adobe.com/go/getflash> 
< img src =http://www.adobe.com/images/shared/download_buttons/get_flash_player.gifalt =Get Adob​​e Flash player/> 
< / a> 
 <！ -  [if！IE]>  - > 
< / object> 
<！ - <！[endif]  - > 
< / object> 
< / video> 
  

谢谢：）

解决方案

今天我遇到了同样的问题。只有Chrome导致了这个问题。我会播放视频，然后在任何时间之后，我会暂停播放。当试图在暂停任何时间段后恢复视频时，它会播放一秒钟然后冻结。

我发现的唯一解决方案是设置预加载=无。我不确定这是为什么会奏效，但它确实适合我。问题是我不再显示预览图像，所以我正在使用Internet Explorer的解决方法。我现在在所有浏览器上运行此解决方法。

 < div style =display：inline-block; margin-top：-14px; padding：5px; > 
  

以上我给视频提供了一个播放按钮的ID和背景图片。然后，我设置了一些javascript来播放视频，同时在第一次点击后也删除了onclick函数以及背景。您可以将此背景图像设置为您选择的任何图像。我通过使用播放按钮保持简单。您还可以使用海报属性而不是设置背景图片。如果您使用海报，那么您不需要额外的JavaScript来移除背景。

希望这有助于您。

-John

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

Hiya I was hoping for some help if possible please. I have an HTML5 video that is acting strange when viewed in chrome.

When the user hits play for the first time, the video plays. If they click pause the video pauses. But then the play button doesn't work at all and the only way to make the video play is to click the video screen.

Any ideas on why this is happening and how i can fix this issue please?

Here's the code I'm using:

<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>

Thank You :)

解决方案

I just ran into this same problem today. Only Chrome was causing the issue. I would play a video and then after any amount of time, I would pause it. When trying to resume the video after it being paused for any amount of time, it would play for a split second and then freeze.

The only solution I have found is to set preload="none". I am not sure why this works, but it did for me. The problem is that I no longer have the preview image shown so I am using a workaround I use for Internet Explorer. I now run this workaround on all browsers. See below.

<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>

Above, I give my video an id and background image of a play button. I then set some javascript to play the video when clicked and also remove the onclick function as well as the background after it is clicked for the first time. You can set this background image to any image of your choosing. I kept it simple by using a play button. You can also use the poster attribute instead of setting a background image. If you use a poster, then you don't need the additional javascript to remove the background.

Hope this helps.

-John

Edit: I tried using poster attribute, but it didn't work in IE9, so sticking with the background for now. Also tried using video.js with poster but also didn't take in IE9. I guess IE9 just doesn't like posters, heh.

这篇关于HTML5视频控件 - 仅在Chrome中暂停后无法播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！