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

我正在制作一个网站上的视频。我已经设法在视频上方加了一个按钮

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

我现在想做的是，在视频到达特定时间后，它会自动停止并显示按钮，当用户单击按钮时，视频会继续，按钮会隐藏

我将在下面粘贴代码：

N G S
JAVASCRIPT-
var video=document.getElementById（“视频”）；
video.addEventListener（“时间更新”，函数（）{
如果（this.currentTime>=15）{
这个。暂停（）；
$（'#videobtn'）.show（）；
}否则{
这个。play（）；
$（'#videobtn'）.hide（）；
}
});
函数vidplay（）{
var按钮=document.getElementById（“videobtn”）；
如果（视频暂停）{
video.play（）；
}
}

您可以在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);

---

使您的元素侦听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();
   }
}

---

它正在工作，但当我点击视频暂停后出现的按钮后，它会立即再次暂停。我该怎么解决这个问题？我尝试了'if（this.currentTime==5*60），但它不起作用。您可以通过添加vidplay（）函数的代码来编辑您的问题吗？当然可以。看一看。更新了我的答案，效果非常好，谢谢：）干杯！如果我需要其他帮助，我能告诉你吗？