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>
标签：进度条,标签,currentTime,HTML,video,var,progress,拖拽 From： https://www.cnblogs.com/jsper/p/18632688