好用的html5 视频播放器 Plyr

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

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

今天我们说说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/

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