Javascript 如何设置html视频的持续时间

我正在尝试为播放列表分配持续时间。。。。但当我使用ONED时，该函数在完成该视频后调用，但我想要的是该视频应仅在其指定的持续时间内播放，然后它应停止，下一个视频应播放..我使用以下代码

<video id="myVideo" height="100%" width="100%" autoplay onended="run();">   
        <source id="ss" src="video/video1.ogg" type='video/ogg'>
    </video>

    <script type="text/javascript">
   // num_files++;
      //alert(num_files);
        video_count =1;
        videoPlayer = document.getElementById("ss");        
        video=document.getElementById("myVideo");
        time2= Math.round(+new Date()/1000);
        function run(){
        for(i=1;i<=3;i++)
        {
            //alert(duration[i]);
             time1= Math.round(+new Date()/1000);

          // alert('ctime'+time1);
             dur_time=parseInt(time2,10)+parseInt(duration[i],10);
          //  alert('dtime'+dur_time);
               video_count++;
                 if(time1<dur_time) 
                 {
                        video_count--;

                //alert(video_count);
               if (video_count > num_files) video_count = 1;

               videoPlayer.setAttribute("src","video/video"+video_count+".ogg");       
            //alert(video_count);
            video.pause();
            video.load();
            video.play();
            time1= Math.round(+new Date()/1000);
                 }
       }
        }
    </script>

您需要点击播放视频时更新的timeupdate事件：

video.addEventListener('timeupdate', function() {

   if (this.currentTime >= dur_time) {
       this.pause();
       /// next action
   }

}, false);

您可能可以使用轮询（即setTimeout/setInterval/requestAnimationFrame）实现同样的效果，但使用事件是一种更干净的方法，只会在实际时间更改时更新

更新

您也可以通过这种方式在特定持续时间后停止视频，但是，这不是帧精确的，但在某些极端情况下可能会有所帮助：

var seconds = 3;

setTimeout(stopVideo, seconds * 1000);  /// ms
video.play();

function stopVideo() {
    if (video.isPlaying) {
        video.pause();
        /// next action
    }
}

---

我们可以使用下面的代码来代替setTimeout，它对我来说工作正常

video.addEventListener("timeupdate", function() {
           // alert(video_count);
             dur_time=parseInt(time2,10)+7;

        if (this.currentTime >= 7 || time1 >= dur_time) {
       this.pause();
       advanceVideo();  
       time2= Math.round(+new Date()/1000);   
   }
     time1= Math.round(+new Date()/1000);
        }, false);

---

timeupdate可以正常工作，但问题是如果视频很小，并且持续时间较长，则视频必须重复。。但在这种情况下，它不会发生。。我在视频标签上添加了循环，但同样的视频在超时后也会重复…那么如何避免这种情况呢？@user3145475如果视频重复，则每次循环时currentTime都会重置。在这种情况下，您可以使用SetTimeOutTopVideo，wantedDuration，在启动视频的同时设置。这一次，函数stopVideo可以调用pause方法。如果视频比允许的短，那么我认为你运气不好，因为我们只能在浏览器允许的情况下做这么多，而setTimeout并不是那么准确。我将用一个简短的例子更新我的答案。我们可以使用下面的代码来代替setTimeout，它对我来说工作正常。addEventListenertimeupdate，函数{//alertvideo\u count；dur\u time=parseInttime2,10+7；如果this.currentTime>=7 | time1>=dur\u time{this.pause；advanceVideo；time2=Math.round+new Date/1000；}time1=Math.round+new Date/1000；}，false；我对此还有一个疑问，因为我们正在将所有视频存储在一个文件夹中，如果删除任何视频…播放列表将停止，并且不会跳到下一个…他们是否可以检查文件的可用性，如果没有，我们可以跳到下一个