什么是西瓜播放器

xgplayer是由字节跳动开源的一个网络视频播放器库（现在也支持音乐播放）。它基于一切都被组件化的原则设计了一个单独的，可分离的UI组件。更重要的是，它不仅在UI层上很灵活，而且在功能上也大胆：它摆脱了视频加载，缓冲和对视频依赖性的格式支持。特别是在mp4上，可以分阶段加载，因为它不支持流mp4。这意味着可以进行清晰，无缝的切换，负载控制和视频节省。它还集成了对FLV，HLS和破折号的按需和实时支持。

优势总结：上手简单、API丰富、官方文档完善、自定义UI。完全不输于video.js、mediaElement.js 等老牌视频播放器。

官网：

http://h5player.bytedance.com

github：https://github.com/bytedance/xgplayer

快速上手

安装

npm install xgplayer

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

<script src="//cdn.jsdelivr.net/npm/xgplayer/browser/index.js" type="text/javascript"></script>

使用

1. 在页面提供占位 DOM

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

2. 实例化

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

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

如果想完成直播的功能，播放器会自动识别直播或回放。

插件

西瓜视频播放器主张一切设计都是插件，小到一个播放按钮大到一项直播功能支持。想更好的自定义播放器完成自己业务的契合，理解插件机制是非常重要的，播放器本身有很多内置插件，比如报错、loading、重播等，如果大家想自定义效果可以关闭内置插件，自己开发即可。

默认情况下插件是自启动的，如果自定义插件不想自启动或者不想改变播放器默认的执行机制，建议以继承播放器类的方式开发。

文档地址：

http://h5player.bytedance.com/plugins/#

%E5%86%85%E7%BD%AE%E6%8F%92%E4%BB%B6

插件列表：

API

这里只列出大概列表，具体API文档地址：

http://h5player.bytedance.com/api/#%E5%B1%9E%E6%80%A7