html - HTML5 video controls - Cannot play after pause in chrome only

Question

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

Answer 1

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.