javascript - 如何在 html5 视频中停止视频之前检查当前时间是否等于特定数字

Question

我在 HTML5 视频中编写了这段代码来使用时间功能。如果我将这行代码设置为

if(vid.currentTime > 5){
        vid.pause();
     }

视频会自动暂停，这就是我想要的。但如果我将其设置为

if(vid.currentTime == 5){
        vid.pause();
     }

它拒绝暂停，我希望它在不同的时间暂停，以便触发不同的操作。我不知道为什么。我研究并尝试用谷歌搜索类似的情况，但没有运气。任何帮助将不胜感激。完整代码如下:

window.onload = init;

let vid;

function init() {


    vid = document.querySelector("#myPlayer");

    vid.ontimeupdate = displayTimeWhileVideoIsPlaying;
}

function playVideo() {
    vid.play();
}

function pauseVideo() {
    vid.pause();
}

function rewindVideo() {
    vid.currentTime = 0
}

function displayTimeWhileVideoIsPlaying(evt) {
    console.log(vid.currentTime);
    ccc = 5;
    if(vid.currentTime > 5){
        vid.pause();
     }

}

这是我的 codepen 的工作演示链接: https://codepen.io/Okezie/pen/xWOLQd?editors=1011
问题大概出在我的代码笔的第 28 行。

Answer 1

您可以跟踪哪些暂停点被击中，并且不再暂停。

var points = [ 
    { time: 5 , done: false},
      { time: 6 , done: false},
    { time: 8 , done: false},
    { time: 9 , done: false},
];

function displayTimeWhileVideoIsPlaying(evt) {

for(var point of points){
  console.log(vid.currentTime);
  if(vid.currentTime > point.time){
      if(!point.done){
        vid.pause();
        //vid.currentTime = point.time; //Optional, if you want to pause exact
        point.done = true;
      }
   }
}

!point.done 检查可以防止大于检查的“不精确性”。如果代码之前在 5 处暂停，它可以防止暂停在 5.3、5.4、5.8 等处生效。

查看更新后的笔:https://codepen.io/anon/pen/PRGOxW