React に基づいたビデオプレイヤー

English | 简体中文 | 日本語

はじめに

• ストリーミング: Griffith はストリーミングを簡単にします。ビデオフォーマットは mp4 や hls にかかわらず、Griffith は Media Source Extension (MSE) を使ってセグメントをロードすることができます。
• 拡張性: Griffith は React アプリにビデオ機能をサポートすることを簡単にします。React に基づいていない場合は、ブラウザで直接使用するための UMD（Universal Module Definition）もサポートされています。
• 信頼性: Griffith は Zhihu の Web およびモバイル Web で広く使用されています。

使い方

React アプリ

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

詳しく

ノート: Griffith は SSR アプリを対応できません

React を使用していない場合

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

スタンドアロンモードの詳しい使い方

プロジェクトの構造

Griffith は Yarn workspace と Lerna を使っている Monorepo です。

コーア

• packages/griffith: コーアライブラリ

ユーティリティ

• packages/griffith-message: クロスドメイン通信のヘルパー
• packages/griffith-utils: 他のユーティリティ

プラグイン

• packages/griffith-mp4: MP4 プラグインは MediaSource API を使っています。
• packages/griffith-hls: HLS プラグインは hls.js を使っています。

その他

• example: サンプル例とデモ
• packages/griffith-standalone: 全部のモジュールを含めての UMD バージョン、ブラウザーで直接に使用できます。

カスタムビルド

webpack のようなビルドツールはデフォルトで griffith-mp4 と griffith-hls を含みます。ビルド時にエイリアスを挿入することでプラグインを削除できるため、パッケージサイズを縮小できます。

webpack を使いる場合, 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',
    },
  },
}

ノート：griffith-mp4 と griffith-hls がないと、ブラウザがネイティブにサポートしている限り、Griffith は MP4 と HLS メディアを再生できなくなります。

貢献

下記のとおり、Griffith への貢献はどんなものでも歓迎です。

貢献ガイド

貢献ガイドを読んて、開発プロセスに参加します。

貢献者一覧

• Cheng Wang
• Wuhao Liu
• Xiaoyan Li
• Tianxiao Wang
• Xiaoshuang Bai (Designer)

ライセンス

MIT