A React-based web video player

griffith

A React-based web video player.

• Streaming: Griffith makes streaming easy. Whether your video format is mp4 or hls, Griffith can use Media Source Extension (MSE) for segment loading.
• Extensibility: Griffith makes it simple to support video features in React apps. It also supports the UMD (Universal Module Definition) patterns for use directly in the browser if your application is not based on React.
• Reliability: Griffith has been widely used in the web and mobile web of zhihu.

Usage

React application

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} />)

Note: SSR application is not supported

non-React application

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

Project Structure

Griffith is a monorepo and use Yarn workspace and Lerna.

Core

• packages/griffith: The core lirary

Utilities

• packages/griffith-message: Helpers for cross-window message
• packages/griffith-utils: Utilities

Plugins

• packages/griffith-mp4: MP4 plugin powered by MediaSource API
• packages/griffith-hls: HLS plugin powered by hls.js

Others

• example: example and demos
• packages/griffith-standalone: A UMD build that can be used without React or Webpack

Custom Build

Build tools like webpack will include griffith-mp4 and packages/griffith-hls by default. You can make your bundle smaller by exluding a plugin with build-time globals.

If you use webpack, do so with DefinePlugin:

const {DefinePlugin} = require('webpack')

module.exports = {
  plugins: [
    new DefinePlugin({
      __WITHOUT_HLSJS__: JSON.stringify(true), // exludes griffith-hls
      __WITHOUT_MP4__: JSON.stringify(true), // exludes griffith-mp4
    }),
  ],
}

Note that without griffith-mp4 / griffith-hls Griffith can no longer play MP4 / HLS media unless the browser supports it natively.

GitHub