Skip to content
A React-based web video player
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github docs: update ISSUE_TEMPLATE Mar 23, 2019
example v1.4.4 Apr 23, 2019
packages fix: cannot read property start of undefined (#86) Apr 25, 2019
.eslintignore feat: add buffered cache (#43) Mar 27, 2019
.eslintrc.js feat: init griffith Mar 22, 2019
.gitignore feat: add zh-hant language (#39) Mar 26, 2019
.prettierignore feat: add buffered cache (#43) Mar 27, 2019
.prettierrc.js feat: init griffith Mar 22, 2019
.travis.yml fix: ci config (#28) Mar 25, 2019
CHANGELOG.md v1.4.4 Apr 23, 2019
CODE_OF_CONDUCT.md feat: init griffith Mar 22, 2019
CONTRIBUTING-zh-Hans.md feat: add zh-hant language (#39) Mar 26, 2019
CONTRIBUTING.md feat: add zh-hant language (#39) Mar 26, 2019
LICENSE Create LICENSE (#2) Mar 22, 2019
README-ja.md
README-zh-Hans.md docs: script tag (#44) Mar 27, 2019
README.md docs: script tag (#44) Mar 27, 2019
babel.config.js
jest.config.js build: add CJS & ESM build (#23) Mar 26, 2019
jest.setup.js feat: init griffith Mar 22, 2019
lerna.json v1.4.4 Apr 23, 2019
package.json build: add rollup sourcemap and external config (#79) Apr 18, 2019
rollup.config.js build: add package dependencies to Rollup external Apr 19, 2019
yarn.lock build: add rollup sourcemap and external config (#79) Apr 18, 2019

README.md

A React-based Web video player

License npm package Build Status codecov Code style PRs Welcome

English | 简体中文 | 日本語

Introduction

  • 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 direct use 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} />)

Detailed usage

Note: Griffith is not supporting SSR application

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

Standalone mode detailed usage

Project Structure

Griffith is a Monorepo and uses Yarn workspace and Lerna.

Core

  • packages/griffith: The core library

Utilities

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

Plugins

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 include griffith-mp4 and packages/griffith-hls by default. You can make your bundle smaller by excluding 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), // excludes griffith-hls
      __WITHOUT_MP4__: JSON.stringify(true), // excludes griffith-mp4
    }),
  ],
}

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

Contributing

Read below to learn how you can take part in improving Griffith.

Contributing Guide

Read our contributing guide to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to Griffith.

Contributor

LICENSE

MIT

You can’t perform that action at this time.