jQuery 使 HTML5 视频在指定时间停止
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19355952/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make HTML5 video stop at indicated time
提问by Arvin
I have a HTML5 video element in my page. The video I want to play is having a duration of 10minutes.
我的页面中有一个 HTML5 视频元素。我要播放的视频时长为10分钟。
I have to play the part of the video from minute 1to minute 5.
I can start it from a particular time by setting its currentTimeproperty.
But how can I stop the video at a particular time jQuery or JavaScript?
我必须从第1分钟到第5分钟播放视频的一部分。
我可以通过设置它的currentTime属性从特定时间启动它。
但是如何在特定时间停止视频 jQuery 或 JavaScript？
回答by Zeta
TL;DR: Simply listen on "timeupdate":
TL;DR：只需听听"timeupdate"：
video.addEventListener("timeupdate", function(){
if(this.currentTime >= 5 * 60) {
this.pause();
}
});
The usual way to wait for something in JavaScript is to wait for an event or a timeout. A timeout is out of question in this case, the user might pause the video on his own. In this case the stop wouldn't be on your specific time, but earlier.
在 JavaScript 中等待某事的常用方法是等待事件或超时。在这种情况下超时是不可能的，用户可能会自行暂停视频。在这种情况下，停止不会在您的特定时间，而是更早。
Checking the time regularly is also too costly: you either check too often (and therefore waste precious processing power) or not often enough and therefore you won't stop at the correct time.
定期检查时间成本也太高：要么检查太频繁（因此浪费宝贵的处理能力），要么不够频繁，因此您不会在正确的时间停下来。
However currentTimeis a checkable property, and to our luck, there's the timeupdateevent for media elements, which is described as follows:
然而，这currentTime是一个可检查的属性，幸运的是timeupdate，媒体元素的事件描述如下：
The current playback position changed as part of normal playback or in an especially interesting way, for example discontinuously.
当前播放位置作为正常播放的一部分或以特别有趣的方式改变，例如不连续的。
This concludes that you can simply listen on timeupdateand then check whether you've passed the mark:
这得出的结论是，您可以简单地听一下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();
}
});
Keep in mind that this will pause whenever the user tries to skip past 5 minutes. If you want to allow skips and only initially pause the video beyond the 5 minute mark, either remove the event listener or introduce some kind of flag:
请记住，只要用户尝试跳过 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);
回答by Fabian von Ellerts
The timeupdateevent is what you are looking for, but it only fires at about 2 fps which is too slow to stop at precise times.
该timeupdate事件正是您要寻找的，但它仅以大约 2 fps 的速度触发，这太慢而无法在精确的时间停止。
For those cases I used requestAnimationFramewhich fires at 60 fps and decreased the endTime a little which fixes small "lag hops":
对于我使用的那些情况requestAnimationFrame，它以 60 fps 触发并稍微减少了 endTime，从而修复了小的“滞后跃点”：
const onTimeUpdate = () => {
if (video.currentTime >= (endTime - 0.05)) {
video.pause()
} else {
window.requestAnimationFrame(onTimeUpdate)
}
}
window.requestAnimationFrame(onTimeUpdate)
回答by Akshay Khandelwal
So as below
所以如下
<video id="myVid">
<source></source> <!--Whatever source here -->
</video>
using Above HTML attach an Event
使用上述 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
}
});
This is the right way of doing it.
这是正确的做法。
回答by Prat
Not sure of an inbuilt way, but one way would be to use the setInterval Function and check the currentTime for the video and then stop playback
不确定内置方式，但一种方法是使用 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);
}
}
