Griffith — A React-based web video player that makes streaming easy
What is Griffith?
Griffith is a React-based web video player that has been open sourced on GitHub.
Code and examples
GitHub: https://github.com/zhihu/griffith
CodeSandbox example: https://codesandbox.io/embed/p03wm0o80
Features
Simple and easy to use UI
Griffith provides a simple and easy to use player UI.
Shortcut support
Griffith refers to YouTube for shortcut key support and will add more shortcuts later.
- Spacebar: Play/Pause when the seek bar is selected. Activate a button if a button has focus.
- k: Pause/Play in player.
- Left/Right arrow on the seek bar: Seek backward/forward 5 seconds.
- j: Seek backward 10 seconds in player.
- l: Seek forward 10 seconds in player.
- Up/Down arrow on the seek bar: Increase/Decrease volume 5%.
- Numbers 1 to 9 on the seek bar (not on the numeric pad): Seek to the 10% to 90% of the video.
- Number 0 on the seek bar (not on the numeric pad): Seek to the beginning of the video.
- f: Activate full screen. If full screen mode is enabled, activate F again or press escape to exit full screen mode.
- m: Toggle mute
React-friendly
Griffith is a web video player based on React. For React applications, you can use them directly by import components.
Griffith uses the Context API for state management. For React applications, you can implement custom functionality by import Griffith’s Context.
UMD
For non-React applications, or users who are unwilling to install through the npm package, Griffith provides UMD (Universal Module Definition) patterns for JavaScript modules that work everywhere.
Event system
Griffith defines a event system.
For the first frame duration, buffer count and other indicators commonly seen in video players, you can add a log by subscribing to the Griffith event.
For some features that need to communicate with the player, you can interact with the player by subscribing to the Griffith event.
Streaming
Griffith uses Media Source Extensions™ to support streaming of mp4 and m3u8 formats.
- Preloading strategy: Griffith can dynamically control video loading progress through MSE.
- Automatically adjust video quality: Griffith can achieve Automatically adjusted video quality via MSE.
Usage
React application
UMD
All work on Griffith happens directly on GitHub. Both core team members and external contributors send pull requests which go through the same review process.
Feel free to fork and edit!