* 戳上方藍字「 開源先鋒 」關註我
推薦閱讀：
大家好，我是開源君，一個熱愛開源的程式設計師！
今天是除夕夜，想必這會大家都已經吃完團圓飯開始享受各種娛樂活動了吧~~
過年過年，這個時間應該是最溫馨不過的。開源君在這裏提前給各位朋友們拜年了，祝各位小夥伴們龍年大吉，想啥來啥哈~~
老規矩，地球不爆炸，更新不能停。
今天給大家分享 一款非常好用的開源視訊播放器外掛程式 - plyr 。
如果你經常接觸視訊播放相關的開發需求，那麽plyr將會是你的好幫手。
它簡單、輕量級、可存取和可客製化，受到了廣大開發者的喜愛，已經在GitHub上標星24.8k。
效能特色
plyr支持HTML5視訊和音訊播放，同時也能夠適應任意螢幕尺寸。這意味著你可以在不同的裝置上使用plyr，無論是手機、平板還是電腦，它都能正常工作。
這是官方 Demo 的效果，plyr提供了強大的字幕功能，你可以手動開啟或者關閉字幕，並且可以進行國際化處理，滿足不同語言的需求。
還有畫中畫的效果。
另外，plyr還支持hls.js、Shaka和dash.js等串流媒體播放，可以滿足更多特定需求的使用場景。此外，你還可以選擇不同的播放速度和分辨率進行播放，以及進行控制項的國際化客製。
快速使用
先需要引入plyr的CDN檔：
<scriptsrc="https://cdn.plyr.io/3.6.12/plyr.js"></script>
<linkrel=" stylesheet"href="https://cdn.plyr.io/3.6.12/plyr.css" />
然後，在HTML頁面中添加如下的視訊標簽，即可使用plyr進行視訊播放：
<videoid="player"playsinlinecontrolsdata-poster="/path/to/poster.jpg">
<sourcesrc="/path/to/video.mp4"type="video/mp4" />
<sourcesrc="/path/to/video.webm"type="video/webm" />
<!-- Captions are optional -->
<trackkind="captions"label="English captions"src="/path/to/captions.vtt"srclang="en"default />
</video>
除此之外，還可以根據自己的需求進行額外的配置。下面是一些常用的配置項：
settings: ['captions', 'quality', 'speed', 'loop'], // 配置顯示的設定項
i18n: {...}, // 用於UI的國際化
volume: 1, // 播放器初始音量，範圍是0-1
speed: {
selected: 1,
options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]
}, // 播放速度的配置
quality: {
default: 576,
options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240]
}, // 分辨率的配置
當然，更多的配置項和使用方法可以參考plyr的官方文件。
更多計畫細節，感興趣的小夥伴可以自行去計畫地址探索。
Github地址：
https://github.com/sampotts/plyr
