Playing videos one after another in html5
19,099
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>
Related videos on Youtube
Comments
-
Rohit over 1 year
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 over 10 yearsYa i tried that. Even It was not working and I did corrections still it is not working..
-
Ru Chern Chong over 6 yearsThis works very nicely. Just that I have to modify a little because I am using Vue.js
-
Captain Fantastic almost 4 yearsnot 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");
-
zergski over 3 yearsProblem here, at least in react. Is the media is redownloaded. Have yet to find a solution that doesn't involve creating individual video tags