播放视频的进度条

Question

我正在尝试添加一个进度条,显示视频进入其持续时间的距离,但可以放置在视频本身之外(如屏幕的另一部分).我一直在寻找一段时间,并且只找到了显示加载进度的那些,这是我不需要的.任何人都可以帮我找到在哪里找到它,或者甚至自己供应一个.

以防万一需要,这是视频的脚本

var numb = $(this).index(),
            videos = ['images/talking1.m4v', 'images/talking2.m4v', 'images/talking1.m4v', 'images/talking2.m4v', 'images/talking1.m4v', 'images/talking2.m4v'
            ],
            myVideo = document.getElementById('myVid');
            myVideo.src = videos[numb];

            myVideo.load();


    setTimeout(function(){

        myVideo.play();
    }, 200);

Answer 1

您可以将事件侦听器绑定到timeupdate事件:

myVideo.addEventListener("timeupdate", function() {
   // if the video is loaded and duration is known
   if(!isNaN(this.duration)) {
        var percent_complete = this.currentTime / this.duration;
        // use percent_complete to draw a progress bar
    }
});

选择进度条的最大长度,将其乘以percent_complete(介于0和1之间),并将该产品用作条的当前长度.