基于React的Web视频播放器

代码风格

简介

流媒体： Griffith使流媒体变得简单。无论您的视频格式是mp4还是hls，Griffith都可以使用媒体源扩展（MSE）进行分段加载。
可扩展性： Griffith使在React应用中支持视频功能变得简单。如果您的应用不基于React，它还支持UMD（通用模块定义）模式，可以直接在浏览器中使用。
可靠性： Griffith已在知乎的网页和移动网页中得到广泛应用。

使用方法

React应用

yarn add griffith

import Player from 'griffith'

const sources = {
  hd: {
    play_url: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018_hd.mp4',
  },
  sd: {
    play_url: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018_sd.mp4',
  },
}

render(<Player sources={sources} />)

详细使用说明

注意：Griffith不支持SSR应用

非React应用

<script src="https://unpkg.com/griffith-standalone/dist/index.umd.min.js"></script>

const sources = {
  hd: {
    play_url: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018_hd.mp4',
  },
  sd: {
    play_url: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018_sd.mp4',
  },
}

Griffith.createPlayer(element).render({sources})

独立模式详细使用说明

项目结构

Griffith是一个Monorepo，使用Yarn工作区和Lerna。

核心

packages/griffith：核心库

实用工具

packages/griffith-message：跨窗口消息的辅助工具
packages/griffith-utils：实用工具

插件

packages/griffith-mp4：由MediaSource API驱动的MP4插件
packages/griffith-hls：由hls.js驱动的HLS插件

其他

example：示例和演示
packages/griffith-standalone：可以在没有React或Webpack的情况下使用的UMD构建

自定义构建

像webpack这样的构建工具默认包含griffith-mp4和griffith-hls。您可以通过在构建时注入别名来减小bundle的大小。

如果您使用webpack，可以使用resolve.alias实现：

// webpack v5+
module.exports = {
  resolve: {
    alias: {
      'griffith-hls': false,
      'griffith-mp4': false,
    },
  },
}

// webpack v4
module.exports = {
  resolve: {
    alias: {
      'griffith-hls': 'griffith/null',
      'griffith-mp4': 'griffith/null',
    },
  },
}

请注意，没有griffith-mp4 / griffith-hls，Griffith将无法播放MP4 / HLS媒体，除非浏览器原生支持。