HTML5 Video not looping

Question

I'm having a weird problem. My two versions of chrome(regular & canary) refuse to loop the video i'm showing. Or well, sometimes they loop it twice and stops after that. Weirdly enough, it works in safari, so i know It's not some webkit shizzle going down.

<video autoplay="autoplay" data-type="bg" id="video" loop="loop">
    <source src="/assets/video/_L88P.mp4" content-type="video/mp4">
</video>

My setup is a mac with mountain lion and mamp on it, the chrome versions are the latest(canary: 26.0.1384.0 and regular: 24.0.1312.52).

Does anyone know why this is happening?

Answer 1

I've also found that Chrome chokes if the MP4 keyframes aren't set properly. For example, in After Effects, in Output, if the key frame distance is left as "auto" the video doesn't loop properly.

My suspicion is that Chrome needs evenly divisible key frames within the length of the video, as in not ending between keyframes. i.e. if your video is 24 frames, make your key frame distance evenly divisible, 4 for example.

Answer 2

This one is solved, and here's the solution in my case:

The video had a resolution that was too big. Even if the bitrate was low, chrome didn't want to do it. Resized it to be 720p and it worked perfectly.

Other suggested solutions if you're having problems:

• Set the correct content-type, including codec.
• Make sure you're in a browser that supports your file-type. For live things, always use atleast both .mp4 and .ogg, and include .webm for security.

• Set it to loop via javascript. This is also a good fallback for browsers not being okay with the loop attribute on the video tag (main example being ipad's). Below is some example code that I copied of a site yesterday (sorry, can't remember the source)

  var myVideo = document.getElementById('video');
  if (typeof myVideo.loop == 'boolean') { // loop supported
      myVideo.loop = true;
  } else { // loop property not supported
      myVideo.on('ended', function () {
      this.currentTime = 0;
      this.play();
      }, false);
  }
  myVideo.play();
  

Answer 3

This happens only if you run your site locally...
And i had same problem with Chrome but i found solution in XAMP local server...

you can use any local server that you want(like wamp and etc)... but the site must be in server root directory... this way chrome understands that the video comes from server and not from local mashing

Answer 4

I have recently had some issue with this myself. It turned out to be something to do with my site being on localhost. When I move the site to my production server and tested remotely it all worked as expected.

To force it to work on localhost, I used the solution from Joakim Bananskal, but playing the video cause an error because it was already trying to play it, so I just had to reset the video first using load().

Having it set to loop also seemed to cause an issue, because the video never fired the ended event.

My final solution for localhost is below:

$("video").each(function () {
    this.loop = false;
    this.onended = function () {
        this.load();
    };
    this.play();
});

with this HTML:

<video preload="auto" autoplay>
    <source src="/video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <source src="/video.ogg" type="video/ogg">
    <img src="/backupImage.png" />
</video>

Answer 5

For some reason I had issues with 'ended' event binding.

Here is how I fixed it:

1. removed 'loop' attr from video.

2. added onended to invoke replay()

    &ltvideo autoplay='true' onended="replay()">&lt/video> 

3. defined replay() as below:

   function replay() {
       console.log('video ended');
       document.getElementsByTagName('video').currentTime = 0;
       document.getElementsByTagName('video')[0].play();
   }