Unable to play an array of videos using javascript

Question

I have an array of video links and i need to play it in a loop back to back.I tried the below link but it did not work for me. how to display multiple videos one by one dynamically in loop using HTML5 and javascript My array is

   player1=["videoplayback (1).mp4","videoplayback (2).mp4","videoplayback (3).mp4"];

My code is:

function playit()
{
    var t=['videoplayback.mp4','videoplayback (1).mp4','videoplayback (3).mp4'];
    var myNodelist = document.getElementsByTagName("source");
    var i;
    for (i = 0; i < myNodelist.length; i++) {
       myNodelist[i].src = t[i];
   }
   }

And this is my html code for video player:

 <body onload="playit()">        
    <video id="video" width="420" autoplay="" loop="" controls="" style="margin-top: 30px;margin-left:40px" >
    <source src="" type="video/mp4" id="video1">
    <source src="" type="video/mp4" id="video2">
    <source src="" type="video/mp4" id="video3">
    Your browser does not support HTML5 video.
    </video>
    </body>

Do you want to play each of the videos, one after the other? Multiple `` tags are to allow the browser to choose a supported format. — Fabian Horlacher, Mar 23 '17 at 15:40
Possible duplicate of [how to display multiple videos one by one dynamically in loop using HTML5 and javascript](http://stackoverflow.com/questions/20965355/how-to-display-multiple-videos-one-by-one-dynamically-in-loop-using-html5-and-ja) — Fabian Horlacher, Mar 23 '17 at 15:40

score 0 · Answer 1 · answered Mar 23 '17 at 20:34

You can do something like include the source files in array and add an event listener, so that each time a video finishes playing it switches to the new source file. The first time you would have to do an onload so that the js function myNewSrc() is called the first time for loading first video. To do that it would look like this:

HTML:

<body onload="myNewSrc()">
    <div id="section-title" >
        <video preload="auto" onended="myAddListener()" autoplay controls width="480" height="360" title="" poster="https://placehold.it/350x150">
        <source src="" type="video/mp4">
        </video>
    </div>
</body>

JS:

//array of video source files you will be looping through
var videoSources = ["http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4", "http://www.html5videoplayer.net/videos/toystory.mp4", "http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4", "http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4", "http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4"];

          var currentIndex = 0;
    // listener function changes src
          function myNewSrc() {
              var myVideo = document.getElementsByTagName('video')[0];
              myVideo.src = videoSources[currentIndex];
              myVideo.load();
          }


    // add a listener function to the ended event
          function myAddListener(){
              var myVideo = document.getElementsByTagName('video')[0];
              currentIndex = (currentIndex+1) % videoSources.length;
              myVideo.src = videoSources[currentIndex];
              myVideo.addEventListener('ended', myNewSrc, false);

          }

You can see a working sample here: https://jsfiddle.net/l33tstealth/pnjchwyf/1/

Unable to play an array of videos using javascript

1 Answers1