Skip to content

Latest commit

 

History

History
144 lines (102 loc) · 4.88 KB

README-ja.md

File metadata and controls

144 lines (102 loc) · 4.88 KB
Raw

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

License npm package Coverage Status Code style PRs Welcome

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 への貢献はどんなものでも歓迎です。

貢献ガイド

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

貢献者一覧

ライセンス

MIT