使用JQuery从html5视频播放器触发事件 [英] Triggering Events from html5 video player with JQuery
本文介绍了使用JQuery从html5视频播放器触发事件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想在我的html5视频播放器达到某个时间时显示()div。
我能够在视频结尾处显示一个div,但我不确定如何在视频处于特定时间时显示div,例如0:06。
I want to show() a div when my html5 video player reaches a certain time. I was able to get a div to show at the end of the video, but I'm not sure how to show the div when the video is at a specific time, like 0:06.
<div id = "showdiv" style="display:none" align="center">
this is the message that will pop up.
</div>
<video id='myVideo' align="center" margin-top="100px" class='video-js
vjs-default-skin' preload='auto' data-setup='{}' width='800' height='446'>
<source src='myVideo.mp4' type='video/mp4'l></source>
<script>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
if(!e) { e = window.event; }
$("#showdiv").toggle("slow");
}
</script>
推荐答案
看看 timeupdate
事件。
https://developer.mozilla.org/en-US/docs / Mozilla_event_reference / timeupdate
var runAtTime = function(handler, time) {
var wrapped = function() {
if(this.currentTime >= time) {
$(this).off('timeupdate', wrapped);
return handler.apply(this, arguments);
}
}
return wrapped;
};
$('#myVideo').on('timeupdate', runAtTime(myHandler, 3));
http://jsfiddle.net/tarabyte/XTEWW/1/
这篇关于使用JQuery从html5视频播放器触发事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文