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

快速上手

只需三步：安装、DOM占位、实例化即可完成播放器的使用。

安装

$ npm install xgplayer

基本使用

1. 在页面提供占位 DOM

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

2. 实例化

使用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%',
});

使用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>

注意

链接地址中的[VERSION]为实际使用的版本号

两步即可完成最简单的视频播放（mp4点播），播放器提供了较丰富的配置选项，如自动播放、贴图、音量控制、内置控件关闭等等，更多配置可参考 配置。

插件扩展

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]
})

更多配置可参考 插件。

Preset扩展

简单地理解，Preset就是一组插件的集合 插件和播放器是可以完全解耦的，播放器内所有插件都可通过es目录单独引用，而Preset机制则允许我们对插件进行任意组合，详细使用方式请看Preset详解

播放器内置了点播、直播、移动端三个preset，其中点播是默认使用的preset，如果想使用直播Preset，可以这样做

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]
})

如果想保留点播Preset，并在此基础上开发了自己的Preset，那么可以来合并使用：

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] // 传入'default'以保留默认preset
})

相反，如果不传入'default'字符串，将不启用默认preset内的所有插件

轻量级引用

V3的所有插件都是可插拔的，我们提供了默认的插件集合引用，如果你觉得使用默认导出对象有插件冗余，想要自己组装，实现方式如下(仅npm方式支持):

import { SimplePlayer } from 'xgplayer';

// 引入es目录下的插件
import Start from 'xgplayer/es/plugins/start'
import PC from 'xgplayer/es/plugins/pc'
import Mobile from 'xgplayer/es/plugins/mobile'
import Progress from 'xgplayer/es/plugins/progress'
import Time from 'xgplayer/es/plugins/time'
import Play from 'xgplayer/es/plugins/play'
import Error from 'xgplayer/es/plugins/error'

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

let player = new SimplePlayer({
  id: 'mse',
  url: '//abc.com/**/*.mp4',
  height: '100%',
  width: '100%',
  plugins: [Start,PC,Mobile, Progress, Play, Time, Error] // 传入需要组装的插件
});

具体可使用的内置插件，以及插件的功能详细说明，请参考内置插件

注意: SimplePlayer默认值集成了英文，因此如果需要显示中文文本，还需要引入一下中文，如下：

import { I18N } from 'xgplayer'
import ZH from 'xgplayer/es/lang/zh-cn'

// 启用中文
I18N.use(ZH)

更多国际化语言的使用和扩展请看国际化

灵活的Icon替换

当我们需要根据业务场景对Icon做替换时，我们可以通过配置项进行icon svg的替换，更多配置请看内置插件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
  }
})

兼容性

  • 点播兼容到 IE11+
  • 直播需要浏览器支持Media Source Extensions
  • PC Web端支持直接播放mp4视频，播放HLS、FLV、MPEG-DASH需要浏览器支持Media Source Extensions
  • iOS Web端支持直接播放mp4和HLS，不支持播放FLV、MPEG-DASH
  • Android Web端支持直接播放mp4和HLS，播放FLV、MPEG-DASH需要浏览器支持Media Source Extensions
  • 不同业务需求下兼容性要求可能降低，详见具体插件页面插件

新特性 →