# Getting Started

Three steps: Installation, DOM placeholder for player container, and player instantiation.

# Installation

$ npm install xgplayer

# Basic Usage

1. Provide a dom for player container

<div id="mse"></div>

2. Instantiation

Using NPM

import Player from 'xgplayer';
import 'xgplayer/dist/index.min.css';

let player = new Player({
  id: 'mse',
  url: '//abc.com/**/*.mp4',
  height: '100%',
  width: '100%',
});

Using 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>
var player = new window.Player({
  id: 'mse',
  url: '//abc.com/**/*.mp4',
  height: '100%',
  width: '100%',
})
</script>

The player can play a mp4 source in two steps. It provides a lot of configuration options, such as autoplay, stickers, volume control, built-in ui controls, etc. For more configuration, please refer to config。

# Plugins

import MyPlugin from 'my-xgplayer-plugin'
import Player from 'xgplayer'

const player = new Player({
  id: 'vs',
  url: './hjh1.mp4',
  height: '100%',
  width: '100%',
  plugins: [MyPlugin]
})

For more, you can see plugins。

# Presets

To understand simply, Preset is a collection of plugins.

The plugin and the player can be completely decoupled. All plugins in the player can be individually referenced through the es directory, and the Preset mechanism allows us to combine plugins at will. For detailed usage, please refer to Preset

The player has built in three presets: vod、live and mobile. Among them, vod is the default preset. If you want to use live preset, you can do this

import Player from 'xgplayer'
import 'xgplayer/dist/index.min.css'
import LivePreset from 'xgplayer/es/presets/live'

const player = new Player({
  id: 'vs',
  url: './hjh1.mp4',
  height: '100%',
  width: '100%',
  presets: [LivePreset]
})

If you want to keep the vod Preset and develop your own Preset on this basis, you can combine it:

import Player from 'xgplayer'
import 'xgplayer/dist/index.min.css'
import MyPreset from './my-preset'

const player = new Player({
  id: 'vs',
  url: './hjh1.mp4',
  height: '100%',
  width: '100%',
  presets: ['default', MyPreset] // Keep the 'default' preset at first
})

Conversely, if you do not pass in the 'default' string, all plugins in the default preset will not be enabled

# Flexible Icon

When we need to replace Icon, we can replace icon svg through configuration items. For more configurations, see plugins icons

import MyPlayIcon from '../icons/my-play-icon.svg';
import MyPauseIcon from '../icons/my-pause-icon.svg';
import Player from 'xgplayer'

const player = new Player({
  el:document.querySelector('#mse'),
  icons: {
    play: MyPlayIcon,
    pause: MyPauseIcon
  }
})

# Compatibility

• VOD IE10+
• Live need Media Source Extensions
• The PC Browsers supports playing mp4 video directly, and the browser need Media Source Extensions for playing HLS, FLV and MPEG-DASH
• The iOS Browsers supports playing mp4 and HLS directly, but FLV and MPEG-DASH not available
• Android Browsers supports playing mp4 and HLS directly, FLV、MPEG-DASH need Media Source Extensions
• Compatibility requirements may be reduced under different business requirements, see specific plugins page for more details