A React-based web video player
A React-based Web video player
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 librarypackages/griffith-message
: Helpers for cross-window messagepackages/griffith-utils
: Utilitiespackages/griffith-mp4
: MP4 plugin powered by MediaSource API
packages/griffith-hls
: HLS plugin powered by hls.js
example
: example and demospackages/griffith-standalone
: A UMD build that can be used without React or WebpackBuild 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.
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