今天给大家隆重推荐一款超强功能的H5西瓜视频播放器插件xgplayer。

开源音视频解决方案，star高达3.2K 。实现自定义加载、缓冲、无缝切换等功能。同时集成了对flv、hls、dash的点播及直播支持。

西瓜播放器是一个Web视频播放器类库，基于一切都是组件化原则设计了独立可拆卸的UI组件。

功能特性

从底层解析 MP4、HLS、FLV 探索更大的视频播放空间。

易拓展：灵活的插件体系、PC\移动端自动切换、安全的白名单机制；

更丰富：强大的MP4控制、点播的无缝切换、有效的带宽节省；

较完整：完整的产品机制、错误的监控上报、自动的降级处理；

安装

# 最新稳定版

$ npm i xgplayer -S

同时也支持cdn方式引入xgplayer插件。

快速使用

// 占位DOM

“mse”>div> // 实例化 let player = new Player({ id: \’mse\’, url: \’//abc.com/**/*.mp4\’ // … });script>

播放器提供了较丰富的配置选项，如自动播放、贴图、音量控制、内置控件关闭等功能。

支持自定义弹幕

视频清晰度配置

西瓜播放器同样也支持音乐播放。

import \'xgplayer\';

import Music from \'xgplayer-music\';

let player = new Music({

id: \'vs\',

url: [

{

src: \'./song01.m4a\',name: \'song01\',vid: \'000001\',poster: \'poster01.jpg\'

},

{

src: \'./song02.m4a\',name: \'song02\',vid: \'000002\',poster: \'poster02.jpg\'

},

{

src: \'./song03.m4a\',name: \'song03\',vid: \'000003\',poster: \'poster03.jpg\'

}

],

volume: 0.8,

width: 900,

height: 50,

preloadNext: true,

switchKeepProgress: false,

abCycle: {

start: 3,

end: 9,

loop: true

}

})

支持在线快速生成播放器配置。

非常优秀的一款开源音视频播放器插件，大家不要错过哈~

最后附上项目文档及地址链接。

# 文档示例

https://v2.h5player.bytedance.com/

# 仓库地址

https://github.com/bytedance/xgplayer

好了，今天就介绍到这里。希望以上的分享对小伙伴们有所帮助。

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。导航：艺宵博客 » XGPlayer–超质量HTML5视频解析播放器