uniapp引入xgplayer(西瓜播放器)实现视频监控

开发背景

最近有个需求，需要在app中展示对应站房的实时监控画面，因为uniapp原有的video组件功能比较少就考虑到引入西瓜播放器的视频组件

开发准备

因为是直播流就选择了flvjs, 项目安装xgplayer-flv

npm install xgplayer-flv

通过render.js去做视图层，要注意的是nvue无法使用renderjs
详细文档可以自己去查看用法 https://uniapp.dcloud.net.cn/tutorial/renderjs.html

​renderjs 是一个运行在视图层的js。它比WXS更加强大。它只支持app-vue和web。
renderjs 的主要作用有2个：
1. 大幅降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力
2. 在视图层操作dom，运行 for web 的 js库

基础代码

monitor.vue

<!-- monitor.vue -->
<template>
	<view class="uni-padding-wrap monitor_box list_box">
		<uni-row style="background-color: #fff;" class="list_video_box">
			<uni-col :span="8" class="list_video_item" v-for="(item,i) in videoLlist" :key="i">
				<xgplayer :id='`myVideo${i}`' :videoData="item"></xgplayer>
				<text class="text">{
  
  {item.mpName}}</text>
			</uni-col>
		</uni-row>
	</view>
</template>
<script>
	import xgplayer from './xgplayer.vue'
	export default {
     
     
		components: {
     
      xgplayer },
		data(){
     
     
			return {
     
     
				videoList: [], // 视频列表
			}
		}
	}
</script>

xgplayer.vue

<template>
	<view class