2.1 萬(wàn) Star！一個(gè)開(kāi)源免費(fèi)、功能強(qiáng)大的視頻播放器庫(kù)
官方網(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è)看看它的介紹，它的介紹如下：
可謂是非常之強(qiáng)大了！
那這個(gè)具體怎么使用呢？下面我們?cè)賮?lái)介紹下。
使用
要使用 Plyr，可以直接引用 Plyr 的 CDN 文件，添加如下引用即可：
當(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ě)法如下：
同時(shí) Plyr 還支持嵌入一些外鏈網(wǎng)站，比如 Youtube、Vimeo （如果支持中國(guó)的一些視頻網(wǎng)站就好了）。
如果要引用 Youtube，那么只需要給 div 添加一些 class 即可，比如：
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"
>
樣式自定義
另外 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)樣式控制了。
更多的自定義樣式名稱(chēng)可以參考：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ì)大家有幫助～
網(wǎng)頁(yè)標(biāo)題：2.1 萬(wàn) Star！一個(gè)開(kāi)源免費(fèi)、功能強(qiáng)大的視頻播放器庫(kù)
當(dāng)前路徑：
http://uogjgqi.cn/article/dhjeids.html
