What is Griffith?

Griffith is a Video player based on React. It is currently available on Zhihu Web and Mobile Web, and is open source on GitHub.


Open source addresses and examples

Making address: https://github.com/zhihu/griffith

CodeSandbox example: CodeSandbox. IO/s / 74 olr5z02…


features

Simple and easy to use UI

Griffith provides an easy-to-use player UI. Griffith is currently used in zhihu web video player.



Shortcut Key Support

Griffith made reference to YouTube for shortcut support, with more to come.

  • Space bar: When the progress bar is selected, the video can be played or paused. Can be used to click a button if it is already selected.
  • K: Pause/play the video in the player.
  • Select the left/right arrows in the progress bar state to fast forward/Rewind 5 seconds.
  • J: Rewind 10 seconds fast in the player.
  • L: Fast forward 10 seconds in the player.
  • Select the up/down arrow in the progress bar state to increase/decrease volume by 5%.
  • Select the numbers 1 to 9 in the progress bar state (not the numbers on the numeric keypad) : jump to 10% to 90% of the video progress.
  • Select the number 0 in the progress bar state (not the 0 on the numeric keypad) : skip to the beginning of the video.
  • F: Enable the full-screen mode. If the full-screen mode is enabled, press F again or Esc to exit the mode.
  • M: Switch to mute.

React-friendly

Griffith is a Web video player based on React. React applications can be used directly through component calls.

Griffith uses the Context API for state management. For React applications, you can import Griffith Context to implement custom functions such as bullets.


Avoid building

For users who are not React applications, or who do not want to install via the NPM package, Griffith provides the standalone mode to use directly from the browser without building tools.


Rich event system

Griffith defined a rich system of events.

For the first frame duration, buffering times and other indicators common in video players, Griffith events can be received to record.

For functions that need to communicate with the player, you can interact with the player by sending events to Griffith.

streaming

Griffith uses Media Source Extensions™ to stream video in MP4 and M3U8 formats.

  • Preloading strategy: Griffith can dynamically control video loading progress through MSE to save video CDN bandwidth.
  • Dynamic smooth resolution switching: Griffith can dynamically smooth video resolution switching using MSE.


How to use

The React application

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} />)Copy the code

Standalone mode

<div id="player"></div>
<script src="https://unpkg.com/griffith-standalone/dist/index.umd.min.js"></script>
<script>
  const target = document.getElementById('player')

  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',}, } // createPlayer const player = griffix.createplayer (target) // load video player.render({sources}) // dispose video player.dispose() </script>Copy the code


The technical details

  • Use Yarn Workspace and Lerna to manage multiple packages.
  • Use rollup and WebPack for packaging.
  • Use the New Context API for state management.
  • Use the CSS-in-JS scheme to manage styles.
  • Use Jest for unit test writing.
  • Use Prettier to format code.
  • Use HLSJS to realize streaming video in M3U8 format.
  • Griffith-mp4 is used to convert MP4 to FMP4 format and realize streaming playback through MSE.


conclusion

Griffith does all of his work on GitHub (zhihu uses the same warehouse internally). If you have any questions or bugs, please help Griffith get better by submitting an issue on GitHub.