Vue2 - 详细实现安装西瓜视频 xgplayer 插件详细配置及使用教程，利用西瓜视频播放器播放 mp4、flv、hls 格式视频文件及视频推流（直播或监控摄像头画面），支持移动端H5及PC网站！

前言

如果您需要 Vue3 版本，请访问 这篇文章。

在 vue2 | nuxt2 项目开发中，详解集成接入 xgplayer 西瓜视频插件并播放视频教程，利用西瓜 flv / hls 插件做在线直播、点播、视频直播、直播视频流、对接监控设备的实时播放监控画面、websocket url地址等，自定义西瓜播放器暂停播放、快捷按钮、进度条大小颜色宽高等样式，提供在线推流测试地址方便调试，解决各种黑屏不播放、在线 flv hls 点播推流无法加载、浏览器控制台报错、浏览器劫持、播放异常加载缓慢、断流卡顿重连问题，兼容安卓系统及苹果ios系统无差异。

提供详细示例代码及教程，新手小白复制运行简单修改即可。

---

如下图所示，使用西瓜视频插件做直播推流、视频点播、实时监控等。

安装插件

您要想使用西瓜视频，就必须安装其提供的插件。