哈喽，大家好！现在短视频、直播十分的火，相信许多开发童鞋都遇到要在项目中加入视频组件的情况吧。

一般视频播放或者直播的前端组件都要有诸如弹幕、清晰度调整、倍数播放等功能，今天精选板给大家带来的就是这样一款完善的HTML5视频播放组件–xgplayer(西瓜播放器)！

西瓜播放器是一个HTML5播放器类库，它本着一切都是组件化的原则设计了独立可拆卸的 UI 组件。它可以作为 H5 组件、Vue、React 组件单独使用。

更重要的是它不只是在 UI 层有灵活的表现，在功能上也做了大胆的尝试：摆脱视频加载、缓冲、格式支持对 video 的依赖。尤其是在 mp4 点播上做了较大的努力，让本不支持流式播放的 mp4 能做到分段加载，这就意味着可以做到清晰度无缝切换、加载控制、节省视频流量。同时，它也集成了对 flv、hls、dash 的点播和直播支持。

而且上手开发也十分简单，官方开发文档也十分完善：

快速上手

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

安装

# 最新稳定版

$ npm install xgplayer

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

使用

1. 在页面提供占位 DOM

2. 实例化

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

就两步完成最简单的视频播放(mp4点播)，播放器提供了较丰富的配置选项，如自动播放、贴图、音量控制、内置控件关闭等等，更多配置参考配置。

如果想完成直播的功能，播放器会自动识别直播或回放，更多内容请参考官方示例 。

注意

播放器核心包和插件都使用 babel 编译到 ES5。

效果

原文出处：微信公众号【精选展示板 前端潮咖】

本文观点不代表Dotnet9立场，转载请联系原作者。