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

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();