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

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

注意

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

1. 在页面提供占位 DOM

2. 实例化

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

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

注意

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

注意

[email protected]及以上播放器版本支持该功能。

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

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

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

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

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

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

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

npm包方式

CDN方式

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

npm包方式

CDN方式