以下文章来源于 进 击 的 Coder ，作者 崔 庆 才

最近在开发一个前端项目，用到播放视频的功能，所以就查了下有什么前端的视频播放器库可以使用，今天来分享一下给大家。

这个库的名字叫做 Plyr，顾名思义其实就是 Player 的缩写，整体的预览效果如下：

官方网站：plyr.io/

GitHub 地址是：github.com/sampotts/pl…

看来一圈，发现这个库不仅美观优雅，而且功能十分丰富。

下面我们来介绍下它的一些内置功能。

首先我们来看看它都支持什么功能，我们可以打开它的官方 Demo 网站，可以直接播放一个视频查看效果，如图所示：

整体看起来很不错，比浏览器自带的原生播放器看起来好看多了，各种控制条的 UI 都挺好看的。

接着我们来看看有什么功能。

进度条和音量控制就不说了。

接着看看右边还有什么，第一个是字幕控制：

这里可以通过点击来开启或者关闭字幕，也就是说，这个播放器是支持我们嵌入字幕文件的。

同时还支持很多设置，比如分辨率控制、播放速度控制：

其中播放速度控制还支持各种自定义速度，比如 1.25 倍、4 倍等等：

另外还支持视频画中画模式播放，只需要点击那个弹出按钮即可：

整体看来，这个官网的 Demo 就足以让我心动选择它了！

但功能肯定不止这些，接下来我们再回到 GitHub 主页看看它的介绍，它的介绍如下：

可谓是非常之强大了！

那这个具体怎么使用呢？下面我们再来介绍下。

要使用 Plyr，可以直接引用 Plyr 的 CDN 文件，添加如下引用即可：

当然 Plyr 还支持 Node.js 项目直接引用，安装方式如下：

然后这样引用即可：

Plyr 有一个非常强的功能，那就是它扩展了原生 HTML5 中 Media 相关标签的功能，比如我们现在可以给 video 标签添加一些自定义的功能，比如添加一个 data-poster 属性来当作视频预览封面，比如添加一个 track 标签来添加字幕文件，写法如下：

同时 Plyr 还支持嵌入一些外链网站，比如 Youtube、Vimeo （如果支持中国的一些视频网站就好了）。

如果要引用 Youtube，那么只需要给 div 添加一些 class 即可，比如：

另外 Plyr 还支持我们添加一些自定义样式，我们需要使用 CSS Custom Properties 即可轻松实现样式复写。

比如说，我们想要把默认的按钮颜色由蓝色改成红色，那就可以直接添加 CSS 样式：

这样 Plyr 就可以读取这个 CSS 属性，然后实现样式控制了。

更多的自定义样式名称可以参考：github.com/sampotts/pl…

刚才我们还提到了，Plyr 支持我们配置一些 Options 选项来实现一些自定义的功能，这里功能也非常全面，比如：*

等等，还有很多，大家可以参考 github.com/sampotts/pl… 来查看更多功能，总之能想到的几乎都有了。

另外 Play 还暴露了很多 API，比如 play、pause、stop、restart 等方法可以控制播放、暂停、停止、重新播放等等，甚至还有 airplay 都支持。

具体的功能大家可以参考 github.com/sampotts/pl… 查看。

那么就介绍到这里啦，希望对大家有帮助～

开源前哨 日常分享热门、有趣和实用的开源项目。参与维护 10万+ Star 的开源技术资源库，包括：Python、Java、C/C++、Go、JS、CSS、Node.js、PHP、.NET 等。