分享一個開源免費、功能強大的視訊播放器庫

語言: CN / TW / HK

這是「進擊的Coder」的第 571  篇技術分享

作者:崔慶才

最近在開發一個前端專案,用到播放視訊的功能,所以就查了下有什麼前端的視訊播放器庫可以使用,今天來分享一下給大家。

這個庫的名字叫做 Plyr,顧名思義其實就是 Player 的縮寫,整體的預覽效果如下:

官方網站: https://plyr.io/

GitHub 地址是: https://github.com/sampotts/plyr

看來一圈,發現這個庫不僅美觀優雅,而且功能十分豐富。

下面我們來介紹下它的一些內建功能。

總體概覽

首先我們來看看它都支援什麼功能,我們可以開啟它的官方 Demo 網站,可以直接播放一個視訊檢視效果,如圖所示:

整體看起來很不錯,比瀏覽器自帶的原生播放器看起來好看多了,各種控制條的 UI 都挺好看的。

接著我們來看看有什麼功能。

進度條和音量控制就不說了。

接著看看右邊還有什麼,第一個是字幕控制:

這裡可以通過點選來開啟或者關閉字幕,也就是說,這個播放器是支援我們嵌入字幕檔案的。

同時還支援很多設定,比如解析度控制、播放速度控制:

其中播放速度控制還支援各種自定義速度,比如 1.25 倍、4 倍等等:

另外還支援視訊畫中畫模式播放,只需要點選那個彈出按鈕即可:

整體看來,這個官網的 Demo 就足以讓我心動選擇它了!

詳細功能

但功能肯定不止這些,接下來我們再回到 GitHub 主頁看看它的介紹,它的介紹如下:

  • :vhs: HTML 視訊和音訊、YouTube 和 Vimeo - 支援主要格式

  • :muscle: 無障礙 - 完全支援 VTT 字幕和螢幕閱讀器

  • :wrench: 可定製 - 我們可以自定義各種選項來讓播放器呈現不同的 UI。

  • :sunglasses: 乾淨的 HTML - 使用正確的元素,比如 <input type="range"> 控制音量和使用 <progress> 控制進度。
  • :iphone: 響應式 - 適用於任何螢幕尺寸

  • :dollar: 獲利 - 從您的視訊中賺錢

  • :video_camera: 流式傳輸- 支援 hls.js、Shaka 和 dash.js 流式播放

  • API - 通過標準化 API 切換播放、音量、搜尋等

  • :microphone: 事件 - 不用搞亂 Vimeo 和 YouTube API,所有事件都是跨格式標準化的

  • :mag_right: 全屏 - 支援原生全屏並回退到“全視窗”模式

  • ⌨️ 快捷鍵 - 支援鍵盤快捷鍵

  • 畫中畫 - 支援畫中畫模式

  • :iphone: Playsinline - 支援 playsinline 屬性
  • 速度控制 - 即時調整速度

  • :book: 多個字幕 - 支援多個字幕軌道

  • :earth_americas: i18n 支援 - 支援控制元件的國際化

  • :ok_hand: 預覽縮圖 - 支援顯示預覽縮圖

  • 沒有框架 - 用“vanilla” ES6 JavaScript 編寫,不需要 jQuery

  • :information_desk_person:‍♀️ 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/plyr#customizing-the-css

配置自定義

剛才我們還提到了,Plyr 支援我們配置一些 Options 選項來實現一些自定義的功能,這裡功能也非常全面,比如:*

  • settings:是一個列表,我們可以控制 settings 的功能列表,比如配置成 ['captions', 'quality', 'speed', 'loop'] 即可控制設定功能裡面出現字幕、解析度、速度、迴圈播放等控制。
  • i18n:可以控制多語言配置。

  • blankVideo:如果是空的視訊的話,預設播放什麼。

  • autoplay:是否自動播放。

等等,還有很多,大家可以參考 https://github.com/sampotts/plyr#options 來檢視更多功能,總之能想到的幾乎都有了。

JavaScript API

另外 Play 還暴露了很多 API,比如 play、pause、stop、restart 等方法可以控制播放、暫停、停止、重新播放等等,甚至還有 airplay 都支援。

具體的功能大家可以參考 https://github.com/sampotts/plyr#methods 檢視。

那麼就介紹到這裡啦,希望對大家有幫助~

End

崔慶才的新書 《Python3網路爬蟲開發實戰(第二版)》 已經正式上市了!書中詳細介紹了零基礎用 Python 開發爬蟲的各方面知識,同時相比第一版新增了 JavaScript 逆向、Android 逆向、非同步爬蟲、深度學習、Kubernetes 相關內容,‍同時本書已經獲得 Python 之父 Guido 的推薦,目前本書正在七折促銷中!

內容介紹: 《Python3網路爬蟲開發實戰(第二版)》內容介紹

掃碼購買

(現在半價促銷中,活動很快結束了)

點個 在看 你最好看