V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 2086 天前的主题，其中的信息可能已经有所发展或是发生改变。

知乎视频播放器 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(<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: {
      playurl: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018hd.mp4',
    } ,
    sd: {
      playurl: '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 变得更好。

griffith

播放器

React

视频

51 条回复 • 2019-04-04 21:15:18 +08:00

alvin666

2019-04-03 19:37:52 +08:00 via Android

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

SimonOne

2019-04-03 19:54:40 +08:00

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

FrankFang128

2019-04-03 19:57:50 +08:00

知乎的前端水平……

leeUp

2019-04-03 19:58:53 +08:00 via iPhone

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

misaka19000

2019-04-03 20:01:45 +08:00

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

xeaglex

2019-04-03 20:06:43 +08:00 via Android

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

hanqian

2019-04-03 20:12:52 +08:00

知乎的视频播放器 LMAO

hasaki1997

2019-04-03 20:19:42 +08:00 via Android

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

chengfeng

2019-04-03 20:25:15 +08:00 via iPhone

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

mamahaha

2019-04-03 20:40:30 +08:00

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

wxsm

2019-04-03 20:43:50 +08:00

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

Les1ie

2019-04-03 20:44:23 +08:00

还没点进来我就知道帖子回复会是什么样子的了 hhhh

我也在想知道为什么即使百兆网络，在网页知乎里面点开视频也可以那么卡..

andy12530

2019-04-03 20:49:40 +08:00

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

billlee

2019-04-03 22:04:20 +08:00

日常崩溃

yangsimonguo

2019-04-03 22:10:54 +08:00

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

Nicoco

2019-04-03 23:39:15 +08:00

移动端自定义 UI 会被实际环境打脸的，比如 X5 浏览器内核、比如 OPPO 浏览器、小米浏览器…… 这些劫持原生 video 标签，让你哭。

当然，还是非常鼓励知乎这样的开源技术行为，为你的勇气鼓掌！

malusama

2019-04-04 00:29:54 +08:00

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

suxiaoxiann

2019-04-04 01:28:38 +08:00

知乎播放器真的垃圾

strpbrk

2019-04-04 06:30:27 +08:00 via iPhone

刷存在

KuzhiBake

2019-04-04 07:14:52 +08:00 via Android

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

tutustream

2019-04-04 08:50:48 +08:00

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

hongch

2019-04-04 09:14:05 +08:00

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

PhpBestRubbish

2019-04-04 09:16:25 +08:00

真·面向 kpi 开源

strugglexiang

2019-04-04 09:24:55 +08:00

各位的评论把我逗笑了

xiaoyuhen

2019-04-04 10:26:14 +08:00

@Nicoco

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

1v9

2019-04-04 10:35:32 +08:00

这评论区哈哈

ljspython

2019-04-04 10:43:23 +08:00

哈哈，评论笑尿

impressioncr

2019-04-04 10:45:58 +08:00

我选择西瓜播放器

mnsw

2019-04-04 10:51:10 +08:00

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

jefferycai

2019-04-04 10:54:10 +08:00

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

SEARCHINGFREE

2019-04-04 10:56:42 +08:00

emmm 各位老哥都这么暴躁吗

不管你 star 没，我反正 fork 了

glues

2019-04-04 11:05:58 +08:00

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

jefferycai

2019-04-04 11:26:48 +08:00

小编，我帮你测试吧。
我测试了简单的 html demo，视频都不播放 [重点重点重点重点重点重点重点重点重点重点重点重点重点]
引入了线上 js 路径，也有 mp4 资源。也把 scrpit 代码放到里面执行
测试点：QQ 浏览器
------------------------- IS NO [不行]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>123</title>
</head>
<body>
<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: {
// https://zhstatic.zhihu.com/cfe/griffith/zhihu2018_hd.mp4
playurl: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
} ,
sd: {
// https://zhstatic.zhihu.com/cfe/griffith/zhihu2018_sd.mp4
playurl: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
},
}

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

// 载入视频
player.render({sources})

// console.log(sources);
// 销毁视频
// player.dispose()
</script>
</body>
</html>

jefferycai

2019-04-04 11:27:31 +08:00

是我的操作有问题么？