这是「进击的Coder」的第 571 篇技术分享

作者：崔庆才

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

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

官方网站：https://plyr.io/

GitHub 地址是：https://github.com/sampotts/plyr

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

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

总体概览

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

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

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

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

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

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

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

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

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

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

详细功能

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