我正在尝试添加一个进度条来显示视频的持续时间,但可以将其放置在视频本身之外(例如屏幕的另一部分)。我已经四处寻找了一段时间,只找到了显示加载进度的,这是我不需要的。任何人都可以帮助我找到在哪里可以找到它,或者甚至自己提供一个。
为了以防万一,这是视频的脚本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);
最佳答案
您可以将事件监听器绑定(bind)到 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 之间),并将该乘积用作进度条的当前长度。
关于javascript - 播放视频的进度条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10584824/