CSS HTML5视频 – 加载百分比

在本文中，我们将介绍如何使用CSS来显示HTML5视频的加载百分比。HTML5视频成为现代网站中广泛使用的一种媒体类型，通过使用CSS，我们可以将加载百分比显示在页面上，让用户了解视频加载的进度。

阅读更多：CSS 教程

什么是HTML5视频？

HTML5视频是一种使用HTML5标记语言来嵌入视频的方法。相比于传统的Flash视频，HTML5视频具有更好的兼容性和性能。使用HTML5的元素，我们可以在网页上直接播放视频，而不需要额外的插件。

如何获取视频的加载百分比？

要获取视频的加载百分比，我们首先需要了解浏览器提供的两个事件：loadedmetadata和progress。loadedmetadata事件在视频的元数据加载完毕后触发，而progress事件在视频加载过程中不断触发。

<video src="example.mp4" id="video"></video>

<p id="progress-text">加载进度：</p>
<div id="progress-bar"></div>

以上代码是一个基本的HTML5视频播放器，使用了<video>元素来嵌入视频，并添加了一个用于显示加载进度的文字和进度条的容器。

#progress-bar {
  width: 0%;
  height: 10px;
  background-color: #ccc;
}

#progress-text {
  margin-top: 10px;
}

这是一个简单的CSS样式，用于定义进度条和加载文字的样式。

接下来，我们需要使用JavaScript来获取视频的加载百分比，并更新进度条和加载文字的内容。

var video = document.getElementById('video');
var progressBar = document.getElementById('progress-bar');
var progressText = document.getElementById('progress-text');

video.addEventListener('loadedmetadata', function() {
  video.addEventListener('progress', function() {
    var percentage = (video.buffered.end(0) / video.duration) * 100;
    progressBar.style.width = percentage + '%';
    progressText.innerHTML = '加载进度：' + percentage.toFixed(2) + '%';
  });
});

在这段JavaScript代码中，我们首先通过document.getElementById方法获取到视频元素、进度条元素和加载文字元素。然后，我们给视频元素添加了一个loadedmetadata事件监听器，当元数据加载完毕时，会执行相关的回调函数。在回调函数中，我们又给视频元素添加了一个progress事件监听器，用于获取加载进度并更新进度条和加载文字的内容。video.buffered.end(0)表示视频已加载的最后一个时间范围的结束时间，video.duration表示视频的总时长。

通过以上的HTML、CSS和JavaScript代码，我们可以实现在页面中显示视频加载的百分比，并实时更新进度条的长度。用户可以清晰地看到视频加载的进度，提高了用户体验。