知乎视频播放器 Griffith 开源了~
知乎视频播放器 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 参考 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 开源了~相关推荐
- 【开源】知乎视频播放器 Griffith 介绍
Griffith 是什么? Griffith 是一个基于 React 的视频播放器,目前已在知乎 web 和 mobile web 内使用,并在 GitHub 上开源. 开源地址及示例 GitHub ...
- Javascript 控制 Flash FLV视频播放器 --国外开源
制作一个简单的FLV播放器很简单 , 做功能强大的就心有余而力不足了 . 经过google ,找到了一款开源的视频播放器JW_FLV_Player, 也可以当MP3播放器 . javascritp可 ...
- 视频播放器SunPlayer开源啦
SunPlayer是我的一个练手项目,它是一个视频播放器. 核心播放部分是ffplayer(https://github.com/rockcarry/ffplayer),ffplayer是对ffmpe ...
- Android视频播放器实现小窗口和全屏状态切换
Android视频播放器实现小窗口和全屏状态切换 实在是不好意思,楼下评论的兄弟久等了,这文章一直没写第一是没时间,第二是自己准备也不充足,最近才看了好几个Android视频播放器的开源项目,才对视频 ...
- Linux下三大最佳的开源视频播放器
1.GNOME视频播放器 主要亮点: GNOME桌面的简单视频播放器 支持插件 能够分类/访问单独的视频频道 GNOME桌面环境发行版的默认视频播放器(以前称为Totem).它支持所有主要文件格式,因 ...
- linux 播放器系统,在Linux上安装和使用开源视频播放器MPlayer
MPlayer是跨平台的开源媒体播放器.它的名字是" Movie Player"的缩写. MPlayer是Linux上最古老的视频播放器之一,已有18年的历史,它启发了许多其他媒体 ...
- 介绍当前流行的一些开源Flash视频播放器
栏目导航 Java开源 OPEN文档 OPEN搜索 OPEN家园 OPEN资讯 提交开源项目 A Accordion AutoComplete Animation C Calendar Charts ...
- linux开源视频播放器_什么定义了Linux的顶级开源音乐播放器?
linux开源视频播放器 在我撰写此音乐专栏的两年左右的时间里,Linux发烧友的世界得到了发展. 出现了新的Linux发行版和开源音频播放器,旧的已经消失了,随着高质量的数字下载,新的和高质量的播放 ...
- c++ vs2015 播放音乐_Linux 中的十大开源视频播放器
(给Linux爱好者加星标,提升Linux技能) 编译:linux中国-lujun9972,作者:Stella Aldridge https://linux.cn/article-11481-1.ht ...
最新文章
- 区块链100讲:智能合约审计指南
- 首款VR全身触控体验套件Teslasuit,让你浑身“来电”
- Confluence 6 配置系统属性
- c 语言 指针 指向数组,C 指向数组的指针
- 在C#代码中应用Log4Net 中配置文件的解释
- linux程序设计---序
- 14W 行代码量的前端页面长什么样
- oracle选择外键列,Oracle外键列上是否需要索引?
- Linux下编译安装LAMP并分离为多台服务器
- linux 临时去掉cp别名_命令别名:保护和服务
- yii2 配置文件加载顺序, 以及调用自定义配置信息。
- 由公式抽样检查所想到的...
- appium示例代码python_Appium+python测试app实例
- 数据可视化-制作交易收盘价
- 文字转语音软件哪个好?这些软件值得收藏
- Sentry 开发者贡献指南 - SDK 开发(性能监控)
- qq屏蔽怎么知道对方信息(qq屏蔽怎么让对方知道)
- Win10安装Docker和k8s
- 【HDU6608 Fansblog】求很大很大的数的阶乘
- Linux命令中特殊符号
热门文章
- 自动备份MySQL数据库并发送邮件的SHELL脚本
- CreateProcess error=5, 拒绝访问。
- 中国政法大学李永平教授
- LeetCode(算法)- 297. 二叉树的序列化与反序列化
- 施密特正交化标准化(习题)
- ERROR: Exception when publishing, exception message [Exec timed out or was interrupted after XXX ms
- Linux:Quota 的基本命令​​​​​​​
- SQLYong设置Tab缩进
- 女孩子学高铁好还是计算机好,女孩学什么专业好 最吃香的专业
- Centos 7安装FSL