在网页里嵌入视频可以使用 HTML 里的 video 元素。

在文档里添加一组 video 标签，标签里的内容可以是在用户浏览器不支持播放视频的时候显示的东西。比如 您的浏览器不支持播放此视频。

在 video 元素里，用 src 属性可以指定视频的来源，使用一个来自网络的视频地址。在视频没开始播放前可以显示一个海报图像，用 poster 属性指定一下视频海报，属性的值是一个图像地址。然后在 video 里面再添加一个 controls 属性，显示视频播放器的控制按钮，进度条之类的东西。

在样式表里，设计一下 video 元素的样式，把 width 设置成 100%。然后在浏览器观察一下视频元素，点击播放按钮可以开发播放视频。

source

在 video 元素里可以使用 source 提供多个来源的视频，这些视频可以是不同编码格式的，浏览器会选择使用最适合的视频来源。剪切一下 src 属性还有它的值。在 video 元素里添加一个 source ，在这个标签里添加一个 src 属性，属性的值是视频的来源，再用 type 可以设置一下这个媒体的格式，设置成 video/mp4。如果还有其它格式的视频，可以使用 source 继承添加这些视频来源。

track

想给视频添加字幕可以使用 track 元素，在 video 里面，添加一个子元素，名字是 track ，在它里面用 src 设置一下字幕文件的位置，https://resources.ninghao.net/blue-moon-trailer.en.vtt 这个 .vtt 是 WebVTT 格式的字幕文件的扩展名。然后用 srclang 设置一下字幕的语言，设置成 en，再添加 default 属性把它设置成默认的字幕。然后在 video 元素上于添加一个 crossorigin 属性，不然因为字幕来源跟服务器不同域，所以可能不显示。

测试

在浏览器测试一下，播放视频，在第 9 秒左右的时间，会显示视频对应的字幕。

事件

视频元素有很多相关的事件，比如视频开始播放的时候会触发 play 事件，暂停播放的时候会触发 pause 事件，拖放视频进度的时候会触发 seeking 事件等等。我们可以监听视频元素的这些事件，在发生特定视频事件的时候去执行一些任务。

下面可以测试一下，在文档的脚本里面。先声明一个 videoElement，它的值可以用 document.querySelector 找到 video 类型的元素。

用一下 videoElement.addEventListener 添加一个事件监听，事件的名字是 play，直接提供一个处理器，一个函数，在这个函数里可以在控制台上输出 开始播放 这几个字。复制一份，再监听一下视频元素的 pause 暂停事件，发生这个事件的时候输出暂停播放。再复制一份，然后监听一下 seeking 这个事件，发生这个事件输出 正在拖放。

在浏览器测试一下，打开控制台，然后点击播放按钮 ，视频开始播放的时候会触发 play 事件，我们监听了这个事件，要做的事情就是在控制台上输出开始播放这几个字。点击视频暂停播放视频，这时会触发 pause 事件，我们也监听了这个事件，在控制台上会输出暂停播放。最后再试一下拖放视频的进度条，拖放的时候会一直触发 seeking 事件，在控制台上会输出正在拖放。