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

前端之家收集整理的这篇文章主要介绍了javascript – HTML5视频上一个 – 下一个和自动播放前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

身体

脚本

现在看起来像这样:
Presentation

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

我有什么要添加到我的代码中?有什么改变?我知道热点做按钮等.
如果有人可以给我一个明确的代码,那会很好.玩耍或停顿什么都没有.

非常感谢!

最佳答案
第一步是为每个按钮添加一个事件处理程序.例如,这样的东西应该适用于你的下一个按钮.

  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();
}

然后,您可以为上一个按钮执行类似操作.

猜你在找的JavaScript相关文章