Javascript 事件侦听器可在特定时间启动视频并在特定持续时间后停止视频

Javascript event listener to start video at certain time and stop video after certain duration

提问by user1047096

I'm trying to get my video (locally hosted, not streamed) to start after a certain time and stop after a certain duration. Someone here helped me out here with Javascript, but it's not working for me -- no effect on time of playback at all.

我正在尝试让我的视频（本地托管，未流式传输）在特定时间后开始并在特定持续时间后停止。这里有人用 Javascript 帮助我解决了这个问题，但它对我不起作用——对播放时间完全没有影响。

So, in my header, I've called the javascript like this:

所以，在我的标题中，我像这样调用了 javascript：

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

And the actual javascript looks like this:

实际的 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);

回答by ExpExc

1. Wrap your code into a function and invoke that function in document ready or body load event handler, otherwise videovariable value may be invalid.

2. According to W3C standard:

   The currentTimeattribute must, on getting, return the current playback position, expressed in seconds. On setting, if the media element has a current media controller, then it must throw an INVALID_STATE_ERR exception; otherwise, the user agent must seek to the new value (which might raise an exception).

   If you want to start playing the video at 2 seconds and stop at 4 seconds (in the video time stamp), set starttime, endtimeto 2, 4 respectively, not 2000, 4000. Furthermore, before seeking to starttime, you must load the video resource once

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

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

2. 根据W3C 标准：

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

   如果你想开始播放在4秒2秒的视频和停止（在视频时间标记），组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
       }
   }