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

Configuration

xgplayer provide configuration options when instantiated, and you can configure them selectively according to your own requirements. The player container and the video resource address are the content must provide when using the player.

Required Configuration

Selector

During instantiation, you should provide the DOM container of the player and the video will be shown in the DOM. The size of the player will be consistent with the DOM automatically.

new Player({
  id:'mse'
})

The player container id can also be replaced by the DOM instantiation.

new Player({
  el:document.querySelector('#mse'),
})

Video Source

The player supports single or multiple video sources. We suggest using multiple video sources, and the second video source will be started automatically when the first one going wrong.

  1. Single video source
new Player({
  el:document.querySelector('#mse'),
  url: '//abc.com/**/*.mp4'
});
  1. Multiple video sources
new Player({
  el:document.querySelector('#mse'),
  url: [{src:'/mp4/',type:"video/mp4"},{src:'/mp5/',type:'video/mp4'}]
});

Note

The selector and video source are the indispensable configuration options.

Optional Configuration

Size

You can set the size for the player.

new Player({
  el:document.querySelector('#mse'),
  url: [{src:'/mp4/',type:"video/mp4"},{src:'/mp5/',type:'video/mp4'}],
  width: 600,
  height: 337.5
});
  • option: width, height
  • default value: 600, 337.5

Volume

You can set the initial volume level for the player.

new Player({
  el:document.querySelector('#mse'),
  url: [{src:'/mp4/',type:"video/mp4"},{src:'/mp5/',type:'video/mp4'}]
  volume: 0.6
});
  • option: volume
  • default value: 0.6
  • reference: 0~1

Autoplay

Most browser manufacturers disallow autoplay, and you can set videos to autoplay with this option when needs.

new Player({
  el:document.querySelector('#mse'),
  url: [{src:'/mp4/',type:"video/mp4"},{src:'/mp5/',type:'video/mp4'}]
  autoplay: true
});
  • option: autoplay
  • default value: false
  • reference: true | false

Note

Most browsers allow autoplay with muted. In order to ensure autoplay a success, xgplayer will ignore the volume config and autoplay with muted when you config 'autoplay: true'.

Note

In some phones the autoplay are invalid.

Poster

The poster is recommended when you want to preload the video at startup while giving the player a custom look and feel.

new Player({
  el:document.querySelector('#mse'),
  url: [{src:'/mp4/',type:"video/mp4"},{src:'/mp5/',type:'video/mp4'}]
  poster: '//abc.com/**/*.png'
});
  • option: poster
  • default value: ''
  • reference: 'https://i.ytimg.com/vi/lK2ZbbQSHww/hqdefault.jpg'

PlaybackRate

You can set the playback rate for the player.

new Player({
  el:document.querySelector('#mse'),
  url: [{src:'/mp4/',type:"video/mp4"},{src:'/mp5/',type:'video/mp4'}],
  playbackRate: [0.5, 0.75, 1, 1.5, 2],
});
  • option: playbackRate
  • default value: ''
  • reference: [0.5, 0.75, 1, 1.5, 2]

VideoRotate

When you click the rotate button, the video will rotate 90 degrees clockwise.

let player = new Player({
    el:document.querySelector('#mse'),
 	url: 'video_url',
    rotate: true //set rotate button diplay
});
// The rotate event is fired when rotated, and the angle has four values of 90, 180, 270, 0.
player.on('rotate',function(deg) {
    console.log(deg);
})
  • option: rotate
  • default value: false
  • reference: true

Thumbnail

When hovering on the progress-bar the preview picture of this point will appear above the bar. For the thumbnail source the server should provide the sprite pictures which consist of several small preview pictures.

new Player({
  el:document.querySelector('#mse'),
  url: [{src:'/mp4/',type:"video/mp4"},{src:'/mp5/',type:'video/mp4'}],
  thumbnail: {
      pic_num: 44,
      width: 160,
      height: 90,
      col: 10,
      row: 10,
      urls: ['./xgplayer-demo-thumbnail-1.jpg','./xgplayer-demo-thumbnail-2.jpg'],
  },
});
ItemMeaning
pic_numThe number of this video's small preview pictures
widthThe width of the small preview picture
heightThe height of the small preview picture
colThe small picture number in every column of the sprite picture
rowThe small picture number in every row of the sprite picture
urlsThe source array of the sprite pictures

Bullet subtitle

The pop-up critical captions of the playing video. Unlike the other video players, xgplayer can show the bullet subtitles without overlap and impact.

new Player({
  el:document.querySelector('#mse'),
  url: [{src:'/mp4/',type:"video/mp4"},{src:'/mp5/',type:'video/mp4'}],
  bullet: {
      switch: 'on', //switch on: 'on', switch off: 'off'
      url: './danmu.json',
      method: 'get'
  },
});
ItemMeaning
switchWhether switch on the bullet subtitle
urlThe bullet source
methodThe method for acquiring the bullet data

An example of the bullet data is shown below. The danmaku_id means the unique id of each bullet. The text means the bullet context. The duration means total times of the bullet moving in the shown area of xgplayer.(seconds) The text_color means the font color. The text_scale means the font size. The offset_time means the moment of the bullet appearance.(miliseconds)

{
  "data": [
     {"danmaku_id": "1", "text": "这是弹幕", "duration": 12, "text_color": "0x00f", "text_scale": 1,"offset_time": 1000},
     {"danmaku_id": "2", "text": "1234567890", "duration": 15, "text_color": "0xf00", "text_scale": 2,"offset_time": 2000},
     {"danmaku_id": "3", "text": "这是弹幕", "duration": 8, "text_color": "0x0f0", "text_scale": 1,"offset_time": 3000},
     {"danmaku_id": "4", "text": "这是弹幕", "duration": 7, "text_color": "0x00f", "text_scale": 3,"offset_time": 4000},
     {"danmaku_id": "5", "text": "1234567890", "duration": 10, "text_color": "0x00f", "text_scale": 1,"offset_time": 5000},
     {"danmaku_id": "6", "text": "西瓜播放器", "duration": 9, "text_color": "0x00f", "text_scale": 1,"offset_time": 6000},
     {"danmaku_id": "7", "text": "这是弹幕", "duration": 22, "text_color": "0x00f", "text_scale": 1,"offset_time": 7000},
     {"danmaku_id": "8", "text": "1234567890", "duration": 10, "text_color": "0x00f", "text_scale": 2,"offset_time": 8000},
     {"danmaku_id": "9", "text": "西瓜播放器", "duration": 20, "text_color": "0xf00", "text_scale": 1,"offset_time": 9000},
     {"danmaku_id": "10", "text": "这是弹幕", "duration": 12, "text_color": "0x0f0", "text_scale": 1,"offset_time": 10000}
  ]
}

Controls style

xgplayer will provide some interfaces for helping developers replace the controls style. Now replacing the svg path of center buttons(Play, Pause, Replay) and changing the logo page(the logo, backgound and loading animation) which shown in loading the video are available.

new Player({
  el:document.querySelector('#mse'),
  url: '/mp4/',
  centerBtn: {
    pausePath: 'M576,363L810,512L576,661zM342,214L576,363L576,661L342,810z',
    playPath: 'M598,214h170v596h-170v-596zM256 810v-596h170v596h-170z',
    replayPath: 'M8.22708362,13.8757234 L11.2677371,12.6472196 C11.7798067,12.4403301 12.3626381,12.6877273 12.5695276,13.1997969 L12.9441342,14.1269807 C13.1510237,14.6390502 12.9036264,15.2218816 12.3915569,15.4287712 L6.8284538,17.6764107 L5.90126995,18.0510173 C5.38920044,18.2579068 4.80636901,18.0105096 4.5994795,17.49844 L1.97723335,11.0081531 C1.77034384,10.4960836 2.0177411,9.91325213 2.52981061,9.70636262 L3.45699446,9.33175602 C3.96906396,9.12486652 4.5518954,9.37226378 4.75878491,9.88433329 L5.67885163,12.1615783 C7.99551726,6.6766934 13.3983951,3 19.5,3 C27.7842712,3 34.5,9.71572875 34.5,18 C34.5,26.2842712 27.7842712,33 19.5,33 C15.4573596,33 11.6658607,31.3912946 8.87004692,28.5831991 C8.28554571,27.9961303 8.28762719,27.0463851 8.87469603,26.4618839 C9.46176488,25.8773827 10.4115101,25.8794641 10.9960113,26.466533 C13.2344327,28.7147875 16.263503,30 19.5,30 C26.127417,30 31.5,24.627417 31.5,18 C31.5,11.372583 26.127417,6 19.5,6 C14.4183772,6 9.94214483,9.18783811 8.22708362,13.8757234 Z'
  },
  enterLogo:{
    url: '/logo.png',
    width: 231,
    height: 42
  },
  enterBg:{
    color: 'rgba(0,0,0,0.87)'
  },
  enterTips:{
    background: 'linear-gradient(to right, rgba(0,0,0,0.87), #3D96FD, rgba(86,195,248), #3D96FD, rgba(0,0,0,0.87))'
  }
});

TextTrack

Xgplayer supports textTracks with WebVTT format files, and you can switch, close or open the textTrack in playing video. WebVTT format see WebVTT MDN.

new Player({
  el:document.querySelector('#mse'),
  url: [{src:'/mp4/',type:"video/mp4"},{src:'/mp5/',type:'video/mp4'}],
  textTrack: [
    {
      src: "./textTrack-1.vtt",
      kind: "subtitles",
      label: "textTrack1",
      srclang: "zh",
      default: true
    },
    {
      src: "./textTrack-2.vtt",
      kind: "subtitles",
      label: "textTrack2",
      srclang: "en",
      default: false
    }
  ],
  textTrackStyle: {
    "background-color": "#ff0",
    "color": "#000",
    "font-size": "26px",
  }
});
  • option: textTrack
  • meaning: textTracks info array
  • default: []
Paramsenceoptional value
srctextTrack file URL, essential
kindtextTrack type, optionalSee
labeltextTrack label, essential
srclangtextTrack text language, optionalzh, en...
defaultdefault textTracktrue, false
  • option: textTrackStyle
  • meaning: textTrack CSS style config
  • default: {}

Picture-in-Picture

Picture-in-Picture supports that users watch videos with the small window when they want to read the other content of the page. And they can drag the small window to change the fix position in the page.

new Player({
  el:document.querySelector('#mse'),
  url: [{src:'/mp4/',type:"video/mp4"},{src:'/mp5/',type:'video/mp4'}],
  pip: true
});
  • option: pip
  • default value: false
  • reference: true | false

Turn off built-in controls

The player optimizes and assembles the basic functions of the native video. If you do not want to use the built-in controls, you can turn off the configuration with this option and develop similar plugins for replacement.

new Player({
  el:document.querySelector('#mse'),
  url: [{src:'/mp4/',type:"video/mp4"},{src:'/mp5/',type:'video/mp4'}]
  ignores: ['replay']
});
  • option: ignores
  • default value: []
  • reference: ['time', 'definition', 'error', 'fullscreen', 'i18n', 'loading', 'mobile', 'pc', 'play', 'poster', 'progress', 'replay', 'start', 'volume']
Paramsence
timecurrent layingtime
definitiondefinition switching
errorerror notification
fullscreenfullscreen switching
i18nmultilingual switching
loadingloading instruction
mobilemobile phone interaction
pcpc video interaction
playplay control bar playback, pause button
posterposter plugin
progressvideo progress bar
replayreplay interactions and prompts
startinitialize play button
volumevolume control

Turn off controls

The player controls are composed of play/pause, seek, volume, fullscreen and so on. You can close all these with this option.

new Player({
  el:document.querySelector('#mse'),
  url: [{src:'/mp4/',type:"video/mp4"},{src:'/mp5/',type:'video/mp4'}]
  controls: false
});
  • option: controls
  • default value: true
  • reference: true|false

controls list

You can close part of the controls with this option.

new Player({
  el:document.querySelector('#mse'),
  url: [{src:'/mp4/',type:"video/mp4"},{src:'/mp5/',type:'video/mp4'}]
  controlsList: ['nodownload']
});
  • option: controlsList
  • default value: ['nodownload'],
  • reference: ['nodownload','nofullscreen','noremoteplayback']

Note

Only valid for native video, use ignores option for custom UI.

Airplay

With the airplay option you can transfer the videos in the IOS device to the device which supports airplay for playing. Check Reference for more information.

new Player({
  el:document.querySelector('#mse'),
  url: [{src:'/mp4/',type:"video/mp4"},{src:'/mp5/',type:'video/mp4'}]
  airplay: false
});
  • option: airplay
  • default value: ''
  • reference: true | false

Plugin switch configuration

Through the configuration of the player, the plugin can be dynamically opened and closed as long as the function plugin reads the configuration.

new Player({
  el:document.querySelector('#mse'),
  url: [{src:'/mp4/',type:"video/mp4"},{src:'/mp5/',type:'video/mp4'}]
  pluginRule: ()=>{return true}
});
  • option: pluginRule
  • default value: ''
  • reference: function(){return true|false}

For example: we want to do traffic test with the MP4 plugin. Half of the users open the function, and half of the users do not open. You can achieve through the following code:

new Player({
  pluginRule:function(){return Math.random()>0.5}
})

multilingual

<html lang='zh-cn'></html>

The player will first get the lang configuration of html. If there is no configuration to directly read navigator.language, then the default is to use the great national language zh-cn. The player has both built-in Chinese and English languages, if not enough,it can be customized as well. Methods as below:

  1. Define language
// language.js
export default ({
  'jp':{
    HAVE_NOTHING: 'There is no information on whether audio/video is ready',
    HAVE_METADATA: 'audio/video metadata is ready ',
    HAVE_CURRENT_DATA: 'Data about the current play location is available, but there is not enough data to play the next frame/millisecond',
    HAVE_FUTURE_DATA: 'Current and at least one frame of data is available',
    HAVE_ENOUGH_DATA: 'The available data is sufficient to start playing',
    NETWORK_EMPTY: 'Audio/video has not been initialized',
    NETWORK_IDLE: 'Audio/video is active and has been selected for resources, but no network is used',
    NETWORK_LOADING: 'The browser is downloading the data',
    NETWORK_NO_SOURCE: 'No audio/video source was found',
    MEDIA_ERR_ABORTED: 'The fetch process is aborted by the user',
    MEDIA_ERR_NETWORK: 'An error occurred while downloading',
    MEDIA_ERR_DECODE: 'An error occurred while decoding',
    MEDIA_ERR_SRC_NOT_SUPPORTED: 'Audio/video is not supported',
    REPLAY: 'Replay',
    ERROR: 'Error,please click to refresh',
  },
  'en':{
    HAVE_NOTHING: 'There is no information on whether audio/video is ready',
    HAVE_METADATA: 'audio/video metadata is ready ',
    HAVE_CURRENT_DATA: 'Data about the current play location is available, but there is not enough data to play the next frame/millisecond',
    HAVE_FUTURE_DATA: 'Current and at least one frame of data is available',
    HAVE_ENOUGH_DATA: 'The available data is sufficient to start playing',
    NETWORK_EMPTY: 'Audio/video has not been initialized',
    NETWORK_IDLE: 'Audio/video is active and has been selected for resources, but no network is used',
    NETWORK_LOADING: 'The browser is downloading the data',
    NETWORK_NO_SOURCE: 'No audio/video source was found',
    MEDIA_ERR_ABORTED: 'The fetch process is aborted by the user',
    MEDIA_ERR_NETWORK: 'An error occurred while downloading',
    MEDIA_ERR_DECODE: 'An error occurred while decoding',
    MEDIA_ERR_SRC_NOT_SUPPORTED: 'Audio/video is not supported',
    REPLAY: 'Replay',
    ERROR: 'Error,please click to refresh',
  }
})
  1. Import language
import Player from 'xgplayer';
import Language from './language';

let player=new Player({
  id:'mse',
  url:'/mp4/'
});

player.lang=Language;

Note

Note: If there are multiple languages, it's good to use a loop to assign to player.lang. Each assignment will not be covered but increased.

Definition switching configuration

Although the definition plugin configuration is a built-in control, it is quite special somewhere. It does not use the traditional configuration item but uses an event-driven approach. Because our definition design is more abstract, it not only supports explicit video address lists, but also supports virtual address lists, so it is event-driven.

Example

let player = new Player({
  el:document.querySelector('#mse'),
  url: [{src:'url1',type:"video/mp4"},{src:'url2',type:'video/mp4'}]
});

player.emit('resourceReady', [{name: '720P', url: 'url1'}, {name: '1080P', url: 'url2'}]);

Note

If you do not want to use the definition switch function, do not activate the resourceReady event; if there is only one address in the video address list, the definition switch control will automatically turn off.

whitelist

The video on the mobile phone varies in performance. The custom UI will have unexpected situations. For the sake of security, the player will turn off the custom UI function on the mobile phone. The developer can open this function through the white list. The whitelist is an array. Each value of the array can be a string, a regular expression, or a function (arrow function). Strings and regular expressions are all judged by the navigator.userAgent. as follows:

new Player({
  el:document.querySelector('#mse'),
  url: [{src:'/mp4/',type:"video/mp4"},{src:'/mp5/',type:'video/mp4'}],
  whitelist: ['iPhone OS 9'],
  // whitelist: [(ua)=>{ return /iPhone OS 9/gi.test(ua); }],
  // whitelist: [/iPhone OS 9/gi]
});
  • option: whitelist
  • default value: []
  • reference: [String, RegEx, Function]

Inline mode

This option opens the inline mode of ios and WeChat on the mobile phone, option:playsinline. Check Reference for more information.

new Player({
  el:document.querySelector('#mse'),
  url: [{src:'/mp4/',type:"video/mp4"},{src:'/mp5/',type:'video/mp4'}]
  playsinline: false
});
  • option: playsinline
  • default value: false
  • reference: true | false

Mobile Debugging

To use this feature, please install weinreip on the developer computer,command: npm -g install weinre。When debugging the phone, configure the debug option at first, and then start the service on the command line. The specific command will prompt in page. More about weinre knowledge Reference

new Player({
  el:document.querySelector('#mse'),
  url: [{src:'/mp4/',type:"video/mp4"},{src:'/mp5/',type:'video/mp4'}]
  debug: {
    host:'10.2.106.238',
    port:9090
  }
});
  • option: debug
  • default value: {host:'127.0.0.1',port:9090}
  • reference: {host:${developerComputer Ip},port:9090}

WeChat playing in the same layer

same layer playing. Check Reference for more information.

new Player({
  el:document.querySelector('#mse'),
  url: [{src:'/mp4/',type:"video/mp4"},{src:'/mp5/',type:'video/mp4'}]
  'x5-video-player-type': 'h5'
});
  • option: x5-video-player-type
  • default value: ''
  • reference: 'h5'

WeChat full screen playing

Check Reference for more information.

new Player({
  el:document.querySelector('#mse'),
  url: [{src:'/mp4/',type:"video/mp4"},{src:'/mp5/',type:'video/mp4'}]
  'x5-video-player-fullscreen': false
});
  • option: x5-video-player-fullscreen
  • default value: ''
  • reference: true | false

WeChat horizontal and vertical screen control

Check Reference for more information.

new Player({
  el:document.querySelector('#mse'),
  url: [{src:'/mp4/',type:"video/mp4"},{src:'/mp5/',type:'video/mp4'}]
  'x5-video-orientation': 'portraint'
});
  • option: x5-video-orientation

  • default value: ''

  • reference: 'landscape' | 'portraint'

    • 'landscape' horizontal
    • 'portraint' vertical

Custom configuration

If you customize the plugin and want to pass in the configuration parameters when the player is initialized, you can define it directly.

new Player({
  el:document.querySelector('#mse'),
  url: [{src:'/mp4/',type:"video/mp4"},{src:'/mp5/',type:'video/mp4'}]
  customConfig:{
    //
  }
});

Inside the plug-in, it can get the configuration through player.config.[custom key]. Where player is the current player instance that all the plug-in definition function has.