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??
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??
Share Improve this question edited Jan 6, 2014 at 8:46 Rohit asked Jan 6, 2014 at 4:18 RohitRohit 2,6816 gold badges29 silver badges55 bronze badges 1- are stackoverflow.com/questions/20945886/video-queue-in-html5 and stackoverflow.com/questions/20942900/… duplications? – Milche Patern Commented Jan 6, 2014 at 8:34
4 Answers
Reset to default 12This 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>
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();
};
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]);
- Try to get the list of video files as a response from the server.
- Store the response in an Array say "playlist".
- Then change the video src as player.src=playlist[count]. Here "count" is the same counter you are using now.