0

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();
    });
};
Very Curious
  • 881
  • 3
  • 26
  • 50

1 Answers1

2

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

kosmos
  • 4,253
  • 1
  • 18
  • 36
  • If I use the loop atribute, I can't detect the end of the video using that JS. But using only loop atribute doesn't work in Chrome for example. I would prefer to use only JS. – Very Curious May 13 '15 at 08:26
  • Thank u for your answer. For some reason, my video is still not working. I compared the html codes and the only difference is that I have sources firstly *.webm and secondly *.mp4. Do you think this could be a difference? I can detect that the video stopped, but nothing happens on this.play... – Very Curious May 13 '15 at 10:50
  • The source order shouldn't affect. If you can make a fiddle with your current code we can work on it (or use the one I posted). – kosmos May 13 '15 at 10:52
  • Well, I have just found this http://stackoverflow.com/questions/16773986/html5-video-issue-with-chrome What do you think about it? – Very Curious May 13 '15 at 10:59
  • But what's happening? The video does not load? Maybe the problem is the codec used. I recommend you to read [basics](http://www.html5rocks.com/en/tutorials/video/basics/) and [minor caveats](http://www.808.dk/?code-html-5-video). – kosmos May 13 '15 at 11:10
  • Please check out my Partial Solution up there. – Very Curious May 13 '15 at 11:22
  • It's strange, because I use Chrome and works for me. The jsFiddle that I posted works in Chrome. I don't know what, but have to be something more here. Anyway I am glad if your current code works, It's better than nothing. – kosmos May 13 '15 at 11:30
  • if there are galleries of video then this script would be useful rather than attribute loop. – Ganesh Yadav May 13 '15 at 12:03