5

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

现在看起来像这样 ：

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

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

非常感谢！

4

3 回答 3

4

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

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

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

于 2013-10-24T11:46:43.617 回答
0 

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

于 2020-02-19T23:13:20.210 回答
0

试试下面的代码：

<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>
于 2020-03-30T21:23:37.247 回答