Question

我的页面中有一个HTML5视频元素。我想播放的视频持续时间 10 分钟。

我必须播放视频的一部分，从分钟 1 到分钟 5 。
我可以通过设置currentTime属性从特定时间开始但是如何在特定时间停止jQuery或JavaScript的视频？

Answer 1

TL; DR：只需听"timeupdate"：

video.addEventListener("timeupdate", function(){
    if(this.currentTime >= 5 * 60) {
        this.pause();
    }
});

在JavaScript中等待某事的常用方法是等待事件或超时。在这种情况下，超时是不可能的，用户可能会自己暂停视频。在这种情况下，停止不会在您的特定时间，但更早。

定期检查时间也过于昂贵：要么经常检查（因此浪费宝贵的处理能力），要么经常检查不足，因此不会在正确的时间停止。

但是currentTime是一个可检查的属性，幸运的是，媒体元素有timeupdate事件，如下所示：

当前播放位置作为正常播放的一部分或以特别有趣的方式改变，例如不连续。

结论是，您只需听timeupdate，然后检查您是否已通过该标记：

// listen on the event
video.addEventListener("timeupdate", function(){
    // check whether we have passed 5 minutes,
    // current time is given in seconds
    if(this.currentTime >= 5 * 60) {
        // pause the playback
        this.pause();
    }
});

请记住，只要用户尝试跳过5分钟，这就会暂停。如果您想允许跳过并且最初只暂停视频超过5分钟标记，请删除事件监听器或引入某种标志：

var pausing_function = function(){
    if(this.currentTime >= 5 * 60) {
        this.pause();

        // remove the event listener after you paused the playback
        this.removeEventListener("timeupdate",pausing_function);
    }
};

video.addEventListener("timeupdate", pausing_function);

Answer 2

如下所示

<video id="myVid">
<source></source> <!--Whatever source here -->
</video>

使用上面的HTML附加一个事件

var vid = document.getElementById("myVid");
vid.addEventListener("timeupdate", function(){
// Check you time here and
if(t >= 300000) //Where t = CurrentTime
{
vid.stop();// Stop the Video
}
});

这是正确的做法。

Answer 3

您正在寻找timeupdate事件，但仅以2 fps的速度触发，这太慢了，无法在精确的时间停止。

对于这些情况，我使用了requestAnimationFrame，它以60 fps的速度触发，并稍微降低了endTime，从而解决了小的“滞后跳”：

const onTimeUpdate = () => {
    if (video.currentTime >= (endTime - 0.05)) {
      video.pause()
    } else {
      window.requestAnimationFrame(onTimeUpdate)
    }
}
window.requestAnimationFrame(onTimeUpdate)

Answer 4

不确定内置方式，但一种方法是使用setInterval函数并检查视频的currentTime然后停止播放

var myVid=document.getElementById("video1");
var timer= setInterval(function(){myTimer()},1000);
function myTimer()
  {
    if(myVid.currentTime == 5* 60)
    {
       myVid.pause();
       window.clearInterval(timer);
    }
  }

使HTML5视频在指定时间停止

4 个答案: