好用的html5 视频播放器 Plyr（html5视频播放器源码）

如果想在自己的网站中播放视频，用哪个播放器好呢？

当然你可以用某ku、某艺的播放。这不是我们今天讨论的东西。

今天我们说说plyr这个播放器；

第一步：引入css文件：

<link rel="stylesheet" href="https://cdn.plyr.io/1.8.12/plyr.css">

第二步：引入js文件：

<script src="https://cdn.plyr.io/1.8.12/plyr.js"></script>

第三步：书写html结构：

• 用一个类为plyr的div或者section的标签包裹。

• 用video标签把视频引入。

  具体参考下面：

• 具体解释一下代码：

1. poster= 指封面等号后面为图片所在的路径。

2. crossorigin 意思为跨域，就是说视频和当前网站不在同一域下。

3. 2个源分别为mp4和webm文件，为了兼容不同浏览器而提供的。如果没有兼容方面的考虑，可以直接使用一个mp4文件，就可以。

4. track 标签里的是字幕文件，kind="captions" label="English"，kind必须带，

5. srclang="en"是说字幕语言为英文，

第四步，书写js脚本：很简单，一句话，就是一个初始化：

差点忘了说，下载地址：https://plyr.io/

这样，你就可以在自己的网站上播放自己的视频了。不过小心流量呀！！