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

快速上手

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

安装

# 最新稳定版
$ npm install xgplayer

对于已有项目也可以通过 CDN 引入，代码如下：

<script src="//unpkg.byted-static.com/xgplayer/2.31.2/browser/index.js" type="text/javascript"></script>

注意

生产环境使用时请在CDN地址中锁定版本，CDN使用方法参考 jsdelivr。

使用

1. 在页面提供占位 DOM

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

2. 实例化

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

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

如果想完成直播的功能，播放器会自动识别直播或回放，更多内容请参考 示例 。

注意

播放器核心包和插件都使用 babel 编译到 ES5。

效果

自定义样式

注意

xgplayer@2.0.0及以上播放器版本支持该功能。

该功能仅限在npm包引入方式下使用；CDN引入方式下暂时无法使用该功能。

不同业务对播放器样式有不同的需求，通过以下3步可实现播放器样式的完全自定义开发。

  1. 命令行输入npx xgplayer eject [targetDir] [skinName]实现将播放器样式相关代码复制到指定相对路径[targetDir]下的.xgplayer/skin文件夹中，然后就可以任意修改实现自定义样式了。[skinName]为自定义样式名，可不输入。

  2. 业务代码中引入播放器时也把自定义样式的入口文件引入，例如：

import Player from 'xgplayer';
import './.xgplayer/skin/index.js';
  1. 复制出来的播放器样式源码中包含scss和svg类型文件，需要构建工具进行相应的支持，譬如webpack打包前需要安装配置sass-loader和raw-loader

轻量级使用

使用xgplayer会默认引入所有播控插件，导致包体积较大。xgplayer@2.19.0及以上播放器版本开始支持轻量级使用方式，可以从播放器播控插件库中按需选择加载相应的插件。

播控插件名含义
airplay播放镜像（投屏）
cssFullscreen样式全屏
danmu弹幕
definition清晰度
download下载
enter视频起播加载UI控件
error播放出错
flex底部控制栏中的弹性占位控件
fullscreen全屏
keyboard键盘快捷键
loading播放卡顿时展示的UI控件
localPreview预览本地视频
memoryPlay记忆播放
miniplayer迷你播放器
pip画中画
play播放/暂停（底部控制栏左侧）
playbackRate倍速
playNext播放下一集
poster封面图
progress进度条
reload重新载入
replay重播
rotate旋转
screenShot截图
textTrack外挂字幕
time播放时间
volume音量

目前提供以下2种轻量使用方式：

使用简易版本

使用简易版本，除了播放内核相关代码，还会自动引入 播放/暂停、全屏、进度条、封面图、播放时间、重播 这几个播控插件。 以下示例代码是在简易版本基础上，再引入使用音量和倍速插件。

npm包方式

import Player from 'xgplayer/dist/simple_player';
import volume from 'xgplayer/dist/controls/volume';
import playbackRate from 'xgplayer/dist/controls/playbackRate';

let player = new Player({
  id: 'vs',
  url: 'XXX.mp4',
  controlPlugins: [
    volume,
    playbackRate
  ],
  playbackRate: [0.5, 0.75, 1, 1.5, 2] //传入倍速可选数组
});

CDN方式

<script src="//unpkg.byted-static.com/xgplayer@2.19.0/browser/simple_player.js" type="text/javascript"></script>
<script src="//unpkg.byted-static.com/xgplayer@2.19.0/browser/controls/volume.js" type="text/javascript"></script>
<script src="//unpkg.byted-static.com/xgplayer@2.19.0/browser/controls/playbackRate.js" type="text/javascript"></script>
<script type="text/javascript">
  let player = new window.Player({
    id: 'vs',
    url: 'XXX.mp4',
    controlPlugins: [
      window.PlayerControls.volume,
      window.PlayerControls.playbackRate
    ],
    playbackRate: [0.5, 0.75, 1, 1.5, 2] //传入倍速可选数组
  });
</script>

使用播放内核

使用播放内核，默认只引入播放内核相关代码。 以下示例代码是在播放内核基础上，再引入使用 播放/暂停、全屏、进度条、音量和画中画插件。

npm包方式

import Player from 'xgplayer/dist/core_player';
import play from 'xgplayer/dist/controls/play';
import fullscreen from 'xgplayer/dist/controls/fullscreen';
import progress from 'xgplayer/dist/controls/progress';
import volume from 'xgplayer/dist/controls/volume';
import pip from 'xgplayer/dist/controls/pip';
import flex from 'xgplayer/dist/controls/flex';

let player = new Player({
  id: 'vs',
  url: 'XXX.mp4',
  controlPlugins: [
    play,
    fullscreen,
    progress,
    volume,
    pip,
    flex
  ],
  pip: true //打开画中画功能
});

CDN方式

<script src="//unpkg.byted-static.com/xgplayer@2.19.0/browser/core_player.js" type="text/javascript"></script>
<script src="//unpkg.byted-static.com/xgplayer@2.19.0/browser/controls/play.js" type="text/javascript"></script>
<script src="//unpkg.byted-static.com/xgplayer@2.19.0/browser/controls/fullscreen.js" type="text/javascript"></script>
<script src="//unpkg.byted-static.com/xgplayer@2.19.0/browser/controls/progress.js" type="text/javascript"></script>
<script src="//unpkg.byted-static.com/xgplayer@2.19.0/browser/controls/volume.js" type="text/javascript"></script>
<script src="//unpkg.byted-static.com/xgplayer@2.19.0/browser/controls/pip.js" type="text/javascript"></script>
<script src="//unpkg.byted-static.com/xgplayer@2.19.0/browser/controls/flex.js" type="text/javascript"></script>
<script type="text/javascript">
  let player = new window.Player({
    id: 'vs',
    url: 'XXX.mp4',
    controlPlugins: [
      window.PlayerControls.play,
      window.PlayerControls.fullscreen,
      window.PlayerControls.progress,
      window.PlayerControls.volume,
      window.PlayerControls.pip,
      window.PlayerControls.flex
    ],
    pip: true //打开画中画功能
  });
</script>

兼容性

  • PC Web端支持直接播放mp4视频，播放HLS、FLV、MPEG-DASH需要浏览器支持Media Source Extensions
  • iOS系统Web场景支持直接播放mp4和HLS，不支持播放FLV、MPEG-DASH，mp4插件、flv插件、hls插件在ios系统上均不支持
  • 安卓系统Web场景支持直接播放mp4和HLS，播放FLV、MPEG-DASH需要浏览器支持Media Source Extensions