CODEWITHSUNDEEP
htmlloopsvideohtml5-video
jonathan topf
jonathan topf

Reputation: 8367

loop html5 video using ended event broken

I am searching for the holy grail of a simple looping html5 video, I am currently using the following code which doesn't seem work

<video width="650" height="650" class="outer_shadow" autoplay="" ended="this.play()" loop>
    <source src="/videos?video_id=ag1kZXZ-anQtd2luZG93cg4LEghUaW1lRGF0YRgNDA">
</video>

Can anyone could hilight why this code doesn't work/suggest their best work arround?

Upvotes: 2

Views: 1330

Answers (2)

Vadim Guzev
Vadim Guzev

Reputation: 320

Here is the fiddle with working example of HTML5 video player that loops several videos. Just add your URLs to src array...

<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<video id="video" width="500" height="400" controls autoplay></video>
<script>
var src = [
 "http://content.adfox.ru/131007/adfox/205544/865991_11.mp4",
 "http://all.rutube.ru/130627/gpmdigital/217059/805529_11.mp4"
];
var curSrc = 0;
$(function() {
 $('#video').attr("src", src[curSrc % src.length]);
 curSrc++;
 var video = $('#video').get(0);

 $('#video')
 .on('loadedmetadata', function() {
  video.currentTime=0.01;
  video.play();
 })
 .on('ended', function() {
  console.log('ended');
  video.src = src[curSrc % src.length];
  video.load();
  curSrc++;
 });
});
</script>

Upvotes: 0

net.uk.sweet
net.uk.sweet

Reputation: 12431

Surely you just need to set the loop attribute (see fiddle tested in Chrome):

<video id="myVideo" width="650" height="650" class="outer_shadow" autoplay loop>
    <source src="http://content.bitsontherun.com/videos/nPripu9l-60830.mp4">
</video>​

If firefox still doesn't like the loop attribute, try the following fix: 

document.getElementById('myVideo').addEventListener('ended', function(){
    this.currentTime = 0;
}, false);

Update:

Perhaps not as simple as you had hoped but, as a work around for the problem, it might be worth trying one of the many HTML5 video libraries such as video.js. If the problem persists you could, as a worst case, force the library to use Flash where supported (ie. desktop) and fall-back to HTML5 where it's not (as explained here).

Upvotes: 1

Related Questions