Javascript事件监听器在特定时间启动视频并在一定时间后停止视频

时间:2011-11-15 17:29:44

标签: javascript video html5-video

我正在尝试让我的视频(本地托管,而不是流式传输)在一段时间后启动,并在一段时间后停止。这里有人用Javascript帮助我,但它对我不起作用 - 根本不影响播放时间。

所以,在我的标题中,我已经调用了这样的javascript:

<script src="Backend/build/Timer.js"></script>

实际的javascript看起来像这样:

// JavaScript Document

var starttime = 2000;  // start at 2 seconds
var endtime = 4000;    // stop at 4 seconds

var video = document.getElementById('player1');
video.currentTime = starttime;

video.addEventListener("timeupdate", function() {
    if (video.currentTime >= endtime) {
        video.pause();
    }
}, false);

1 个答案:

答案 0 :(得分:7)

  1. 将代码包装到函数中并在文档就绪或正文加载事件处理程序中调用该函数,否则video变量值可能无效。
  2. 根据W3C standard

      

    currentTime属性在获取时必须返回当前播放位置,以表示。在设置时,如果媒体元素具有当前媒体控制器,则它必须抛出INVALID_STATE_ERR异常;否则,用户代理必须寻找新值(这可能引发异常)。

    如果您想在2秒开始播放视频并在4秒内停止播放(在视频时间戳中),请分别将starttimeendtime设置为2,4,而不是2000,4000。此外,在寻找starttime之前,您必须加载视频资源一次

    function playVideo() {
        var starttime = 2;  // start at 2 seconds
        var endtime = 4;    // stop at 4 seconds
    
        var video = document.getElementById('player1');
    
        //handler should be bound first
        video.addEventListener("timeupdate", function() {
           if (this.currentTime >= endtime) {
                this.pause();
            }
        }, false);
    
        //suppose that video src has been already set properly
        video.load();
        video.play();    //must call this otherwise can't seek on some browsers, e.g. Firefox 4
        try {
            video.currentTime = starttime;
        } catch (ex) {
            //handle exceptions here
        }
    }