zhihu/griffith

zhihu/griffith has 2,505 GitHub stars and 226 forks. GitHot measured -1 stars in 24 hours, -2 in 7 days, and -3 in 15 days. Last checked 2026-11-13 03:38 UTC. Last push 2026-06-15.

이 수치를 측정하는 방법

A React-based web video player

2,505 스타 226 forks

측정된 스타 증가

in 24h: -1
in 7 days: -2
in 15 days: -3
in 1 month: 기록 수집 중

서로 겹치는 기간의 순증가량이며 일별 합계가 아닙니다. 측정값이 없으면 비워 둡니다. 스타는 관심도를 나타내며 품질을 보장하지 않습니다.

README.md

Original

A React-based Web video player

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

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 include griffith-mp4 and griffith-hls by default. You can make your bundle smaller by injecting aliases at build-time.

If you use webpack, do so with resolve.alias:

// webpack v5+
module.exports = {
  resolve: {
    alias: {
      'griffith-hls': false,
      'griffith-mp4': false,
    },
  },
}

// webpack v4
module.exports = {
  resolve: {
    alias: {
      'griffith-hls': 'griffith/null',
      'griffith-mp4': 'griffith/null',
    },
  },
}

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