javascript 在html5中一个接一个地播放视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20942900/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Playing videos one after another in html5
提问by Rohit
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??
现在，我的问题是，服务器上有许多具有不同名称（在远程目录中）的视频文件，但我不知道所有文件的名称。那么如何让他们的队列并使用 JavaScript 一个接一个播放呢？
回答by user3549400
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>
回答by ddavison
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 onendedattribute. Have you tried that?
此外，根据您链接的解决方案，似乎用户通过 javascript 而不是使用onended属性绑定来修复它。你试过吗？
videoPlayer.onended(function(e) {
run();
};
回答by tnyN
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]);
不确定，但我对图片做了类似的事情。尝试使用 if 语句来确定视频是否播放完毕或按钮被按下，然后将视频的 src 更改为数组中的下一个，例如： $("#my_videos").attr("src",videos [转动]）;
回答by Manoraj
- 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.
- 尝试从服务器获取视频文件列表作为响应。
- 将响应存储在一个数组中，比如“播放列表”。
- 然后将视频源更改为 player.src=playlist[count]。这里的“count”与您现在使用的计数器相同。
