javascript - HTML5 视频上一个 - 下一个和自动播放

Question

我是这个网站的新手，也是 HTML5 和 Javascript 的新手。并不是说我是初学者，HTML5和Javascript我看的时候还算能看懂，只是我自己写不好而已。

我有很多视频，都是 mp4，大小都一样，都在服务器上的同一个文件夹中。我已经让他们一个接一个不间断地演奏了。我没有任何控制权。看起来像这样(据我所知我发现并复制和更改了代码):

body

<video id="homevideo" width="1022px" height="766px" autoplay onended="run()">
    <source src="video1.mp4" type='video/mp4'/>
</video>

脚本

<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>

现在看起来像这样: Presentation

我想要的:我想要一个上一个和一个下一个功能。所以，我有两个按钮，一个上一个按钮和一个下一个按钮。当我单击下一个按钮时，下一个视频将开始并自动播放(无循环)。当我点击上一个按钮时，上一个视频将再次播放(无循环)。所以我可以简单地在我所有的视频之间向前和向后切换。像这样例如: IMAGE

我必须在我的代码中添加什么？改变什么？我知道热做按钮等。如果有人可以为此给我一个清晰的代码，那就太好了。没有播放或暂停或任何东西。

非常感谢!

Answer 1

第一步是为每个按钮添加一个事件处理程序。例如，类似这样的内容应该适用于您的下一个按钮。

  var el = document.getElementById("nextButton");
  if (el.addEventListener) {
      el.addEventListener("click", yourNextFunction, false);
  } else {
      el.attachEvent('onclick', yourNextFunction);
  }  

然后您需要编写 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();
}

然后您可以对上一个按钮执行类似的操作。