html5 video如何添加进度条_HTML5前端学习之路——从菜鸟到入门到入坑

要为HTML5视频添加进度条，需要使用HTML5的video标签和JavaScript的一些代码。以下是一种实现方法：

1. 为视频添加一个视频标签，例如：

<video id="my-video" controls>
  <source src="my-video.mp4" type="video/mp4">
  <source src="my-video.webm" type="video/webm">
</video>

2. 创建一个进度条，例如：

<div id="progress-bar">
  <div id="progress"></div>
</div>

3. 使用JavaScript代码来控制进度条。例如：

var video = document.getElementById("my-video");
var progress = document.getElementById("progress");

video.addEventListener("timeupdate", function() {
  var percent = video.currentTime / video.duration;
  progress.style.width = percent * 100 + "%";
});

这段代码将监听视频的timeupdate事件，每当视频播放时间更新时，计算出视频播放的进度百分比，并将进度条的宽度设置为该百分比。可以通过CSS样式来美化进度条。

希望这能帮到你！