使用 video 元素，我们可以在页面上显示视频，把 video 换成 audio 就可以在页面上播放音频了 .. video 元素跟 audio 元素的用法都差不多 .. 先学一下 video 这个元素 ..

先用一组 video 标签 .. 视频的来源可以在 src 这个属性里指定一下 .. 它的值就是视频的地址 .. 视频可以来自网络，也可以在本地 ..

再用一个 width 属性设置一下视频显示的宽度 .. 视频在没显示之前可以给用户显示一个视频的截图 .. 这个图像可以在 poster 属性里指定一下 .. 它的值是图像的地址 ..

你会看到屏幕上会显示这个海报 .. 不过现在还没法播放这个视频，你可以在 video 标签里面添加一个 autoplay 这个属性 .. 让这个视频自动播放 ..

或者，也可以使用一个 controls .. 它可以在视频的上面添加一个控制栏 .. 点击 播放 .. 可以播放视频 ...

这个播放器的样式在不同的浏览器上都会有一些区别 .. 以后我们需要视频播放功能，可以使用一些自定义的视频播放器，一般这些播放器拥有一些特别的功能 .. 也可以保持在不同的浏览器上，播放器的风格可以统一一下 ..

在 video 元素里面，我们可以使用 source 标签设置多个可以播放的视频来源 .. 浏览器可以根据自己的情况选择最合适的视频源去播放 ..

先去掉 video 里面的 src 属性 .. 然后在这组 video 标签里，添加一个 source 标签 .. 它的 src 属性就是视频的位置 .. 另外还需要一个 type 属性，可以设置一下文件的类型 ..

另外我们也可以给视频添加一些其它的东西，比如视频的字幕 .. 我们可以把字幕放到 track 标签里面 ... 先用 kind 属性设置一下类型 .. 字幕可以是 captions，也可以是 subtitles ...

然后是 src 属性，设置一下字幕的来源 .. 这里我用的是一个 webvtt 格式的字幕 .. 它是一种标准的在网上使用的字幕格式 .. 我们可以打开看一下 .. 这种字幕文件的一开始需要用一个 WEBVTT ... 字幕的内容里面，包含某个时间段 .. 还有在这个时间段要显示的具体的文字 .. webvtt 这是一种非常简单的字幕格式 ..

下面我们再添加一个 srclang 设置一下字幕的语言 .. 还可以添加一个 label 属性，设置一下显示给用户的标签 ..

播放一下视频 .. 在全屏幕看一下 .. 注意这个播放器上有一个开启字幕的按钮 .. 点开它可以选择字幕的语言 ..

在播放到特定的时间点的时候，在视频上，就会显示字幕文件里对应的文字内容 ..