Griffith 是一个基于 React 的视频播放器,目前已在知乎 web 和 mobile web 内使用,并在 GitHub 上开源。
GitHub 地址: https://github.com/zhihu/griffith
CodeSandbox 示例: https://codesandbox.io/s/74olr5z02x
Griffith 提供了简洁易用的播放器 UI。目前知乎网页端视频播放器就是使用的 Griffith。
Griffith 参考 YouTube 进行了快捷键支持,后续还会添加更多的快捷键。
Griffith 是一个基于 React 开发的 web 视频播放器。对于 React 应用,可以直接通过组件调用的方式使用。
Griffith 使用 Context API 进行状态管理。对于 React 应用,可以通过引入 Griffith 的 Context 来实现弹幕等自定义功能。
对于非 React 应用,或者不愿意通过 npm 包安装的用户,Griffith 提供 standalone 模式可以免构建工具直接在浏览器中使用。
Griffith 定义了丰富的事件系统。
对于视频播放器中常见的首帧时长,缓冲次数等指标,可以通过接收 Griffith 事件来进行打点记录。
对于一些需要与播放器进行通信的功能,可以通过往 Griffith 发送事件来与播放器进行交互。
Griffith 使用了 Media Source Extensions™ ,支持对 mp4 和 m3u8 格式的视频进行流式播放。
###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} />)
<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>
Griffith 所有的工作都会在 GitHub 上进行(知乎内部使用的也是同一个仓库)。如果有任何相关的疑问和 bug,欢迎在 GitHub 提交 issue、PR 帮助 Griffith 变得更好。
1
alvin666 2019-04-03 19:37:52 +08:00 via Android 27
知乎播放器做的这么垃圾还来开源...
不知道怎么回事每次 APP 和网页里面的视频加载很慢,然而把链接( i.vzuu.com )拿出来 Chrome 直接就能播,服了 |
2
SimonOne 2019-04-03 19:54:40 +08:00 4
想看看知乎视频加载只要失败就一直失败,除非强行停止再打开才能重新加载。是怎么实现的
|
3
FrankFang128 2019-04-03 19:57:50 +08:00 1
知乎的前端水平……
|
4
leeUp 2019-04-03 19:58:53 +08:00 via iPhone
我觉得微博的很好用 ios 下还可以拖拽退出
|
5
misaka19000 2019-04-03 20:01:45 +08:00 3
知乎的视频播放是真的垃圾,很多时候根本没办法正常使用。gif 图片播放也是一样,经常点击了然后就卡死
|
6
xeaglex 2019-04-03 20:06:43 +08:00 via Android
知乎视频播放器在 Firefox 下基本没有兼容性可言。。
|
7
hanqian 2019-04-03 20:12:52 +08:00 1
知乎的视频播放器 LMAO
|
8
hasaki1997 2019-04-03 20:19:42 +08:00 via Android 2
知乎安卓端的播放器,我印象中打开十次就有五次播放失败
|
9
chengfeng 2019-04-03 20:25:15 +08:00 via iPhone 2
app 上的播放器,宇宙最烂,没有之一
|
10
mamahaha 2019-04-03 20:40:30 +08:00
用开源的东西做出来的,不开源又能怎样。
|
11
wxsm 2019-04-03 20:43:50 +08:00 2
em.... 看了一下貌似没什么亮点,我选择 videojs
|
12
Les1ie 2019-04-03 20:44:23 +08:00 1
还没点进来我就知道帖子回复会是什么样子的了 hhhh
我也在想知道为什么即使百兆网络,在网页知乎里面点开视频也可以那么卡.. |
13
andy12530 2019-04-03 20:49:40 +08:00 2
看到这么多人骂,我就放心了
|
14
billlee 2019-04-03 22:04:20 +08:00
日常崩溃
|
15
yangsimonguo 2019-04-03 22:10:54 +08:00 3
喜闻乐见的刷 25 分钟至乎后台 3.1K 个错误
|
16
Nicoco 2019-04-03 23:39:15 +08:00
移动端自定义 UI 会被实际环境打脸的,比如 X5 浏览器内核、比如 OPPO 浏览器、小米浏览器…… 这些劫持原生 video 标签,让你哭。
当然,还是非常鼓励知乎这样的开源技术行为,为你的勇气鼓掌! |
17
malusama 2019-04-04 00:29:54 +08:00 1
知乎的视频体验糟糕的要死
|
18
suxiaoxiann 2019-04-04 01:28:38 +08:00
知乎播放器真的垃圾
|
19
strpbrk 2019-04-04 06:30:27 +08:00 via iPhone
刷存在
|
20
KuzhiBake 2019-04-04 07:14:52 +08:00 via Android
这么影响用户体验的东西也好意思拿出来
|
21
tutustream 2019-04-04 08:50:48 +08:00 8
这玩意开源是不是就是实在做不出来,所以扔出来让大家免费改 bug 的
|
22
hongch 2019-04-04 09:14:05 +08:00
所以那 1000 多的 star 都是内部员工点的吗?
|
23
PhpBestRubbish 2019-04-04 09:16:25 +08:00
真·面向 kpi 开源
|
24
strugglexiang 2019-04-04 09:24:55 +08:00
各位的评论把我逗笑了
|
26
1v9 2019-04-04 10:35:32 +08:00
这评论区哈哈
|
27
ljspython 2019-04-04 10:43:23 +08:00
哈哈,评论笑尿
|
28
impressioncr 2019-04-04 10:45:58 +08:00
我选择西瓜播放器
|
29
mnsw 2019-04-04 10:51:10 +08:00 1
这么垃圾还开源?这是内部搞不定,开源让人帮忙修复的意思?
|
30
jefferycai 2019-04-04 10:54:10 +08:00
小编,这是叫测试。不叫开源
|
31
SEARCHINGFREE 2019-04-04 10:56:42 +08:00
emmm 各位老哥都这么暴躁吗
不管你 star 没,我反正 fork 了 |
32
glues 2019-04-04 11:05:58 +08:00
就没见过比知乎视频播放体验更差的播放器,91p 的都比你们好用
|
33
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> |
34
jefferycai 2019-04-04 11:27:31 +08:00
是我的操作有问题么?
|
35
HorseMa 2019-04-04 11:27:46 +08:00
开源测试法?
|
36
xiaoyuhen OP |
37
xiaoyuhen OP |
38
scalaer 2019-04-04 12:24:00 +08:00 via Android
评论区的老哥笑死我了
|
39
easylee 2019-04-04 12:28:25 +08:00
这是让大家帮着填坑啊!
为了简历好看,我先上为敬。 |
40
liprais 2019-04-04 12:47:48 +08:00 via iPhone
面向 kpi 开源的车祸现场
|
41
FEDT 2019-04-04 12:51:50 +08:00 via iPhone
不是,不管知乎播放器烂不烂,开源总归是好的不是嘛
|
42
huch911 2019-04-04 13:10:34 +08:00
web 播放器,喷客户端的老哥们注意审题
|
43
wuchengkai0 2019-04-04 13:16:11 +08:00
@huch911 web 一样...
|
44
linghu1989122 2019-04-04 13:39:41 +08:00
知乎 APP 就是垃。。什么?这是 web 端?不好意思,走错片场了
|
45
jefferycai 2019-04-04 14:59:43 +08:00
@xiaoyuhen 晕死。
|
46
wangxiaoaer 2019-04-04 15:03:33 +08:00
@tutustream #21 我觉得这个可能性很高。
|
47
Benisme 2019-04-04 15:04:02 +08:00
@linghu1989122 辣鸡就是辣鸡,请一视同仁嗷
|
48
wunonglin 2019-04-04 15:08:01 +08:00 via Android
真还不如原生
|
49
vmskipper 2019-04-04 15:58:20 +08:00
知乎的东西 一如既往的。。。
|
50
meisky6666 2019-04-04 16:09:24 +08:00 via Android
这是让我们给他修 bug?
|
51
BigbyWolf 2019-04-04 21:15:18 +08:00
这是大知乎的诱导营销号盗视频填充流量战略失败了?当年不还要告蜂群吗?
|