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 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.
yarn add griffith
const sources =hd:play_url: ''sd:play_url: ''
Note: Griffith is not supporting SSR application
const sources =hd:play_url: ''sd:play_url: ''Griffith
packages/griffith: The core library
packages/griffith-message: Helpers for cross-window message
packages/griffith-mp4: MP4 plugin powered by MediaSource API
packages/griffith-hls: HLS plugin powered by hls.js
example: example and demos
packages/griffith-standalone: A UMD build that can be used without React or Webpack
Build tools like webpack include
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 =moduleexports =plugins:__WITHOUT_HLSJS__: JSON // excludes griffith-hls__WITHOUT_MP4__: JSON // excludes griffith-mp4
Note that without
griffith-hls Griffith can no longer play MP4 / HLS media unless the browser supports it natively.
Read below to learn how you can take part in improving Griffith.
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.