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

Griffith 是什么？

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: {
    playurl: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018hd.mp4',
  },
  sd: {
    playurl: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018sd.mp4',
  },
}

render()

standalone 模式

技术细节

使用 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 变得更好。

知乎播放器做的这么垃圾还来开源...
不知道怎么回事每次 APP 和网页里面的视频加载很慢，然而把链接（ i.vzuu.com ）拿出来 Chrome 直接就能播，服了

想看看知乎视频加载只要失败就一直失败，除非强行停止再打开才能重新加载。是怎么实现的

知乎的前端水平……

我觉得微博的很好用 ios 下还可以拖拽退出

知乎的视频播放是真的垃圾，很多时候根本没办法正常使用。gif 图片播放也是一样，经常点击了然后就卡死

知乎视频播放器在 Firefox 下基本没有兼容性可言。。

知乎的视频播放器 LMAO

知乎安卓端的播放器，我印象中打开十次就有五次播放失败

app 上的播放器，宇宙最烂，没有之一

用开源的东西做出来的，不开源又能怎样。

em.... 看了一下貌似没什么亮点，我选择 videojs

还没点进来我就知道帖子回复会是什么样子的了 hhhh
我也在想知道为什么即使百兆网络，在网页知乎里面点开视频也可以那么卡..

看到这么多人骂，我就放心了

日常崩溃

喜闻乐见的刷 25 分钟至乎后台 3.1K 个错误

移动端自定义 UI 会被实际环境打脸的，比如 X5 浏览器内核、比如 OPPO 浏览器、小米浏览器…… 这些劫持原生 video 标签，让你哭。
当然，还是非常鼓励知乎这样的开源技术行为，为你的勇气鼓掌！

知乎的视频体验糟糕的要死

知乎播放器真的垃圾

刷存在

这么影响用户体验的东西也好意思拿出来

这玩意开源是不是就是实在做不出来，所以扔出来让大家免费改 bug 的

所以那 1000 多的 star 都是内部员工点的吗？

真·面向 kpi 开源

各位的评论把我逗笑了

移动端自定义 UI 没有做，因为手机浏览器劫持太严重，仅保留了基础播放功能。

这评论区哈哈

哈哈，评论笑尿

我选择西瓜播放器

这么垃圾还开源？这是内部搞不定，开源让人帮忙修复的意思？

小编，这是叫测试。不叫开源

emmm 各位老哥都这么暴躁吗
不管你 star 没，我反正 fork 了

就没见过比知乎视频播放体验更差的播放器，91p 的都比你们好用

小编，我帮你测试吧。
我测试了简单的 html demo，视频都不播放 [重点重点重点重点重点重点重点重点重点重点重点重点重点]
引入了线上 js 路径，也有 mp4 资源。也把 scrpit 代码放到里面执行
测试点：QQ 浏览器
------------------------- IS NO [不行]

123

是我的操作有问题么？

开源测试法？

应该是 play_url，这里写错了，抱歉。

https://codesandbox.io/s/xjn1563004

评论区的老哥笑死我了

这是让大家帮着填坑啊！
为了简历好看，我先上为敬。

面向 kpi 开源的车祸现场

不是，不管知乎播放器烂不烂，开源总归是好的不是嘛

web 播放器，喷客户端的老哥们注意审题

web 一样...

知乎 APP 就是垃。。什么？这是 web 端？不好意思，走错片场了

晕死。

我觉得这个可能性很高。

辣鸡就是辣鸡，请一视同仁嗷

真还不如原生

知乎的东西一如既往的。。。

这是让我们给他修 bug?

这是大知乎的诱导营销号盗视频填充流量战略失败了？当年不还要告蜂群吗？