<video id="myvideo" src="${obj.url2}" controls width="100%" ></video>为什么无法拖动进度条?
时间: 2023-07-02 19:14:58 浏览: 108
这可能是因为视频的元数据还没有加载完全导致的。您可以尝试在JS代码中使用video元素的canplay事件来确保视频的元数据已经加载完成,然后再启用进度条的拖动功能。以下是一个简单的示例代码:
```
var myVideo = document.getElementById("myvideo");
var progressBar = document.getElementById("progress-bar");
myVideo.addEventListener("canplay", function() {
progressBar.setAttribute("max", myVideo.duration);
});
myVideo.addEventListener("timeupdate", function() {
progressBar.value = myVideo.currentTime;
});
progressBar.addEventListener("input", function() {
myVideo.currentTime = progressBar.value;
});
```
在这个例子中,我们为视频元素添加了两个事件监听器:canplay和timeupdate。canplay事件在视频元数据加载完成后触发,我们在这里设置进度条的最大值为视频的总时长。timeupdate事件在视频播放时触发,我们在这里更新进度条的值为当前播放时间。最后,我们为进度条添加了一个input事件监听器,以便当用户拖动进度条时,能够更新视频的播放时间。
阅读全文