关于ide:21-万-Star一个开源免费功能强大的视频播放器库

以下文章来源于进击的 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&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;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… 来查看更多功能，总之能想到的简直都有了。

另外 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 等。

关于ide:21-万-Star一个开源免费功能强大的视频播放器库

总体概览

具体性能

应用

款式自定义

配置自定义

JavaScript API