知乎視訊播放器 Griffith 開源了~

xiaoyuhen1994發表於2019-04-03
播放器

Griffith 是什麼？

Griffith 是一個基於 React 的視訊播放器，目前已在知乎 web 和 mobile web 內使用，並在 GitHub 上開源。


開源地址及示例

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

CodeSandbox 示例：codesandbox.io/s/74olr5z02…


特性

簡潔易用的 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/zhihu2018_hd.mp4',
  },
  sd: {
    play_url: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018_sd.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/zhihu2018_hd.mp4',
    } ,
    sd: {
      play_url: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018_sd.mp4',
    },
  }

  // 建立播放器
  const player = Griffith.createPlayer(target)

  // 載入視訊
  player.render({sources})

  // 銷燬視訊
  player.dispose()
</script>複製程式碼


技術細節


結語

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


相關文章