{"id":13672923,"url":"https://github.com/zhihu/griffith","last_synced_at":"2025-04-11T03:29:22.613Z","repository":{"id":34307638,"uuid":"177081309","full_name":"zhihu/griffith","owner":"zhihu","description":"A React-based web video player","archived":false,"fork":false,"pushed_at":"2024-03-18T12:49:27.000Z","size":4206,"stargazers_count":2509,"open_issues_count":35,"forks_count":226,"subscribers_count":41,"default_branch":"master","last_synced_at":"2025-04-03T17:08:35.905Z","etag":null,"topics":["fmp4","hls","html5-video","html5-video-player","mp4","mp4box","react","react-components","video","zhihu","zhihu-video-player"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/embed/p03wm0o80","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zhihu.png","metadata":{"files":{"readme":"README-ja.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING-zh-Hans.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-03-22T06:08:17.000Z","updated_at":"2025-03-30T22:06:56.000Z","dependencies_parsed_at":"2024-06-18T13:59:01.543Z","dependency_job_id":"53c42057-85b4-49bd-82c7-e22cf36e8006","html_url":"https://github.com/zhihu/griffith","commit_stats":{"total_commits":328,"total_committers":24,"mean_commits":"13.666666666666666","dds":0.4847560975609756,"last_synced_commit":"fc20672c6c086ae2ba9a568d5e4fccf5a6905a8d"},"previous_names":[],"tags_count":52,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhihu%2Fgriffith","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhihu%2Fgriffith/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhihu%2Fgriffith/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhihu%2Fgriffith/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zhihu","download_url":"https://codeload.github.com/zhihu/griffith/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248111979,"owners_count":21049578,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fmp4","hls","html5-video","html5-video-player","mp4","mp4box","react","react-components","video","zhihu","zhihu-video-player"],"created_at":"2024-08-02T09:01:57.619Z","updated_at":"2025-04-11T03:29:22.594Z","avatar_url":"https://github.com/zhihu.png","language":"TypeScript","readme":"\u003ch1 align=\"center\"\u003e\n  \u003cimg src=\"https://zhstatic.zhihu.com/cfe/griffith/griffith-banner.png\" height=\"200\" width=\"200\"/\u003e\n  \u003cp align=\"center\" style=\"font-size: 0.5em\"\u003eReact に基づいたビデオプレイヤー\u003c/p\u003e\n\u003c/h1\u003e\n\n[![License](https://img.shields.io/npm/l/griffith.svg)](https://github.com/zhihu/griffith/blob/master/LICENSE)\n[![npm package](https://img.shields.io/npm/v/griffith/latest.svg)](https://www.npmjs.com/package/griffith)\n![](https://badgen.net/npm/types/griffith)\n[![Coverage Status](https://coveralls.io/repos/github/zhihu/griffith/badge.svg?branch=master)](https://coveralls.io/github/zhihu/griffith?branch=master)\n![Code style](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/zhihu/griffith/blob/master/CONTRIBUTING.md)\n\n[English](./README.md) | [简体中文](./README-zh-Hans.md) | [日本語](./README-ja.md)\n\n# はじめに\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://zhstatic.zhihu.com/cfe/griffith/player.png\"/\u003e\n\u003c/p\u003e\n\n- **ストリーミング:** Griffith はストリーミングを簡単にします。ビデオフォーマットは mp4 や hls にかかわらず、Griffith は Media Source Extension (MSE) を使ってセグメントをロードすることができます。\n- **拡張性:** Griffith は React アプリにビデオ機能をサポートすることを簡単にします。React に基づいていない場合は、ブラウザで直接使用するための UMD（Universal Module Definition）もサポートされています。\n- **信頼性:** Griffith は Zhihu の Web およびモバイル Web で広く使用されています。\n\n## 使い方\n\n### React アプリ\n\n```bash\nyarn add griffith\n```\n\n```js\nimport Player from 'griffith'\n\nconst sources = {\n  hd: {\n    play_url: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018_hd.mp4',\n  },\n  sd: {\n    play_url: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018_sd.mp4',\n  },\n}\n\nrender(\u003cPlayer sources={sources} /\u003e)\n```\n\n[詳しく](./packages/griffith/README.md)\n\n**ノート: Griffith は SSR アプリを対応できません**\n\n### React を使用していない場合\n\n```html\n\u003cscript src=\"https://unpkg.com/griffith-standalone/dist/index.umd.min.js\"\u003e\u003c/script\u003e\n```\n\n```js\nconst sources = {\n  hd: {\n    play_url: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018_hd.mp4',\n  },\n  sd: {\n    play_url: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018_sd.mp4',\n  },\n}\n\nGriffith.createPlayer(element).render({sources})\n```\n\n[スタンドアロンモードの詳しい使い方](./packages/griffith-standalone/README.md)\n\n## プロジェクトの構造\n\nGriffith は [Yarn workspace](https://yarnpkg.com/lang/en/docs/workspaces/) と [Lerna](https://github.com/lerna/lerna) を使っている Monorepo です。\n\n### コーア\n\n- `packages/griffith`: コーアライブラリ\n\n### ユーティリティ\n\n- `packages/griffith-message`: クロスドメイン通信のヘルパー\n- `packages/griffith-utils`: 他のユーティリティ\n\n### プラグイン\n\n- `packages/griffith-mp4`: MP4 プラグインは [MediaSource API](https://developer.mozilla.org/en-US/docs/Web/API/MediaSource) を使っています。\n- `packages/griffith-hls`: [HLS](https://developer.apple.com/streaming/) プラグインは [hls.js](https://github.com/video-dev/hls.js) を使っています。\n\n### その他\n\n- `example`: サンプル例とデモ\n- `packages/griffith-standalone`: 全部のモジュールを含めての UMD バージョン、ブラウザーで直接に使用できます。\n\n## カスタムビルド\n\nwebpack のようなビルドツールはデフォルトで `griffith-mp4` と `griffith-hls` を含みます。ビルド時にエイリアスを挿入することでプラグインを削除できるため、パッケージサイズを縮小できます。\n\nwebpack を使いる場合, [resolve.alias](https://webpack.js.org/configuration/resolve/#resolvealias) が使えます。\n\n```javascript\n// webpack v5+\nmodule.exports = {\n  resolve: {\n    alias: {\n      'griffith-hls': false,\n      'griffith-mp4': false,\n    },\n  },\n}\n\n// webpack v4\nmodule.exports = {\n  resolve: {\n    alias: {\n      'griffith-hls': 'griffith/null',\n      'griffith-mp4': 'griffith/null',\n    },\n  },\n}\n```\n\nノート：`griffith-mp4` と `griffith-hls` がないと、ブラウザがネイティブにサポートしている限り、Griffith は MP4 と HLS メディアを再生できなくなります。\n\n## 貢献\n\n下記のとおり、Griffith への貢献はどんなものでも歓迎です。\n\n### 貢献ガイド\n\n[貢献ガイド](./CONTRIBUTING.md)を読んて、開発プロセスに参加します。\n\n### 貢献者一覧\n\n- [Cheng Wang](https://github.com/wangcheng678)\n- [Wuhao Liu](https://github.com/liuwuhaoo)\n- [Xiaoyan Li](https://github.com/lixiaoyan)\n- [Tianxiao Wang](https://github.com/xiaoyuhen)\n- [Xiaoshuang Bai (Designer)](https://www.behance.net/shawnpai)\n\n## ライセンス\n\nMIT\n","funding_links":[],"categories":["JavaScript","TypeScript","HarmonyOS"],"sub_categories":["Windows Manager"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhihu%2Fgriffith","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzhihu%2Fgriffith","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhihu%2Fgriffith/lists"}