摘要：知乎視頻播放器開源介紹是什么是一個(gè)基于的視頻播放器，目前已在知乎和內(nèi)使用，并在上開源。對(duì)于視頻播放器中常見的首幀時(shí)長(zhǎng)，緩沖次數(shù)等指標(biāo)，可以通過(guò)接收事件來(lái)進(jìn)行打點(diǎn)記錄。結(jié)語(yǔ)所有的工作都會(huì)在上進(jìn)行知乎內(nèi)部使用的也是同一個(gè)倉(cāng)庫(kù)。

Griffith 是一個(gè)基于 React 的視頻播放器，目前已在知乎 web 和 mobile web 內(nèi)使用，并在 GitHub 上開源。

GitHub 地址：https://github.com/zhihu/grif...

CodeSandbox 示例：https://codesandbox.io/s/74ol...

Griffith 提供了簡(jiǎn)潔易用的播放器 UI。目前知乎網(wǎng)頁(yè)端視頻播放器就是使用的 Griffith。

Griffith 參考?YouTube?進(jìn)行了快捷鍵支持，后續(xù)還會(huì)添加更多的快捷鍵。

空格鍵：進(jìn)度條處于選中狀態(tài)時(shí)，可控制視頻的播放/暫停。如果已經(jīng)選中某個(gè)按鈕，則可用于點(diǎn)擊該按鈕。

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

選中進(jìn)度條狀態(tài)下的向左/向右箭頭：快進(jìn)/快退 5 秒鐘。

J：在播放器中快退 10 秒。

L：在播放器中快進(jìn) 10 秒。

選中進(jìn)度條狀態(tài)下的向上/向下箭頭：將音量增大/減小 5%。

選中進(jìn)度條狀態(tài)下的數(shù)字 1 到 9（不是數(shù)字小鍵盤上的數(shù)字）：跳至視頻進(jìn)度的 10% 到 90%。

選中進(jìn)度條狀態(tài)下的數(shù)字 0（不是數(shù)字小鍵盤上的 0）：跳至視頻的開頭。

F：?jiǎn)⒂萌聊Ｊ?。如果已啟用全屏模式，則再次按 F 鍵或按 Esc 鍵可退出全屏模式。

M：切換靜音。

Griffith 是一個(gè)基于 React 開發(fā)的 web 視頻播放器。對(duì)于 React 應(yīng)用，可以直接通過(guò)組件調(diào)用的方式使用。

Griffith 使用?Context API?進(jìn)行狀態(tài)管理。對(duì)于 React 應(yīng)用，可以通過(guò)引入 Griffith 的 Context 來(lái)實(shí)現(xiàn)彈幕等自定義功能。

對(duì)于非 React 應(yīng)用，或者不愿意通過(guò) npm 包安裝的用戶，Griffith 提供 standalone?模式可以免構(gòu)建工具直接在瀏覽器中使用。

Griffith 定義了豐富的事件系統(tǒng)。

對(duì)于視頻播放器中常見的首幀時(shí)長(zhǎng)，緩沖次數(shù)等指標(biāo)，可以通過(guò)接收 Griffith 事件來(lái)進(jìn)行打點(diǎn)記錄。

對(duì)于一些需要與播放器進(jìn)行通信的功能，可以通過(guò)往 Griffith 發(fā)送事件來(lái)與播放器進(jìn)行交互。

Griffith 使用了?Media Source Extensions??，支持對(duì) mp4 和 m3u8 格式的視頻進(jìn)行流式播放。

預(yù)加載策略： Griffith 可以通過(guò)?MSE?動(dòng)態(tài)控制視頻加載進(jìn)度，以達(dá)到節(jié)省視頻 CDN 帶寬等目地。

動(dòng)態(tài)平滑切換清晰度：Griffith 可以通過(guò)?MSE?實(shí)現(xiàn)動(dòng)態(tài)平滑切換視頻清晰度。

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()

使用?Yarn workspace?和?Lerna?進(jìn)行多包管理。

使用?rollup?和?webpack?進(jìn)行打包。

使用?new Context API?進(jìn)行狀態(tài)管理。

使用?CSS-in-JS?方案來(lái)管理樣式。

使用?Jest?來(lái)進(jìn)行單元測(cè)試編寫。

使用?Prettier?進(jìn)行代碼格式統(tǒng)一。

使用?hlsjs?來(lái)實(shí)現(xiàn)流式播放 m3u8 格式視頻。

使用?griffith-mp4?進(jìn)行 mp4 到 fmp4 格式的轉(zhuǎn)換并通過(guò) MSE 實(shí)現(xiàn)流式播放。

Griffith 所有的工作都會(huì)在 GitHub 上進(jìn)行（知乎內(nèi)部使用的也是同一個(gè)倉(cāng)庫(kù)）。如果有任何相關(guān)的疑問(wèn)和 bug，歡迎在 GitHub 提交 issue、PR 幫助 Griffith 變得更好。