[分享]css原始进度条视频

CSS原始进度条是一种用于展示加载进度的工具，它是基于CSS实现的一种简单的进度条效果。该进度条可以应用于各种网页中，例如视频加载，图片下载等等。现在，让我们来看一看如何使用CSS原始进度条实现视频加...

CSS原始进度条是一种用于展示加载进度的工具，它是基于CSS实现的一种简单的进度条效果。该进度条可以应用于各种网页中，例如视频加载，图片下载等等。现在，让我们来看一看如何使用CSS原始进度条实现视频加载进度条效果。

video {
   width: 100%;
}

progress {
   display: block;
   height: 20px;
   width: 100%;
   margin: 0 auto;
   padding: 0px;
}

progress::-moz-progress-bar {
   background-color: #f7e2a2;
}

progress::-webkit-progress-bar {
   background-color: #f7e2a2;
}

progress::-webkit-progress-value {
   background-color: #f19953;
} 

可以看到，首先我们设置了video元素的宽度为100%。接下来，我们定义了一个进度条元素，通过设置其display为block，height为20px，width为100%，margin和padding均设置为0，来规定它的基本属性。

然后，我们分别定义了Firefox和Webkit浏览器下进度条的样式。这里，我们设置了Firefox浏览器中进度条的背景颜色为#f7e2a2；而对于Webkit浏览器，整个进度条的背景颜色同样为#f7e2a2，进度条的实际进度条部分的背景颜色则为#f19953。

接下来，让我们通过JavaScript代码来触发这个进度条的显示。

var vid = document.getElementsByTagName("video")[0];
var progressBar = document.getElementsByTagName("progress")[0];

vid.addEventListener("progress", function() {
   var percent = Math.floor((100 / vid.duration) * vid.currentTime);
   progressBar.value = percent;
}); 

在这段代码中，我们首先定义了要进行操作的video元素和progress元素。然后，我们为video元素添加了一个progress事件监听器，当video正在加载时，每秒弹出该事件并触发一个函数。在这个函数中，我们定义了进度条的进度值，通过计算当前时间与总时间的百分比并向下取整得到。

最后，我们将进度条的value设置为该百分比值，即显示当前进度条的进度。

这样，我们便可以用CSS原始进度条轻松实现视频加载进度条效果了。感谢您的阅读！