javascript HTML5 视频时间更新事件未触发
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/9770247/
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
HTML5 video timeupdate event not firing
提问by m90
I do have a <video>
element on my page:
<video>
我的页面上确实有一个元素:
<video id="myVideo">
<source src="vid.mp4" type="video/mp4" />
<source src="vid.ogg" type="video/ogg" />
</video>
In my JS it reads:
在我的 JS 中,它写道:
var v = $('#myVideo')[0];
v.addEventListener('timeupdate',function(){
alert('I changed');
},false);
Now I will fire up my console and type:
现在我将启动我的控制台并输入:
$('#myVideo')[0].currentTime = 2;
The displayed frame will change, yet the event will not fire. According to the specs timeupdate
should fire when currentTime was changed
, so I do not think I am using the wrong event? All other events I am using (i.e. play
& ended
) are working just fine.
显示的框架会改变,但事件不会触发。根据规范timeupdate
应该在什么时候触发currentTime was changed
,所以我不认为我使用了错误的事件?我正在使用的所有其他事件(即play
& ended
)工作正常。
There are a lot of similar questions out there, yet all of those seem to be outdated bugs? Is this yet another bug (I tested in Chrome 17 and FF10) or did anything change in the event structure? Or am I missing something completely different?
有很多类似的问题,但所有这些似乎都是过时的错误?这是另一个错误(我在 Chrome 17 和 FF10 中测试过)还是事件结构发生了任何变化?还是我错过了完全不同的东西?
EDIT:I just noticed that this problem will only occur when the video has not yet played. So when I do:
编辑:我刚刚注意到这个问题只会在视频尚未播放时发生。所以当我这样做时:
$('#myVideo')[0].play();
$('#myVideo')[0].pause();
$('#myVideo')[0].currentTime = 2;
The event will fire just like it should.
该事件将像它应该的那样触发。
采纳答案by m90
So, as already stated in the edit to my question I solved this with a simple and rather stupid approach. Just do:
因此,正如在我的问题的编辑中所述,我用一种简单而愚蠢的方法解决了这个问题。做就是了:
video.play();
video.pause();
to "initialize" the playhead. Then one should be able to get timeupdate
events even if no one ever started the video.
“初始化”播放头。那么timeupdate
即使没有人开始视频,人们也应该能够获得事件。
On a side note: strangely, setting preload
to auto
does trigger a preload of the video, yet it does not seem to initialize the playhead.
附带说明:奇怪的是,设置preload
为auto
确实会触发视频的预加载,但它似乎并未初始化播放头。
回答by longi
the event is only dispatched after the video has been initialized. like you just pointed out in your edit-comment, where you play() and pause() the video, which preloads the video. same should happen, if you use the preload attribute with auto (auto = author thinks that the browser should load the entire video when the page loads)
该事件仅在视频初始化后调度。就像您刚刚在编辑评论中指出的那样,您在哪里播放()和暂停()视频,这会预加载视频。如果您将 preload 属性与 auto 一起使用,也会发生同样的情况(auto = 作者认为浏览器应该在页面加载时加载整个视频)
<video preload="auto|metadata|none">
but i guess you answered your question yourself?!
但我猜你自己回答了你的问题?!
回答by user217447
The event to use is not "timeupdate", I think it is "seeked".
When you change the currentTime, first a "seeking" event happens then as soon as the video is in sync with the time chosen, the "seeked" event is triggered.
要使用的事件不是“timeupdate”,我认为它是“seeked”。
当您更改 currentTime 时,首先会发生“seeking”事件,然后一旦视频与所选时间同步,就会触发“seeked”事件。
I tested this with Google 28 and it worked without needing a .play() + .pause() on the control.
我用 Google 28 对此进行了测试,它无需在控件上使用 .play() + .pause() 即可工作。