什么是西瓜播放器
xgplayer是由字节跳动开源的一个网络视频播放器库(现在也支持音乐播放)。它基于一切都被组件化的原则设计了一个单独的,可分离的UI组件。更重要的是,它不仅在UI层上很灵活,而且在功能上也大胆:它摆脱了视频加载,缓冲和对视频依赖性的格式支持。特别是在mp4上,可以分阶段加载,因为它不支持流mp4。这意味着可以进行清晰,无缝的切换,负载控制和视频节省。它还集成了对FLV,HLS和破折号的按需和实时支持。
![ae71373aa731cbb7dd5c295f57f0da4e.png](https://i-blog.csdnimg.cn/blog_migrate/c5c64d28ab16c89bb8abf279c998a393.jpeg)
优势总结:上手简单、API丰富、官方文档完善、自定义UI。完全不输于video.js、mediaElement.js 等老牌视频播放器。
官网:http://h5player.bytedance.com
github:https://github.com/bytedance/xgplayer
快速上手
安装
npm install xgplayer
对于已有项目也可以通过 CDN 引入,代码如下:
使用
1. 在页面提供占位 DOM
2. 实例化
import Player from 'xgplayer';let player = new Player({ id: 'mse', url: '//abc.com/**/*.mp4'});
只需两步完成最简单的视频播放(mp4点播),播放器提供了较丰富的配置选项,如自动播放、贴图、音量控制、内置控件关闭等
如果想完成直播的功能,播放器会自动识别直播或回放。
![f81c554d5a73bc3e8eb3e3944171a301.png](https://i-blog.csdnimg.cn/blog_migrate/84dabfaec5de0a565578135a2a783be4.jpeg)
插件
西瓜视频播放器主张一切设计都是插件,小到一个播放按钮大到一项直播功能支持。想更好的自定义播放器完成自己业务的契合,理解插件机制是非常重要的,播放器本身有很多内置插件,比如报错、loading、重播等,如果大家想自定义效果可以关闭内置插件,自己开发即可。
默认情况下插件是自启动的,如果自定义插件不想自启动或者不想改变播放器默认的执行机制,建议以继承播放器类的方式开发。
文档地址:http://h5player.bytedance.com/plugins/#%E5%86%85%E7%BD%AE%E6%8F%92%E4%BB%B6
插件列表:
![aa3dde671081da1c03df364c1382e663.png](https://i-blog.csdnimg.cn/blog_migrate/974d9e3c0608769d42537975cc1e39af.jpeg)
API
![453eb4251604202a9296dcf6641e6033.png](https://i-blog.csdnimg.cn/blog_migrate/e31bb852468d751da6214292e114f1c8.jpeg)
这里只列出大概列表,具体API文档地址:http://h5player.bytedance.com/api/#%E5%B1%9E%E6%80%A7