首页video自定义进度条

video自定义进度条

时间: 2023-11-04 11:54:04 浏览: 255

要实现自定义进度条，你可以使用HTML5的<progress>元素以及JavaScript来控制进度条的变化。下面是一个简单的示例： ```html <!DOCTYPE html> <html> <head> <style> progress { width: 100%; height: 20px; } </style> </head> <body> <video id="myVideo" width="320" height="240" controls> <source src="video.mp4" type="video/mp4"> </video> <progress id="progressBar" value="0" max="100"></progress> <script> var video = document.getElementById("myVideo"); var progressBar = document.getElementById("progressBar"); video.addEventListener("timeupdate", function() { var progress = (video.currentTime / video.duration) * 100; progressBar.value = progress; }); </script> </body> </html> ``` 在这个示例中，我们使用<video>标签来嵌入视频，并使用<progress>标签来创建进度条。在JavaScript代码中，我们监听视频的`timeupdate`事件，计算当前播放时间与总时长的比例，然后将该比例值赋给进度条的`value`属性，从而实现进度条的更新。

阅读全文