用于播放视频的进度条

progress bar for playing videos

本文关键字：播放 视频 用于      更新时间：2023-09-26

我正在尝试添加一个进度条，显示视频的持续时间有多远，但可以放置在视频本身之外（例如屏幕的另一部分）。我已经四处寻找了一段时间，只找到了显示加载进度的，这是我不需要的。谁能帮我找到在哪里找到它，或者自己提供一个。

以防万一需要，这是视频的脚本 
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);

您可以将事件侦听器绑定到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 之间），然后将该产品用作进度条的当前长度。

相关文章：