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

快速上手

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

安装

# 最新稳定版
$ npm install xgplayer

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

<script src="//cdn.jsdelivr.net/npm/xgplayer/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

兼容性

  • 点播兼容到 IE10+
  • 直播需要浏览器支持Media Source Extensions
  • 不同业务需求下兼容性要求可降低,详见具体插件页面插件