HTML实现一个脱离video标签可拖拽的进度控制条
主要用到html5的 input range 标签。
<!DOCTYPE html> <html> <body><video id="myVideo" width="320" height="240"><source src="http://***.com/record/st-ec-app/1804405750607302658/2024-06-22-14-51-02_2024-06-22-15-21-02.mp4" type="video/mp4">Your browser does not support the video tag. </video><br><input type="range" min="0" max="100" value="0" class="slider" id="videoProgress"> <script> // 获取 video 和 progress 元素 var video = document.getElementById("myVideo"); var progress = document.getElementById("videoProgress");// 更新进度条的时间间隔（毫秒） var interval = 1000;// 设置定时器更新进度条 setInterval(function() {// 计算视频总时长和当前播放时间var videoDuration = video.duration;var currentTime = video.currentTime;// 计算当前播放时间所占总时长的百分比var progressPercent = (currentTime / videoDuration) * 100;// 更新进度条的value属性 progress.value = progressPercent; }, interval);// 绑定进度条的 change 事件，用于控制视频的播放 progress.addEventListener("change", function() {// 设置视频的当前时间为进度条值所对应的总时长的百分比 video.currentTime = (progress.value / 100) * video.duration; }); </script></body> </html>
