使用JQuery触发HTML5视频播放器的事件

Question

使用JQuery触发HTML5视频播放器的事件

4

当我的HTML5视频播放器到达某个特定时间时，我希望能够显示一个div。我已经成功让一个div在视频结束时显示，但我不知道如何在视频播放到特定时间（例如0:06）时显示div。

<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>

- Emanegux

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Yury Tarabanko · Accepted Answer

请查看 timeupdate 事件。 https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement/timeupdate_event

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/