知乎开源视频播放器 Griffith 简介

阅读数:6 2020 年 3 月 26 日 19:00

知乎开源视频播放器Griffith简介

Griffith 是什么?

Griffith 是一个基于 React 的视频播放器,目前已在知乎 web 和 mobile web 内使用,并在 GitHub 上开源。

github.com

特性

简洁易用的 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 发送事件来与播放器进行交互 [1]

流式播放

Griffith 使用了 Media Source Extensions™ ,支持对 mp4 和 m3u8 格式的视频进行流式播放。

  • 预加载策略: Griffith 可以通过 MSE 动态控制视频加载进度,以达到节省视频 CDN 带宽等目地。
  • 动态平滑切换清晰度:Griffith 可以通过 MSE 实现动态平滑切换视频清晰度 [2]

如何使用

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} />)

示例: Griffith - CodeSandbox

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-standalone - CodeSandbox

技术细节

结语

Griffith 所有的工作都会在 GitHub 上进行(知乎内部使用的也是同一个仓库)。如果有任何相关的疑问和 bug,欢迎在 GitHub 提交 issue、PR 帮助 Griffith 变得更好。

最后,感谢

@谦谦 对 Griffith 的帮助, 感谢设计师 @白晓双

参考

  1. ^ 知乎 web 端播放器的滑出窗口暂停功能就是根据事件系统开发的。
  2. ^ mp4 格式自动平滑切换清晰度随后会支持。

评论

发布