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

HTML5 video previous - next and auto play

本文关键字：自动播放 下一个 视频 上一个 HTML5      更新时间：2023-09-26

我是这个网站的新手，也是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>

现在一切看起来像这样：介绍

我想要什么：我想要一个上一个和下一个函数。所以，我有两个按钮，一个上一个按钮和一个下一个按钮。当我单击下一个按钮时，下一个视频将自动开始并播放（无循环）。当我单击上一个按钮时，上一个视频将再次播放（无循环）。所以我可以简单地在所有视频之间向前和向后切换。例如，像这样：图像

我必须向代码中添加什么？要改变什么？我知道热做按钮等。如果有人能给我一个明确的代码，那就太好了。没有播放或暂停或任何东西。

非常感谢！

第一步是向每个按钮添加一个事件处理程序。例如，这样的东西应该适用于您的下一个按钮。

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

然后，您需要编写您的NextFunction函数以移动到下一个视频。您可以基于现有代码。

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

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

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

尝试使用以下代码：

<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>
相关文章：