极客笔记HTML5 – 视频播放器
随着互联网的普及和带宽的提高，视频已成为网络媒体内容的重要组成部分。HTML5 中新增加的 video 标签为我们提供了一种更加方便的嵌入视频的方式。在本篇文章中，我们将会介绍如何使用 HTML5 中的 video 标签来实现视频播放器。
基础用法
使用 HTML5 中的 video 标签，我们可以很容易地添加并自定义一个视频播放器。首先，我们需要在 HTML 文件中添加 video 标签：
<video src="video.mp4" controls></video>
上述代码中，我们定义了一个 video 标签，其中的 src 属性指向要播放的视频文件的路径，并添加了 controls 属性表示在播放器中显示控制条。接下来，我们需要在 CSS 文件中定义播放器的样式：
video {
width: 500px;
height: 300px;
}
在这里，我们定义了 video 元素的宽度和高度。
最后，我们需要处理兼容性问题：在一些旧版浏览器可能无法正常播放视频。为了解决这个问题，我们可以使用一个 fallback 非 HTML5 版的相应内容。这里我们使用一个简单的条件判断来实现：
<video src="video.mp4" controls>
<source src="video.ogg" type="video/ogg">
<source src="video.webm" type="video/webm">
<p>您的浏览器不支持 HTML5 视频，请更新浏览器或使用其他浏览器</p>
</video>
在这段代码中，我们通过添加 source 标签来引入多个视频文件，当浏览器支持播放这些文件格式的视频时会自动解析播放这些文件；当浏览器不支持这些文件格式时，会显示 p 标签内的内容。
JavaScript 控制播放
除了使用 HTML 中的 controls 属性显示控制条，我们还可以使用 JavaScript 来控制视频的播放行为。首先，我们需要先选取 video 元素:
const video = document.querySelector('video');
通过调用 video 元素上的方法，我们可以对视频进行控制：
video.play(); // 播放
video.pause(); // 暂停
而因为视频文件本身较大，所以我们可能需要通过 video 元素上的属性来获取视频播放的状态以确定视频是否已经准备好：
console.log(video.readyState); // 0 - 当前 没有关于视频的可用数据
// 1 - 当前已获取视频的meta数据
// 2 - 当前可以开始在“加载"期间进行播放
// 3 - 当前可以开始播放（缓冲时）
// 4 - 当前已经缓冲足够的数据，可以进行无间断的播放
同时，我们还可以通过 cover 元素上的事件来监听视频的状态：
video.addEventListener('play', () => {
console.log('视频开始播放');
});
video.addEventListener('pause', () => {
console.log('视频暂停播放');
});
video.addEventListener('ended', () => {
console.log('视频播放结束');
});
视频字幕
HTML5 中，我们可以通过 VTT（WebVTT）文件格式来为视频添加字幕。VTT 是一种文本文件格式，可以在开始时间和结束时间之间指定要显示的字幕内容。
要为视频添加字幕，我们首先需要创建一个 VTT 文件：
WEBVTT
1
00:00.000 --> 00:03.000
It's a wonderful day.
2
00:03.000 --> 00:06.000
The sun is shining and the birds are singing.
3
00:06.000 --> 00:10.000
I love spending time outdoors.
然后，我们需要在 video 元素中添加 track 标签来引入字幕文件：
<video src="video.mp4" controls>
<track kind="subtitles" src="subs.vtt" srclang="en" label="English">
</video>
在这里，我们使用 kind 属性来指定这个 track 是字幕（subtitles），并使用 src 属性来指定 VTT 文件的路径，srclang 属性指示字幕语言，label 属性为字幕设置标签。
最后，我们还需要在 CSS 文件中设置字幕的样式：
::cue {
background-color: rgba(0, 0, 0, 0.5);
color: white;
font-size: 1.2rem;
padding: 5px;
}
在这段代码中，我们使用 ::cue 伪元素来设置字幕的样式。
自定义控制条
默认控制条的样式可能无法满足我们的需求，我们可以使用 CSS 和 JavaScript 来自定义播放器控制条的样式。
首先，我们需要隐藏默认的控制条：
video::-webkit-media-controls {
display: none !important;
}
video::-webkit-media-controls-enclosure {
display: none !important;
}
video::-webkit-media-controls-panel {
display: none !important;
}
然后，我们可以使用 HTML 和 CSS 来创建我们自己的控制条。为了使控制条可以控制视频的播放，我们需要在 JavaScript 中添加一些代码：
const playBtn = document.querySelector('.playBtn');
const progress = document.querySelector('.progress');
const timeIndicator = document.querySelector('.timeIndicator');
playBtn.addEventListener('click', () => {
if (video.paused) {
video.play();
playBtn.innerHTML = '<i class="fas fa-pause"></i>';
} else {
video.pause();
playBtn.innerHTML = '<i class="fas fa-play"></i>';
}
});
video.addEventListener('timeupdate', () => {
const percentage = (video.currentTime / video.duration) * 100;
progress.style.width = `{percentage}%`;
let minute = Math.floor(video.currentTime / 60);
if (minute<10) {
minute = `0{minute}`;
}
let second = Math.floor(video.currentTime % 60);
if (second < 10) {
second = `0{second}`;
}
timeIndicator.textContent = `{minute}:${second}`;
});
progress.addEventListener('click', (e) => {
const offsetX = e.offsetX;
const totalWidth = progress.clientWidth;
const percentage = (offsetX / totalWidth);
const current = video.duration * percentage;
video.currentTime = current;
});
在这里，我们通过选取 playBtn、progress 和 timeIndicator 元素，分别为这些元素添加了 click 和 timeupdate 事件的监听器以实现控制条的功能。
结论
HTML5 中的 video 标签为我们提供了一种简单和方便的嵌入视频的方式。我们可以使用默认的控制条来控制视频的播放，也可以使用 JavaScript 和 CSS 来自定义播放器和控制条的样式。除此之外，我们还可以使用 VTT 文件格式为视频添加字幕。在使用时，我们需要留意浏览器对于不同视频格式的兼容性问题。总的来说，HTML5 中的 video 标签为我们提供了一个更加灵活自由的视频播放解决方案。