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

时间:2014-01-13 05:13:05

标签: javascript html5-canvas

我正在尝试为播放列表分配持续时间....但是因为我正在使用该功能在完成该视频后正在调用,但我想要的是视频应该仅在其指定的持续时间之后播放它应该停止下一个视频应该使用以下代码播放... ...

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

2 个答案:

答案 0 :(得分:0)

您需要点按播放视频时更新的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
    }
}

答案 1 :(得分:0)

而不是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);