CODEWITHSUNDEEP
javascriptjqueryhtml5-video
Arvin
Arvin

Reputation: 1024

HTML5 video source changing

I have a video tag like this. All this videos have to play dynamically one after other I tried writing some javascript functions in eventlistner "progress" of the video, but not working.How to play these videos automatically?anybody please suggest any codes in javascript or jquery

<div id="divVid">
            <video id="video1" width="320" height="240" autoplay >
               <source src="vid_future technology_n.mp4#t=20,50" >            
               Your browser does not support the video tag.
            </video>
    </div>

JS Code (Updated from comment section)

document.getElementById("video1")
.addEventListener("progress", 
  function () { 
   var i = 0; 
   var vid = document.getElementById("video1"); 
    if (vid.paused) { 
     if (vid.currentSrc == myvids[i]) { 
       vid.currentSrc = myvids[i + 1]; } i = i + 1; 
    } 
});

Upvotes: 0

Views: 593

Answers (1)

Quentin
Quentin

Reputation: 944530

The set of <source> elements provide alternative formats for the video for different devices, not a playlist.

If you want to have a playlist, then listen for an ended event and change the src with JavaScript.

In response to edits to the question:

  • No, really change the src. You are trying to change the currentSource which is defined as being readonly
  • I said ended. Don't touch progress, you what to play the next video when the last one is finished, not when a tiny chunk of it has played
  • The list of <source> elements still isn't a playlist. Don't try to use them as such. Keep the list of videos somewhere else (e.g. a JS array).

Upvotes: 3

Related Questions