8

I am playing videos one after another in following code,

<html>
<body>
    <video src="videos/video1.mp4" id="myVideo" autoplay>
        video not supported
    </video>
</body>
    <script type='text/javascript'>
        var count=1;
    var player=document.getElementById('myVideo');
    player.addEventListener('ended',myHandler,false);

    function myHandler(e) {
        if(!e) 
        { e = window.event; }
        count++;
        player.src="videos/video"+count+".mp4";
        }
</script>

Now, my question is, There are many video files having different name (in remote directory) which is on server and I don't know name of all files. So how to make their queue and play one after another using JavaScript??

Rohit
  • 2,646
  • 6
  • 27
  • 52
  • are http://stackoverflow.com/questions/20945886/video-queue-in-html5 and http://stackoverflow.com/questions/20942900/playing-videos-one-after-another-in-html5 **duplications**? – Milche Patern Jan 06 '14 at 08:34

4 Answers4

12

This work for me :) 

<video width="256" height="192"  id="myVideo" controls autoplay>
    <source src="video/video1.mp4" id="mp4Source" type="video/mp4">
    Your browser does not support the video tag.
</video>

<script type='text/javascript'>
   var count=1;
   var player=document.getElementById('myVideo');
   var mp4Vid = document.getElementById('mp4Source');
   player.addEventListener('ended',myHandler,false);

   function myHandler(e)
   {

      if(!e) 
      {
         e = window.event; 
      }
      count++;
      $(mp4Vid).attr('src', "video/video"+count+".mp4");
      player.load();
      player.play();
   }

</script>
user3549400
  • 121
  • 1
  • 4
  • 1
    This works very nicely. Just that I have to modify a little because I am using Vue.js – Ru Chern Chong Jul 24 '17 at 08:14
  • 3
    not sure why you used JQuery on just that one line: $(mp4Vid).attr('src', "video/video"+count+".mp4"); can be mp4Vid.setAttribute("src","video/video"+count+".mp4"); – Captain Fantastic May 23 '20 at 03:15
  • Problem here, at least in react. Is the media is redownloaded. Have yet to find a solution that doesn't involve creating individual video tags – zergski Dec 18 '20 at 00:41
0

Your variables are inconsistent:

change 

videoplayer.src=nextvid;

to 

videoPlayer.src = nextvid;

also, according to the solution that you linked, it appears that the user fixed it by binding it via javascript instead of using the onended attribute. Have you tried that?

videoPlayer.onended(function(e) {
 run();
};
ddavison
  • 28,221
  • 15
  • 85
  • 110
  • Ya i tried that. Even It was not working and I did corrections still it is not working.. – Rohit Jan 06 '14 at 04:33
0

Not sure but i did something similar with pictures. Try using an if statement to determine if the video is done playing or a button is pressed and then change the src of the video to the next one in an array ex: $("#my_videos").attr("src",videos[turn]);

tnyN
  • 808
  • 6
  • 16
0
  1. Try to get the list of video files as a response from the server.
  2. Store the response in an Array say "playlist".
  3. Then change the video src as player.src=playlist[count]. Here "count" is the same counter you are using now.
Manoraj
  • 1
  • 1