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

Question

我是这个网站的新手,我不熟悉HTML5和Javascript.并不是说我是初学者,当我看到它时,我有点理解HTML5和Javascript,我自己也写不出来.

我有很多视频,所有mp4,都是相同的大小,都在服务器上的同一个文件夹中.我已经让他们一个接一个地玩,没有休息.我没有任何控制.看起来像这样(根据我的理解,我发现并复制和更改了一个代码):

身体

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

现在看起来都像这样: 演示文稿

我想要的是:我想要一个上一个和下一个函数.所以,我有两个按钮,一个是前一个按钮和另一个按钮.当我点击下一个按钮时,下一个视频将自动开始播放(无循环).当我点击上一个按钮时,上一个视频将再次播放(无循环).所以我可以简单地向前和向后切换所有视频.像这样的例子: 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();
}

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