HTML5 video will not loop

Ah, I just stumbled into this exact problem.

As it turns out, looping (or any sort of seeking, for that matter) in <video> elements on Chrome only works if the video file was served up by a server that understands partial content requests. i.e. the server needs to honor requests that contain a "Range" header with a 206 "Partial Content" response. This is even the case if the video is small enough to be fully buffered by chrome, and no more server-round trips are made: if your server didn't honor chrome's Range request the first time, the video will not be loopable or seekable.

So yes, an issue with GridFS, although arguably Chrome should be more forgiving.

Simplest workaround:

$('video').on('ended', function () {  this.load();  this.play();});

The 'ended' event fires when the video reaches the end, video.load() resets the video to the beginning, and video.play() starts it playing immediately once loaded.

This works well with Amazon S3 where you don't have as much control over server responses, and also gets around Firefox issues related to video.currentTime not being settable if a video is missing its length metadata.

Similar javascript without jQuery:

document.getElementsByTagName('video')[0].onended = function () {  this.load();  this.play();};

Looks like its been an issue in the past, there are at least two closed bugs on it, but both state that it was fixed:

http://code.google.com/p/chromium/issues/detail?id=39683

http://code.google.com/p/chromium/issues/detail?id=18846

Since Chrome and Safari both use webkit based browsers you might be able to use some of these work arounds:http://blog.millermedeiros.com/2011/03/html5-video-issues-on-the-ipad-and-how-to-solve-them/

function restartVideo(){vid.currentTime = 0.1; //setting to zero breaks iOS 3.2, the value won't update, values smaller than 0.1 was causing bug as well.vid.play();}//loop videovid.addEventListener('ended', restartVideo, false);