Question

我正在制作一个我正在制作的网站上的视频。我已设法在视频顶部放置一个按钮。

我现在要做的是，视频到达特定时间后，它会自动停止并显示按钮，当用户点击该按钮时，视频会恢复，按钮会隐藏。

我会粘贴以下代码：

<div id="video-box">
  <video id="video" class="video">
    <source src="media/theory_of_operation.mp4" autoplay />
  </video>
  <div class="playpause">
    <button id="videobtn" onclick="vidplay()" class="btn btn-lg btn-success">N G S</button>
  </div>
</div>

JAVASCRIPT - 

var video = document.getElementById("video");
	video.addEventListener("timeupdate", function(){
		if(this.currentTime >= 15) {
			this.pause();
			$('#videobtn').show();
		}else{
			this.play();
			$('#videobtn').hide();
		}
	});
	function vidplay() {
       var button = document.getElementById("videobtn");
       if (video.paused) {
          video.play();
       }
    }

Answer 1

您可以在javascript代码中进行设置。这创建了一个每1秒运行一次的功能并检查视频当前时间。

var vid = document.getElementById("video");
var intervalID = setInterval(function(){ 
    var currTime = vid.currentTime;
    if (currTime == 50)
    {
        // show button
        $("#vidplay").show();

        // stop this interval
        clearInterval(intervalID);
    }
 }, 1000);

Answer 2

让你的元素听取timeupdate事件：

编辑：

现在，当您恢复播放时（通过单击按钮），侦听器仍会记录事件，导致视频在下一秒自动停止，因为此.currentTime仍然优于15。为防止出现这种情况，您可以在单击按钮时删除侦听器（如果您不再需要它），或者设置一个布尔变量，监听器将检查该变量以确定是否必须停止视频

video = document.getElementById("video");
stoppable = true;

video.addEventListener("timeupdate", function(){
    if(this.currentTime >= 15 && stoppable) {
        this.pause();
        $('#videobtn').show();
    }
});

function vidplay() {
   if (video.paused) {
      stoppable = false;
      video.play();
      $('#videobtn').hide();
   }
}

创建可与网页中的用户交互的视频

2 个答案: