javascript HTML5 视频上一个 - 下一个和自动播放
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19564708/
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
HTML5 video previous - next and auto play
提问by Matthias Gies
I'm new to this site and I am new to HTML5 and Javascript aswell. It's not that I am a beginner, I kinda understand HTML5 and Javascript when I see it, I just can't write it proper myself.
我是这个网站的新手，我也是 HTML5 和 Javascript 的新手。不是我是初学者，我看HTML5和Javascript有点懂，只是我自己写不出来。
I have many videos, all mp4, all same size, all in the same folder on the server. I already got them to play one after another without break. I don't have any controls. Looks like this (a code I found and copied and changed as far as I understood it):
我有很多视频，都是 mp4，大小都一样，都在服务器上的同一个文件夹中。我已经让他们不间断地一个接一个地演奏。我没有任何控制。看起来像这样（据我所知，我找到并复制并更改了代码）：
BODY
身体
<video id="homevideo" width="1022px" height="766px" autoplay onended="run()">
<source src="video1.mp4" type='video/mp4'/>
</video>
SCRIPT
脚本
<script>
video_count =1;
videoPlayer = document.getElementById("homevideo");
function run(){
video_count++;
if (video_count == 16) video_count = 1;
var nextVideo = "video"+video_count+".mp4";
videoPlayer.src = nextVideo;
videoPlayer.play();
};
</script>
It all looks like this now: Presentation
现在看起来像这样： 演示
What I want: I want a previous and a next function. So, I have two buttons, a previous and a next button. When I click on the next button, the next video will start and play automatically (no loop). When I click on previous button, the previous video will play again (no loop). So I can simply switch between all my videos forward and backwards. Like this for example: IMAGE
我想要什么：我想要一个上一个和下一个功能。所以，我有两个按钮，一个上一个和一个下一个按钮。当我单击下一个按钮时，下一个视频将开始并自动播放（无循环）。当我单击上一个按钮时，上一个视频将再次播放（无循环）。所以我可以简单地在我的所有视频之间向前和向后切换。像这样例如： IMAGE
What do I have to add to my code? What to change? I know hot do make buttons ect. Would be nice if someone could give me a clear code for this. Nothing with play or pause or anything.
我必须在代码中添加什么？要改变什么？我知道热做按钮等。如果有人能给我一个明确的代码，那就太好了。没有播放或暂停或任何东西。
Thanks very much!
非常感谢！
采纳答案by Jim Jeffries
First step is to add an event handler to each button. For example, something like this should work for your next button.
第一步是为每个按钮添加一个事件处理程序。例如，这样的事情应该适用于您的下一个按钮。
var el = document.getElementById("nextButton");
if (el.addEventListener) {
el.addEventListener("click", yourNextFunction, false);
} else {
el.attachEvent('onclick', yourNextFunction);
}
Then you need to write the yourNextFunction function to move to the next video. You can base this on your existing code.
然后你需要编写 yourNextFunction 函数来移动到下一个视频。您可以基于现有代码进行此操作。
var video_count =1,
videoPlayer = document.getElementById("homevideo");
function yourNextFunction (){
video_count++;
if (video_count == 16) video_count = 1;
var nextVideo = "video"+video_count+".mp4";
videoPlayer.src = nextVideo;
videoPlayer.play();
}
You can then do something similar for the previous button.
然后，您可以对上一个按钮执行类似操作。
回答by Tom Glendestam
<script>
var videocount =1;
var player=document.getElementById('homevideo');
player.addEventListener('ended',dispositor);
function dispositor(x){
if(!x)
{ x = window.event; }
videocount++;
if (videocount > 2){ // last number of video playing in loop.
videocount = 1;}
player.src="video"+videocount+".mp4"; //complete url
}
</script><video id="homevideo" autoplay="" controls webkit-playsinline="" width="100%" height="100%" >
<source src="video1.mp4" type="video/mp4">
</video>回答by si Ismail
Try with the code below:
尝试使用以下代码：
<video id="homevideo" autoplay="" controls webkit-playsinline="" width="100%" height="100%" >
<source src="video1.mp4" type="video/mp4">
<script>
video_count =1;
videoPlayer = document.getElementById("homevideo");
function run(){
video_count++;
if (video_count == 16)
video_count = 1;
var nextVideo = "video"+video_count+".mp4";
videoPlayer.src = nextVideo;
videoPlayer.play();
};
</script>
</source>
</video>
