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

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

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

Answer 2

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

Answer 3

尝试以下代码：

fieldNamesAfterExpansion = List.Transform(fieldNamesToExpand, each Text.Combine({recordColumnName, _}, ".")),

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

3 个答案: