zhihu / griffith
- вторник, 26 марта 2019 г. в 00:17:37
JavaScript
A React-based web video player
A React-based web video player
English | 简体中文
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} />)
Note: Griffith is not supporting SSR 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
Griffith is a monorepo and uses Yarn workspace and Lerna.
packages/griffith
: The core lirarypackages/griffith-message
: Helpers for cross-window messagepackages/griffith-utils
: Utilitiespackages/griffith-mp4
: MP4 plugin powered by MediaSource APIpackages/griffith-hls
: HLS plugin powered by hls.jsexample
: example and demospackages/griffith-standalone
: A UMD build that can be used without React or WebpackBuild tools like webpack include griffith-mp4
and packages/griffith-hls
by default. You can make your bundle smaller by excluding a plugin with build-time globals.
If you use webpack, do so with DefinePlugin:
const {DefinePlugin} = require('webpack')
module.exports = {
plugins: [
new DefinePlugin({
__WITHOUT_HLSJS__: JSON.stringify(true), // exludes griffith-hls
__WITHOUT_MP4__: JSON.stringify(true), // exludes griffith-mp4
}),
],
}
Note that without griffith-mp4
/ griffith-hls
Griffith can no longer play MP4 / HLS media unless the browser supports it natively.
Read below to learn how you can take part in improving Griffith.
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.
MIT