知乎视频播放器Griffith开源介绍什么是Griffith？Griffith是一个基于React的视频播放器，目前用于知乎网页和移动网页，并在GitHub上开源。开源地址和示例GitHub地址：https://github.com/zhihu/grif...CodeSandbox示例：https://codesandbox.io/s/74ol...简单易用的UIGriffith提供了一个简单易用的播放器用户界面。目前，我知道网页上的视频播放器使用的是Griffith。快捷键支持Griffith参考了YouTube的快捷键支持，以后会增加更多的快捷键。空格键：选中进度条时，可以控制视频的播放/暂停。如果按钮已被选中，则可用于单击该按钮。K：暂停/播放播放器中的视频。选择进度条状态下的左/右箭头：快进/快退5秒。J：在播放器中倒退10秒。L：在播放器中快进10秒。所选进度条上的向上/向下箭头：将音量增加/减少5%。选中进度条状态中的数字1到9（不是数字键盘上的数字）：跳转到视频进度的10%到90%。进度条状态下的数字0（不是数字键盘上的0）被选中：跳转到视频开头。F：启用全屏模式。如果启用了全屏模式，请再次按F键或按Esc键退出全屏模式。M：切换静音。React-friendlyGriffith是一个基于React的网络视频播放器。对于React应用，可以直接通过组件调用来使用。Griffith使用ContextAPI进行状态管理。对于React应用，可以通过引入Griffith的Context来实现弹幕等自定义功能。Build-free对于非React应用，或者不愿意通过npm包安装的用户，Griffith提供了独立模式，可以直接在浏览器中使用，无需构建工具。丰富的事件系统Griffith定义了一个丰富的事件系统。对于视频播放器中常见的首帧时长、缓冲区数量等指标，可以通过接收Griffith事件记录下来。对于一些需要与播放器进行通信的功能，您可以通过向Griffith发送事件来与播放器进行交互。StreamingGriffith使用MediaSourceExtensions?来支持mp4和m3u8格式的流视频。预加载策略：Griffith可以通过MSE动态控制视频加载进度，达到节省视频CDN带宽的目的。动态平滑切换清晰度：Griffith可以通过MSE实现动态平滑切换视频清晰度。如何使用React应用importPlayerfrom'griffith'constsources={hd:{play_url:'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018hd.mp4',},sd:{play_url:'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018sd.mp4',},}render(
