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>