Looping HTML5 video with jQuery


Before HTML5, browsers were not able to play video natively (that is, without the use of a plugin that must be installed and does not come with the browser). It has been common place to use Flash to deliver video content; typically with videos encoded in FLV format and played through some kind of SWF player. Although this serves its purpose, it’s still not native; users have to have the flash playback component installed in their browser to playback the content.

HTML5 introduced two new tags (among others); <video> and <audio>. These tags allow browsers to play back video/audio content natively; which also means that you have a lot more control over the content using JavaScript; for example, you can build a full featured video player using Javascript, whereas before this would have to be done in Flash.

This post will just focus on the loop attribute. I’ll be explaining browser support of video formats in another post soon.

Nuts & bolts

In HTML5 several attributes of the video tag are boolean (loop,  controls and autoplay for example). This means that their presence within the brackets sets the attribute to true. You do not need to set loop=”true”; I’ve also seen this marked up as loop=”loop”.

<video src="movie.mp4" type="video/mp4" id="myVideo" loop>
    <!-- anything here will appear in browsers that don't support <video> -->

Note: Notice I gave my video an ID of “myVideo”. Assigning an ID to an element like this makes it easier to refer to the element later. I’ll be using this ID momentarily.

While I typically would not recommend setting video content to loop (or even to autoplay, for that matter), there are situations in which I’ve had video in the background of a page; and in this case, I need it to loop.

What gets tricky about all of this is that not all browsers support the loop attribute right out of the box. Chrome and Safari support “loop” in the video tag, but Firefox doesn’t natively. The user has to download and install the “Media Loop” add-on (found here) for that attribute to work (since IE9 is the only Microsoft browser as of now to even support the tag and it’s still in beta, we’ll forget about IE for now). You cannot expect your users to install an add-on just to get the full experience on your site.

The work-around for this is to manually cause the video to loop. As I mentioned earlier, the native <video> tag allows us to control the playback of our videos with JavaScript. All we need to do is detect when the video is done playing, then start it over again. I’m going to use jQuery in this example (I use jQuery any chance I get. In case you aren’t familiar with it, I’ll be going in to more detail soon, but in the mean time you can read up on it here).

$("#myVideo").bind('ended', function(){

All we’re doing is binding a function to the “end” event of the element with the ID “myVideo”. When that event is triggered (i.e., when our video ends), we use this.play() to start it over again.

Be sure to always put your JavaScript at the bottom of your document. Any questions, comments, or corrections? Please let me know.