知乎视频播放器,基于React的Web视频播放器

作者 : admin 本文共829个字,预计阅读时间需要3分钟 发布时间: 2021-04-6 共24人阅读

知乎视频播放器名叫“Griffith ”是一个基于 React 的HTML5视频播放器,目前已在知乎 web 和 mobile web 内使用,并在 GitHub 上开源。

GitHub地址:https://github.com/zhihu/griffith

界面UI展示:

知乎视频播放器,基于React的Web视频播放器插图
知乎视频播放器

流式播放:知乎视频播放器使用了 Media Source Extensions™ ,支持对 mp4 和 m3u8 格式的视频进行流式播放。

  • 预加载策略: Griffith 可以通过 MSE 动态控制视频加载进度,以达到节省视频 CDN 带宽等目地。
  • 动态平滑切换清晰度:Griffith 可以通过 MSE 实现动态平滑切换视频清晰度。

使用方法:

<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>

这里我们简单的介绍一下支持和简单的用户,细节使用大家可参考开源库说明,我们这里就不放源文件了。

1. 本站所有源码、模板、插件等其他资源,都不包含技术服务请大家谅解!
2. 本站提供的所有资源不免费提供个人需要的资源修改、美化、功能定制!
3. 如遇需要解压密码,则解压密码为"www.360mb.net"!
4. 由于源码属于可复制性产品,发货后禁止买家以各种理由退款!!
5. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
6. 如用于商业或者非法用途,与本站无关,一切后果请用户自负!
7. 本站提供资源如遇源码失效,功能异常等等可提供退款服务,可参考退款规则!

360模板吧 » 知乎视频播放器,基于React的Web视频播放器

发表评论