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

Plugins

Xigua Player argues that all designs are plugins, which can be as small as a play button, or as large as a LIVE function support. If you want to custom the player for finishing your business better, you should understand the plugins mechanism. The player has many inner plugins, such as error report, loading, replay and so on. You can develop yourself with closing the inner plugin for custom effects.

By default the plugin can launch itself. We suggest developping with inheritting from the player class if you need the custom plugin withnot self-start or the default processing mechanism of the web video player.

Inner plugins

play

Play/pause button of the controls. Recommend no change. Source

time

Current layingtime display component. Can be customized. Source

volume

Volume control component of the controls. Recommend no change.Source

definition

Definition switching component of the controls. Recommend no change. Event-driven satisfies any kind of implementation. Source

fullscreen

Fullscreen switching component of the controls. Recommend no change.Source

poster

The player mapping. Recommend no change.Source

progress

The player progress bar. Recommend no change.Source

loading

The player loading hint. Recommend no change.Source

error

The player error hint. Recommend no change.Source

replay

The player operation interface of replay. Can be customized.Source

playbackRate

Times the speed of playback. Recommend no change.Source

makeBullet

The bullet subtitle of xglayer. Recommend no change.Source

rotate

The player rotate component. Can be customized. Source

i18n

The player can support multiple languages. Recommend no change.通过配置项增加其他语言。Source

pc

The player PC interact defination. Include the loading animation.Source

mobile

The player mobile interact defination. Include the loading animation.Source

Custom plugin

  1. Plugins development
// pluginName.js
import Player from 'xgplayer';

let pluginName=function(player){
  // plugin logic
}

Player.install('pluginName',pluginName);
  1. Plugins using
import Player from 'xgplayer';

let player = new Player({
  id: 'xg',
  url: '//abc.com/**/*.mp4'
})

Functional Plugins List

The player provides some plugins with common functions, such as HLS LIVE, FLV LIVE(VOD), MP4 stream VOD and MPEG-DASH VOD.

xgplayer-mp4

The parser for the common MP4 videos, which can achieve the control of the buffering and preload, the accurate seek loading, seamless switch and saving bandwidth(See Definition switching config). The use of the plugin is shown below.

import Player from 'xgplayer';
import 'xgplayer-mp4';

let player = new Player({
  id: 'xg',
  url: '//abc.com/**/*.mp4',
  preloadTime: 15 // 默认预加载 15 秒
})

Fiddle

Note

Using this plug-in requires configuring CORS. Since video itself supports cross-domain,we're loading video with Javascript which can trigger CORS,now you need config CORS on server.

This plugin can be executed automatically. When the browser does not support, the player will degrade automatically.

xgplayer-hls

This plugin achieves the functions of VOD and LIVE in HLS protocol without depending on any third-party library. Its advantages include clear coding structure, lighter than hls.js and official maintain. The videos which do not comport with HLS protocol can not be played normally.

import Player from 'xgplayer';
import 'xgplayer-hls';

let player = new Player({
  id: 'xg',
  url: '//abc.com/**/*.m3u8'
})

Fiddle

xgplayer-hls.js

This plugin achieves the functions of VOD and LIVE in HLS protocol with packaging hls.js.

import 'xgplayer';
import hlsjsPlayer from 'xgplayer-hls.js';

let player = new hlsjsPlayer({
  id: 'xg',
  url: '//abc.com/**/*.m3u8'
})

Fiddle

xgplayer-flv

This plugin achieves the functions of VOD and LIVE in FLV protocol without depending on any third-party library. Its advantages include clear coding structure, lighter than hls.js and official maintain.

import 'xgplayer';
import FlvPlayer from 'xgplayer-flv';

let player = new FlvPlayer({
  id: 'xg',
  url: './xgplayer-demo.flv',
  poster: './poster.png',
  isLive: false,
  preloadTime: 30,
  minCachedTime: 5,
  cors: true
})

Fiddle

In addition to Configuration, there are some optional special configuration items for the xgplayer-flv plugin.

ItemMeaningdefault value
isLiveWhether video source is LIVE or not.false
preloadTimeThe preload time for video.(seconds)30
minCachedTimeWhen starting to request the new segment apart from end of the cached segment.(seconds)5
corswhether the request cross domain or not.true

xgplayer-flv.js

This plugin achieves the functions of VOD and LIVE in FLV protocol with packaging flv.js.

import 'xgplayer';
import FlvJsPlayer from 'xgplayer-flv.js';

let player = new FlvJsPlayer({
  id: 'xg',
  url: '//abc.com/**/*.flv'
})

Fiddle

In addition to Configuration, there are some optional special configuration items for the xgplayer-flv.js plugin. See flv.js API.

Note

The video server should provide range function when asking for cross-domain video source with xgplayer-flv or xgplayer-flv.js plugin.

xgplayer-logger

xgplayer provides data config interface for several site statistics methods(cnzz, baidu, gtag, raven). You can choose one and log the required data when the xgplayer event is triggered.

import Player from 'xgplayer';
import 'xgplayer-logger';

let player = new Player({
  id: 'xg',
  url: './xgplayer-demo.mp4',
  loggers: [{
   type: 'cnzz', // 'cnzz' | 'baidu' | 'gtag' | 'raven'
   options: { //The following is the default value, can be overridden by yours.
     category: 'video',
     actions: { // override the required events of xgplayer
         error: 'error',
         complete: 'complete',
         play: 'play',
         pause: 'pause',
         end: 'end',
         ready: 'ready',
         seek: 'seek',
         unload: 'unload'
     },
     label: player.config.url, // the value of label
     value: { // reported data
         error: (player) => player.currentTime,
         complete: (player) => player.currentTime,
         play: (player) => player.currentTime,
         pause: (player) => player.currentTime,
         end: (player) => player.currentTime,
         unload: (player) => player.currentTime,
         seek: (player) => player.currentTime,
         ready: (player) => player.currentTime
     }
   }
 }]
})

Note

The core packages and plugins are compiled with babel to ES5.