xgplayer-mp4
Mp4 playback plugin that saves traffic
Notice
Make sure mp4 file URL supports CORS request and HTTP header range
Install
npm i xgplayer-mp4@alpha --save
npm i xgplayer@next --save
Usage
NPM
import Player from 'xgplayer'
import Mp4Plugin from 'xgplayer-mp4'
import 'xgplayer/dist/index.min.css'
const player = new Player({
id: 'vs',
plugins: [Mp4Plugin],
mp4: {
reqOptions: {
headers: { // Custom request headers
hshshshsh: 'rrrr'
},
credentials: 'include'
}
},
url: '{cdn_url}',
});
CDN
<link rel="stylesheet" href="//unpkg.byted-static.com/xgplayer/{version}/dist/index.min.css"/>
<script src="//unpkg.byted-static.com/xgplayer/{version}/dist/index.min.js"></script>
<script src="//unpkg.byted-static.com/xgplayer-mp4/{version}/dist/index.min.js"></script>
<script>
new window.Player({
id: 'vs',
plugins: [window.Mp4Plugin.default],
url: { mp4_url },
});
</script>
config
| key | description | value | default |
|---|---|---|---|
| reqOptions.credentials | request credentials mode | RequestCredentials | undefined |
| reqOptions.headers | request headers config | object | {} |
| videoOnly | whether to parse the video only | boolean | false |