共计 2857 个字符，预计需要花费 8 分钟才能阅读完成。
以下文章来源于 进 击 的 Coder，作者 崔 庆 才
最近在开发一个前端我的项目，用到播放视频的性能，所以就查了下有什么前端的视频播放器库能够应用，明天来分享一下给大家。
这个库的名字叫做 Plyr，顾名思义其实就是 Player 的缩写，整体的预览成果如下：
官方网站：https://plyr.io/
GitHub 地址是：https://github.com/sampotts/plyr
看来一圈，发现这个库不仅好看优雅，而且性能非常丰盛。
上面咱们来介绍下它的一些内置性能。
总体概览
首先咱们来看看它都反对什么性能，咱们能够关上它的官网 Demo 网站，能够间接播放一个视频查看成果，如图所示：
整体看起来很不错，比浏览器自带的原生播放器看起来难看多了，各种管制条的 UI 都挺难看的。
接着咱们来看看有什么性能。
进度条和音量控制就不说了。
接着看看左边还有什么，第一个是字幕管制：
这里能够通过点击来开启或者敞开字幕，也就是说，这个播放器是反对咱们嵌入字幕文件的。
同时还反对很多设置，比方分辨率管制、播放速度管制：
其中播放速度管制还反对各种自定义速度，比方 1.25 倍、4 倍等等：
另外还反对视频画中画模式播放，只须要点击那个弹出按钮即可：
整体看来，这个官网的 Demo 就足以让我心动抉择它了！
具体性能
但性能必定不止这些，接下来咱们再回到 GitHub 主页看看它的介绍，它的介绍如下：
- 📼 HTML 视频和音频、YouTube 和 Vimeo – 反对次要格局
- 💪 无障碍– 齐全反对 VTT 字幕和屏幕阅读器
- 🔧 可定制– 咱们能够自定义各种选项来让播放器出现不同的 UI。
- 😎 洁净的 HTML – 应用正确的元素，比方
<input type="range">管制音量和应用<progress>管制进度。 - 📱 响应式– 实用于任何屏幕尺寸
- 💵 获利– 从您的视频中赚钱
- 📹 流式传输 - 反对 hls.js、Shaka 和 dash.js 流式播放
- 🎛 API – 通过标准化 API 切换播放、音量、搜寻等
- 🎤 事件– 不必搞乱 Vimeo 和 YouTube API，所有事件都是跨格局标准化的
- 🔎 全屏– 反对原生全屏并回退到“全窗口”模式
- ⌨️ 快捷键– 反对键盘快捷键
- 🖥 画中画– 反对画中画模式
- 📱 Playsinline – 反对
playsinline属性 - 🏎 速度管制– 即时调整速度
- 📖 多个字幕– 反对多个字幕轨道
- 🌎 i18n 反对– 反对控件的国际化
- 👌 预览缩略图– 反对显示预览缩略图
- 🤟 没有框架– 用“vanilla”ES6 JavaScript 编写，不须要 jQuery
- 💁♀️ SASS – 蕴含在您的构建过程中
堪称是十分之弱小了！
那这个具体怎么应用呢？上面咱们再来介绍下。
应用
要应用 Plyr，能够间接援用 Plyr 的 CDN 文件，增加如下援用即可：
<script src="https://cdn.plyr.io/3.6.12/plyr.js"></script>
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.12/plyr.css" />当然 Plyr 还反对 Node.js 我的项目间接援用，装置形式如下：
yarn add plyr而后这样援用即可：
import Plyr from 'plyr';
const player = new Plyr('#player');Plyr 有一个十分强的性能，那就是它扩大了原生 HTML5 中 Media 相干标签的性能，比方咱们当初能够给 video 标签增加一些自定义的性能，比方增加一个 data-poster 属性来当作视频预览封面，比方增加一个 track 标签来增加字幕文件，写法如下：
<video id="player" playsinline controls data-poster="/path/to/poster.jpg">
<source src="/path/to/video.mp4" type="video/mp4" />
<source src="/path/to/video.webm" type="video/webm" />
<!-- Captions are optional -->
<track kind="captions" label="English captions" src="/path/to/captions.vtt" srclang="en" default />
</video>同时 Plyr 还反对嵌入一些外链网站，比方 Youtube、Vimeo（如果反对中国的一些视频网站就好了）。
如果要援用 Youtube，那么只须要给 div 增加一些 class 即可，比方：
<div class="plyr__video-embed" id="player">
<iframe
src="https://www.youtube.com/embed/bTqVqk7FSmY?origin=https://plyr.io&iv_load_policy=3&modestbranding=1&playsinline=1&showinfo=0&rel=0&enablejsapi=1"
allowfullscreen
allowtransparency
allow="autoplay"
></iframe>
</div>款式自定义
另外 Plyr 还反对咱们增加一些自定义款式，咱们须要应用 CSS Custom Properties 即可轻松实现款式复写。
比如说，咱们想要把默认的按钮色彩由蓝色改成红色，那就能够间接增加 CSS 款式：
:root {--plyr-color-main: red}这样 Plyr 就能够读取这个 CSS 属性，而后实现款式管制了。
更多的自定义款式名称能够参考：https://github.com/sampotts/p…。
配置自定义
方才咱们还提到了，Plyr 反对咱们配置一些 Options 选项来实现一些自定义的性能，这里性能也十分全面，比方：*
- settings：是一个列表，咱们能够管制 settings 的性能列表，比方配置成
['captions', 'quality', 'speed', 'loop']即可管制设置性能外面呈现字幕、分辨率、速度、循环播放等管制。 - i18n：能够管制多语言配置。
- blankVideo：如果是空的视频的话，默认播放什么。
- autoplay：是否自动播放。
等等，还有很多，大家能够参考 https://github.com/sampotts/p… 来查看更多功能，总之能想到的简直都有了。
JavaScript API
另外 Play 还裸露了很多 API，比方 play、pause、stop、restart 等办法能够管制播放、暂停、进行、从新播放等等，甚至还有 airplay 都反对。
具体的性能大家能够参考 https://github.com/sampotts/p… 查看。
那么就介绍到这里啦，心愿对大家有帮忙～
开源前哨日常分享热门、乏味和实用的开源我的项目。参加保护 10 万 + Star 的开源技术资源库，包含：Python、Java、C/C++、Go、JS、CSS、Node.js、PHP、.NET 等。