2.1 萬(wàn) Star！一個(gè)開(kāi)源免費(fèi)、功能強(qiáng)大的視頻播放器庫(kù)
這個(gè)庫(kù)的名字叫做 Plyr，顧名思義其實(shí)就是 Player 的縮寫(xiě)，整體的預(yù)覽效果如下：
官方網(wǎng)站：https://plyr.io/
GitHub 地址是：https://github.com/sampotts/plyr
看來(lái)一圈，發(fā)現(xiàn)這個(gè)庫(kù)不僅美觀優(yōu)雅，而且功能十分豐富。
下面我們來(lái)介紹下它的一些內(nèi)置功能。
總體概覽
首先我們來(lái)看看它都支持什么功能，我們可以打開(kāi)它的官方 Demo 網(wǎng)站，可以直接播放一個(gè)視頻查看效果，如圖所示：
整體看起來(lái)很不錯(cuò)，比瀏覽器自帶的原生播放器看起來(lái)好看多了，各種控制條的 UI 都挺好看的。
接著我們來(lái)看看有什么功能。
進(jìn)度條和音量控制就不說(shuō)了。
接著看看右邊還有什么，第一個(gè)是字幕控制：
這里可以通過(guò)點(diǎn)擊來(lái)開(kāi)啟或者關(guān)閉字幕，也就是說(shuō)，這個(gè)播放器是支持我們嵌入字幕文件的。
同時(shí)還支持很多設(shè)置，比如分辨率控制、播放速度控制：
其中播放速度控制還支持各種自定義速度，比如 1.25 倍、4 倍等等：
另外還支持視頻畫(huà)中畫(huà)模式播放，只需要點(diǎn)擊那個(gè)彈出按鈕即可：
整體看來(lái)，這個(gè)官網(wǎng)的 Demo 就足以讓我心動(dòng)選擇它了！
詳細(xì)功能
但功能肯定不止這些，接下來(lái)我們?cè)倩氐?GitHub 主頁(yè)看看它的介紹，它的介紹如下：
- ?? HTML 視頻和音頻、YouTube 和 Vimeo - 支持主要格式
- ?? 無(wú)障礙- 完全支持 VTT 字幕和屏幕閱讀器
- ?? 可定制- 我們可以自定義各種選項(xiàng)來(lái)讓播放器呈現(xiàn)不同的 UI。
- ?? 干凈的 HTML - 使用正確的元素，比如<input type="range"> 控制音量和使用<progress>控制進(jìn)度。
- ?? 響應(yīng)式- 適用于任何屏幕尺寸
- ?? 獲利- 從您的視頻中賺錢(qián)
- ?? 流式傳輸- 支持 hls.js、Shaka 和 dash.js 流式播放
- ?? API - 通過(guò)標(biāo)準(zhǔn)化 API 切換播放、音量、搜索等
- ?? 事件- 不用搞亂 Vimeo 和 YouTube API，所有事件都是跨格式標(biāo)準(zhǔn)化的
- ?? 全屏- 支持原生全屏并回退到“全窗口”模式
- ?? 快捷鍵- 支持鍵盤(pán)快捷鍵
- ?? 畫(huà)中畫(huà)- 支持畫(huà)中畫(huà)模式
- ?? Playsinline - 支持playsinline屬性
- ?? 速度控制- 即時(shí)調(diào)整速度
- ?? 多個(gè)字幕- 支持多個(gè)字幕軌道
- ?? i18n 支持- 支持控件的國(guó)際化
- ?? 預(yù)覽縮略圖- 支持顯示預(yù)覽縮略圖
- ?? 沒(méi)有框架- 用“vanilla” ES6 JavaScript 編寫(xiě)，不需要 jQuery
- ???♀? SASS - 包含在您的構(gòu)建過(guò)程中
可謂是非常之強(qiáng)大了！
那這個(gè)具體怎么使用呢？下面我們?cè)賮?lái)介紹下。
使用
要使用 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" />
當(dāng)然 Plyr 還支持 Node.js 項(xiàng)目直接引用，安裝方式如下：
yarn add plyr
然后這樣引用即可：
import Plyr from 'plyr';
const player = new Plyr('#player');
Plyr 有一個(gè)非常強(qiáng)的功能，那就是它擴(kuò)展了原生 HTML5 中 Media 相關(guān)標(biāo)簽的功能，比如我們現(xiàn)在可以給 video 標(biāo)簽添加一些自定義的功能，比如添加一個(gè) data-poster 屬性來(lái)當(dāng)作視頻預(yù)覽封面，比如添加一個(gè) track 標(biāo)簽來(lái)添加字幕文件，寫(xiě)法如下：
<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>
同時(shí) Plyr 還支持嵌入一些外鏈網(wǎng)站，比如 Youtube、Vimeo （如果支持中國(guó)的一些視頻網(wǎng)站就好了）。
如果要引用 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 即可輕松實(shí)現(xiàn)樣式復(fù)寫(xiě)。
比如說(shuō)，我們想要把默認(rèn)的按鈕顏色由藍(lán)色改成紅色，那就可以直接添加 CSS 樣式：
:root {
--plyr-color-main: red
}
這樣 Plyr 就可以讀取這個(gè) CSS 屬性，然后實(shí)現(xiàn)樣式控制了。
更多的自定義樣式名稱可以參考：https://github.com/sampotts/plyr#customizing-the-css。
配置自定義
剛才我們還提到了，Plyr 支持我們配置一些 Options 選項(xiàng)來(lái)實(shí)現(xiàn)一些自定義的功能，這里功能也非常全面，比如：*
- settings：是一個(gè)列表，我們可以控制 settings 的功能列表，比如配置成 ['captions', 'quality', 'speed', 'loop'] 即可控制設(shè)置功能里面出現(xiàn)字幕、分辨率、速度、循環(huán)播放等控制。
- i18n：可以控制多語(yǔ)言配置。
- blankVideo：如果是空的視頻的話，默認(rèn)播放什么。
- autoplay：是否自動(dòng)播放。
等等，還有很多，大家可以參考 https://github.com/sampotts/plyr#options 來(lái)查看更多功能，總之能想到的幾乎都有了。
JavaScript API
另外 Play 還暴露了很多 API，比如 play、pause、stop、restart 等方法可以控制播放、暫停、停止、重新播放等等，甚至還有 airplay 都支持。
具體的功能大家可以參考 https://github.com/sampotts/plyr#methods 查看。
那么就介紹到這里啦，希望對(duì)大家有幫助～
