西瓜播放器 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@1.1.3/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。

效果

Vue组件

为方便开发者使用,西瓜播放器已发布 Vue 封装组件,详见 xgplayer-vue

React组件

为方便开发者使用,西瓜播放器已发布 React 封装组件,详见 xgplayer-react

兼容性

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