HTML5 Video Play/Pause issue

Question

I am trying to build a really simple HTML5 video player :

HTML

<div class="col-lg-12 video">
  <video id="format-video" width="100%" height="100%" loop="loop" preload="auto">
    <source src="Video-AOM.mp4" type="video/mp4" />
    <img src="images/fallback.jpg"  />
  </video>
  <img class="background" src="images/video-background.jpg" />
  <div class="video-run"></div>
  <div class="video-play-pause"></div>
</div>

TYPESCRIPT

$(document).ready(function () {
   if ($('#format-video').length > 0) {
    var video = <HTMLVideoElement> document.getElementById('format-video');
    video.oncanplaythrough = function () {
        $('.video-run').fadeIn(200);
        $('.video-run').click(function () {
            $(".video .background").fadeOut(200);
            $('.video-run').fadeOut(200);
            $('.video-play-pause').fadeIn(200);
            $('.video-play-pause').on('click',function () {
                if (video.paused) {
                    video.play();
                }
                else {
                    video.pause();
                }
            })
            video.play();
        });
    }
});

So when the video can "playthrough", a big "play" button fades in, when cliked in fades out and a small pause/play fades in.

If I click the button play/pause, the pause works but then if I click it again it either plays only few seconds and freezes or nothing happens.

I am testing on Chrome 40.0.2214.91 m.

I tried to set-up preload="none" as suggested there :HTML5 video controls - Cannot play after pause in chrome only but no success.

Not sure if there is a solution.

brianchirls brianchirls · Accepted Answer · 2015-01-27T04:33:19

What may be happening here is that you could be stacking up multiple click handlers that are all running and fighting with each other, because the "canplaythrough" event can run more than once.

If the network is a little bit slow, then what could happen is that once the video starts playing, it catches up to the amount that's buffered until it pauses for a brief moment. When that happens, the readyState falls back down to a lower value. Then, once more video has buffered, the readyState comes back up to 4 and "canplaythrough" fires again.

If that happens, then you will start running into problems. First, you'll expect to '.video-run' appear again. Then, you'll have a second click handler attached to it. If you click on it, you'll also have a second click handler attached to '.video-play-pause'. So every time you click on that button after that, the video will play and then immediately pause. This whole process could repeat itself, each time adding more and more click handlers.

What I recommend is setting up all the click handlers one time right at the beginning. If you still want to use oncanplaythrough to fade the first button in and the click on the big button to fade in the small button in, that's fine. But you should remove those event handlers after the first time you run them.

Update: A note on the "canplaythrough" event. This event should not fire until there's enough data buffered that the browser estimates you can play straight through the entire video without running out of data. It doesn't mean you have ALL the data - just that it's coming in fast enough that you probably won't catch up to it. There's no guarantee that this event will fire before you actively start playing the video, if ever. And Chrome is known to be aggressive with this event, firing it almost immediately, where other browsers wait longer.

HTML5 Video Play/Pause issue

2 Answers