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,

Answer 1

Unfortunately for me, Slashin8r's answer didn't help me, but this answer did. Basically, I just had to rearrange my sources so that the OGV and WEBM videos came before the MP4. Don't know why. I left preload="none" on, too. Seems silly, but hey, whatever works, right?

BEFORE:

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

AFTER:

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

Answer 2

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.