知乎视频播放器开源了~

2019年9月1日 387次阅读 来源: xiao雨痕

知乎视频播放器 Griffith 开源引见

Griffith 是什么？

Griffith 是一个基于 React 的视频播放器，现在已在知乎 web 和 mobile web 内运用，并在 GitHub 上开源。

开源地点及示例

GitHub 地点：https://github.com/zhihu/grif…

CodeSandbox 示例：https://codesandbox.io/s/74ol…

特征

简约易用的 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: {
    play_url: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018hd.mp4',
  },
  sd: {
    play_url: '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: {
      play_url: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018hd.mp4',
    } ,
    sd: {
      play_url: '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 变得更好。

    原文作者：xiao雨痕
    原文地址: https://segmentfault.com/a/1190000018757383
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞