cheap jQuery fix for the firefox video loop problem

People who know me know how much I hate flash, therefore when I heard about html5 video and audio I did a happy dance. Recently I had the opportunity to use the video tag in one of my projects and my excitement got a little tempered when I learned that the loop attribute doesn’t work in Firefox. My main browser of choice is safari, too bad not many of my customers visitors share this opinion, so a jQuery fix was needed. It’s far from perfect and it doesn’t work flawless, but it get’s the job done. The only quirk is the little delay to restart the video on end.

$('video[loop="loop"]').bind('ended', function(){


   this.play();


})

About joggink

I'm a freelance frontend developer and a proud member of the dutch fronteers.

27. October 2010 by joggink
Categories: javascript, jquery | 6 comments

Comments (6)

  1. Mathias Bynens says January 8, 2011 at 6:59 pm

    loop is a boolean attribute, so you should change the selector to just video[loop].

    You don’t need jQuery, by the way :)

    document.querySelectorAll('video[loop]').onended = function() {
    this.play();
    };

  2. joggink says January 8, 2011 at 7:47 pm

    I know, it’s a bit of overhead but since I was already using jQuery in the project…

  3. Ben says February 2, 2011 at 5:04 am

    Nice and simple. Thanks

  4. Asaf says March 25, 2011 at 7:49 pm

    I’m sorry I have almost no JS knowledge at all but needs this for work to fix this looping issue.

    How do I use this code, where do i put it and do I need to include anything else?

    Thank you.

  5. joggink says April 10, 2011 at 1:44 am

    When using jQuery you can put this in your jQuery(document).ready(function(){ // code here });

  6. Rajapandi says February 3, 2012 at 12:40 pm

    Simple code, but it works fine…Thanks.