知乎視頻播放器 Griffith 開源介紹

Griffith 是什么?

梦幻诛仙手游丹青阁天书 www.rasug.icu Griffith 是一個基于 React 的視頻播放器,目前已在知乎 web 和 mobile web 內使用,并在 GitHub 上開源。

開源地址及示例

GitHub 地址:https://github.com/zhihu/griffith

CodeSandbox 示例:https://codesandbox.io/s/74olr5z02x

特性

簡潔易用的 UI

Griffith 提供了簡潔易用的播放器 UI。目前知乎網頁端視頻播放器就是使用的 Griffith。

Griffith

快捷鍵支持

Griffith 參考 YouTube 進行了快捷鍵支持,后續還會添加更多的快捷鍵。

  • 空格鍵:進度條處于選中狀態時,可控制視頻的播放/暫停。如果已經選中某個按鈕,則可用于點擊該按鈕。

  • K: 在播放器中暫停/播放視頻。

  • 選中進度條狀態下的向左/向右箭頭:快進/快退 5 秒鐘。

  • J:在播放器中快退 10 秒。

  • L:在播放器中快進 10 秒。

  • 選中進度條狀態下的向上/向下箭頭:將音量增大/減小 5%。

  • 選中進度條狀態下的數字 1 到 9(不是數字小鍵盤上的數字):跳至視頻進度的 10% 到 90%。

  • 選中進度條狀態下的數字 0(不是數字小鍵盤上的 0):跳至視頻的開頭。

  • F:啟用全屏模式。如果已啟用全屏模式,則再次按 F 鍵或按 Esc 鍵可退出全屏模式。

  • M:切換靜音。

React-friendly

Griffith 是一個基于 React 開發的 web 視頻播放器。對于 React 應用,可以直接通過組件調用的方式使用。

Griffith 使用 Context API 進行狀態管理。對于 React 應用,可以通過引入 Griffith 的 Context 來實現彈幕等自定義功能。

免構建

對于非 React 應用,或者不愿意通過 npm 包安裝的用戶,Griffith 提供 standalone 模式可以免構建工具直接在瀏覽器中使用。

豐富的事件系統

Griffith 定義了豐富的事件系統。

對于視頻播放器中常見的首幀時長,緩沖次數等指標,可以通過接收 Griffith 事件來進行打點記錄。

對于一些需要與播放器進行通信的功能,可以通過往 Griffith 發送事件來與播放器進行交互。

流式播放

Griffith 使用了 Media Source Extensions? ,支持對 mp4 和 m3u8 格式的視頻進行流式播放。

  • 預加載策略: Griffith 可以通過 MSE 動態控制視頻加載進度,以達到節省視頻 CDN 帶寬等目地。

  • 動態平滑切換清晰度:Griffith 可以通過 MSE 實現動態平滑切換視頻清晰度。

如何使用

React 應用

import Player from 'griffith'


const sources = {

hd: {

play_url: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018hd.mp4',

},

sd: {

play_url: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018sd.mp4',

},

}


render(<Player sources={sources} />)

standalone 模式

<div id="player"></div>

<script src="https://unpkg.com/griffith-standalone/dist/index.umd.min.js"></script>

<script>

const target = document.getElementById('player')


const sources = {

hd: {

play_url: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018hd.mp4',

} ,

sd: {

play_url: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018sd.mp4',

},

}


// 創建播放器

const player = Griffith.createPlayer(target)


// 載入視頻

player.render({sources})


// 銷毀視頻

player.dispose()

</script>

技術細節

  • 使用 Yarn workspace 和 Lerna 進行多包管理。

  • 使用 rollup 和 webpack 進行打包。

  • 使用 new Context API 進行狀態管理。

  • 使用 CSS-in-JS 方案來管理樣式。

  • 使用 Jest 來進行單元測試編寫。

  • 使用 Prettier 進行代碼格式統一。

  • 使用 hlsjs 來實現流式播放 m3u8 格式視頻。

  • 使用 griffith-mp4 進行 mp4 到 fmp4 格式的轉換并通過 MSE 實現流式播放。

結語

Griffith 所有的工作都會在 GitHub 上進行(知乎內部使用的也是同一個倉庫)。如果有任何相關的疑問和 bug,歡迎在 GitHub 提交 issue、PR 幫助 Griffith 變得更好。

 本文由用戶 xiaoyuhen自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!