CODEWITHSUNDEEP
javascripthtmlhtml5-video
Test Test
Test Test

Reputation: 2889

Dynamically fetch HTML5 Video file

I have an HTML5 Video Player that, I want to make it behave as a playlist of videos. The main problem is that the video it fetches is a file called 'video.ogg', BUT it is always overwritten every 1-2 seconds and its duration is less than 1 second. I could have something like,

video_1 video_2 video_3 ... ..

but I thought having only one file, keeps thing cleaner and does not uses a lot of space.

Now from the JS side I got this:

function play_live_video_test(){
    console.log('Started!!');
    var i=1;
    setInterval(function() {
      console.log(' ->Fetching!!');
      video=fetch_video();
      console.log(' ->Updating Source!!');
      video.src="../../video.ogg";
      console.log(' ->Loading!!');
      video.load();
      console.log(' ->Playing!!');
      video.play();
      i++;
      console.log("Value of i: "+i);
    }, 1000);

    console.log('Ended!!!');
};

function fetch_video(){
  var video=document.getElementById('video');
  return video;
};

So every 1000ms I am 'updating' the source of the video tag, and playing the video, but it seems that it is not working!

Any ideas how to fix this? Or implement a video playlist using HTML5 video?

Upvotes: 0

Views: 882

Answers (1)

Quentin
Quentin

Reputation: 943165

Update the source when you get an ended event on the video, not after a specific amount of time has passed.

Upvotes: 1

Related Questions