Html5 video loop with a flash

Question

I have a video on a page that needs to loop infinitely in all browsers . I gave up trying to use loop atribute in video tag as that didn't work correctly in all browsers and blocked my JS. JS could not detect that the video ended, I guess.

I use the following code.

HTML:

<video autoplay="" preload="auto" poster="file" id="id">
   <source src="..." type="video/webm">
   <source src="..." type="video/mp4">
   <source src="..." type="video/ogg">
   <img src="..." title="Lundegaard" alt="Video fallback">
   Your browser does not support the video tag.
</video>

JS:

/* video infinite loop */
$('video').bind("ended", function() {
    this.load();
    this.play();
});

This solution is fine, except for the moment when the video RELOAD again, causing a blank space appears for a while . I guess that once the video is initially loaded, there is no need to load it again. Without this.load() the loop is not working.

Do u have any idea how to achieve the looping without that empty space flash?

Thank u!

Partial solution

I have found out there is a problem with Chrome. In case of Chrome browser, this.play() is not working for some reason, but it is working in other browsers. So I partially fixed it with following code. I am open to better solutions.

function videoLoop() {
    var video = $('video#id');

    //Chrome is not working with this.play() only
    var isChrome = !!window.chrome;

    video.bind("ended", function() {
        if (isChrome) {
            this.load();
        }
        this.play();
    });
};

Answer 1

Try adding loop to your video markup:

<video autoplay="" loop preload="auto" poster="file" id="id">
...

Edit:

After see your comment, you can achieve it using your current code, but you have to remove this.load() line to avoid that blank space. It would look as this:

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

jsFiddle