西瓜播放器 HTML5 video video.js 播放器 HTML5播放器 mp4 hls hls.js flv flv.js dash dash.js 无缝切换

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],
    mp4Plugin: {
      headers: { // Custom request headers
        hshshshsh: 'rrrr'
      },
      withCredentials: true // request with credential
    }
    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

keydescriptionvaluedefault
withCredentialswhether cookies are to be ignored in the responsebooleanfalse
headersrequest headers configobject{}
videoOnlywhether to parse the video onlybooleanfalse