使 HTML5 视频在指定时间停止

Posted 2023-05-08

【中文标题】使 HTML5 视频在指定时间停止

【英文标题】：Make HTML5 video stop at indicated time

【发布时间】：2013-10-21 18:22:43

【问题描述】：

我的页面中有一个 html5 视频元素。我要播放的视频时长为 10 分钟。

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

【问题讨论】：

通过在 timeupdate 事件上附加事件监听器

【参考方案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);

【讨论】：

currentTime 以秒为单位，而不是毫秒

@apostl3pol：谢谢。请注意，如果您找到旧答案，您可以提出修改建议。这样，即使原作者不再活跃，您也可以改进（或修复）旧答案。

是否需要做 var pausing_function = function() ？不能是函数 pausing_function()

@DGoiko ***.com/questions/336859/…

【参考方案2】：

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

对于这些情况，我使用了requestAnimationFrame，它以 60 fps 的速度触发并稍微减少了 endTime，从而修复了小的“滞后跳跃”：

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

window.requestAnimationFrame(onTimeUpdate)

【参考方案3】：

所以如下

<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

);

这是正确的做法。

【讨论】：

timeupdate 以 4 到 20Hz 的随机频率触发，currentTime 永远不会等于 30000。您必须使用 '>' 比较而不是 ===

@KeitIG 同意。相应地进行了更改。

我试过了，它从不调用 timeupdate 函数。

注意 - 这是 vid.pause() ... 不是 vid.stop()

【参考方案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);