Javascript 事件监听器在特定时间开始视频并在特定持续时间后停止视频答案

【问题标题】：Javascript event listener to start video at certain time and stop video after certain durationJavascript 事件监听器在特定时间开始视频并在特定持续时间后停止视频
【发布时间】：2011-11-15 17:29:44
【问题描述】：

我正在尝试让我的视频（本地托管，非流式传输）在特定时间后开始播放并在特定持续时间后停止。这里有人用 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);

【问题讨论】：

标签： javascript video html5-video

【解决方案1】：

将您的代码包装到一个函数中并在文档就绪或正文加载事件处理程序中调用该函数，否则video 变量值可能无效。

根据W3C standard：

currentTime 属性必须在获取时返回当前播放位置，以秒表示。在设置时，如果媒体元素有一个当前的媒体控制器，那么它必须抛出一个 INVALID_STATE_ERR 异常；否则，用户代理必须寻找新值（这可能引发异常）。

如果要在 2 秒开始播放视频并在 4 秒停止播放（在视频时间戳中），请将 starttime、endtime 分别设置为 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
    }
}

【讨论】：