先在页面上添加一个标题 ... 用一个 center aligned header .. 居中显示的标题 ... 标题上的文字是 plyr .. 再添加一个分割线 .. ui section divider ..

然后我们添加一个布局用的容器 .. 用一个 div ，上面加上 ui container .. 视频播放器也需要一个容器 .. 可以使用一个 div .. 默认我们要在上面添加一个名字是 plyr 的 css 类 ..

在它的里面，可以使用一个 video 元素 .. 在上面添加一个 poster 属性 .. 设置一下视频的海报 .. 输入这个海报图像的地址 ..

视频的来源，可以使用一个 source 元素 .. 在它的 src 属性里面指定一下要播放的视频的地址 .. 后面的 type 属性可以设置一下这个视频来源的类型 .. 这里就是 video/mp4

因为这个视频来源的地址跟我们的服务器地址不在同一个域上 .. 所以在 video 元素的上面，我们需要添加一个 crossorigin .. 表示跨域 ..

再去给视频添加一个字幕 .. 用一个 track .. kind 是 captions .. label 标签是 English captions .. 字幕的格式是 vtt ，位置是在 assets.ninghao.net/blue-moon-trailer.en.vtt ...

srclang .. 字幕的语言是 en .. 再添加一个 default .. 把它设置成默认的字幕 .. 保存 ..

这就是 Plyr 播放器要求的一个基本的代码结构 .. 基本上跟使用原生的 video 元素的结构是一样的 .. 只不过这里要求我们需要添加一个带特别类的包装元素 ..

下面我们还需要再去设置一下播放器 .. 打开在页面上嵌入的 script.js .. 添加一个立即执行的函数 .. 在它的里面 .. 输入一个 plyr .. 使用它的 setup 这个方法 .. 保存 ..

再去预览一下 ..

现在显示的就是一个 Plyr 播放器 .. 视频没播放之前会显示我们在播放器上指定的海报图像 ... 点一下播放 ... 可以再按一下控制栏上的这个 CC 按钮 .. 可以显示出为视频指定的字幕 ..