uniapp(微信小程序)播放flv视频(萤石云视频)解决方案(使用web-view组件完美适配)

情况：

现在我们的项目需要能够在微信小程序中播放萤石云摄像头的直播以及录播视频，但是官方提供的组件要么就是原生的微信小程序，uniapp无法直接使用，要么就是提供的uniapp方案只能h5页面下使用，而且要引入一堆文件才行，还有的方案就是使用萤石云的自定义组件，但是无法按照我们自己的需求来设置页面了，因此我们准备将所有视频链接转换成flv视频流（调用萤石云api，自行上官方文档查看），只要能够在微信小程序中播放flv视频，就能完成我们的需求

在尝试了多种方法之后，我整出了一个能够完美适配微信小程序页面的播放方法

大致思路：

使用mui-player组件(一个h5页面专用的组件)播放flv视频，但是微信小程序无法使用该组件，所以将使用了该组件的页面，编译成h5页面并运行，然后在微信小程序的页面中使用web-view组件显示该页面即可

mui-player的官方网址：

MuiPlayer

开始实现：

1.使用mui-palyer组件

先下载必须的依赖包（我这里只使用了flv视频，如果有需要其他视频格式的可去官网查看）

npm install mui-player -save

npm install flv -save

 2.开始封装组件

<template>
	<view>
		<div id="mui-video"></div>
	</view>
</template>

<script>
	import 'mui-player/dist/mui-player.min.css'
	import MuiPlayer from 'mui-player'
	import Flv from 'flv.js'

	export default {
		name: "H5Player",
		props: {
			// 播放标题
			title: {
				type: String,
				default: ''
			},
			// 播放地址
			src: {
				type: String,
				default: ''
			},
			// 播放格式
			type: {
				type: String,
				default: 'flv'
			},
			// 自动播放
			autoplay: {
				type: Boolean,
				default: true
			},
			// 循环播放
			loop: {
				type: Boolean,
				default: true
			},
			// 静音播放
			muted: {
				type: Boolean,
				default: false
			},
			// 播放器容器是否自适应视频高度
			autoFit: {
				type: Boolean,
				default: false
			},
			// 直播模式
			live: {
				type: Boolean,
				default: false
			},
			// 封面地址
			poster: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				mui_video: null,
				parse: {}
			};
		},
		watch: {
			// 播放地址变化
			src(newVal, oldVal) {
				if (this.mui_video != null) {
					this.mui_video.src = newVal
					this.mui_video.reloadUrl(newVal)
				} else{
					this.init();
				}
			},
			// 播放格式变化
			type(newVal, oldVal) {
				// console.log(newVal, oldVal)
				
				if(newVal == 'mp4') {
					this.parse = {}
				}		
				if(newVal == 'flv') {
					this.parse = {
						type: 'flv',
						loader: Flv,
						config: { 
							// hls config to：https://github.com/video-dev/hls.js/blob/HEAD/docs/API.md#fine-tuning
							debug: false,
						},
					}
				}
				// 重置播放器
				this.init()
			}
		},
		mounted() {
			setTimeout(()=>{
				if(this.type == 'mp4') {
					this.parse = {}
				}
				
				if(this.type == 'flv') {
					this.parse = {
						type: 'flv',
						loader: Flv,
						config: { 
							// hls config to：https://github.com/video-dev/hls.js/blob/HEAD/docs/API.md#fine-tuning
							debug: false,
						},
					}
				}
				this.init()
			},500)
		},
		methods: {
			init() {
				this.mui_video = new MuiPlayer({
					container: '#mui-video',
					title: this.title,
					// 设置个默认地址 否则会弹出视频为空
					src: this.src,
					autoplay: this.autoplay,
					autoFit: this.autoFit,
					loop: this.loop,
					muted: this.muted,
					live: this.live,
					poster: this.poster,
					height: '220px',
					parse: this.parse
				})
				console.log(this.mui_video.getControls())
			}
		}
	}
</script>

<style>

</style>

 3.创建用于使用mui-player组件的页面，该页面将会被运行成h5

由于我的微信小程序页面有登录信息验证，因此需要传入token参数，并在加载时存入store里面，这个主要是避免访问时被拦截了，根据自己的情况添加即可，H5Player就是上面我创建的组件

<template>
	<view>
		<!-- #ifdef H5 -->
		<u-sticky offset-top="-40">
			<view class="container">
				<H5Player ref="player" v-if="flag" :title="camera.name" :src="camera.realUrl" :type="'flv'"
				:autoFit="true" :autoplay="true" ></H5Player>  
			</view>
		</u-sticky>
		<!-- #endif --> 	
		
		</view>
	</view>
</template>

<script>
	import { setToken,getToken } from '@/utils/auth';
	import config from '@/config'
	// #ifdef H5
	import H5Player from '@/pages_dam_mdm/components/H5Player/H5Player.vue'
	// #endif
	
	export default {
        components:{
			H5Player
		},
		data() {
			return {
				tabs:[],
				tabIndex:0,
				showCalendar:false,
				showTime:nowDate,//展示时间
				historyType:0,//历史回放类型，0是当天回放，1是往日回放
				historyList:[],//历史回放时间列表
				choiceTime:Date.now(),
				flag:false,
				video:null,//存放视频播放对象
				camera:{
					videoUrl:'',
					videoHistoryUrl:'',
					realUrl:'',
				}
			}
		},
		onLoad(option) {
		    // 获取传递的参数	    
			const token = this.$route.query.token;//如果是从微信小程序打开，则默认是无token的，需要访问时传递token，并且进行设置
			if(token){//如果传递了token
				setToken(token);
			}
		},
		onReady: function(res) {    
		},
		methods: {

		}
	}
</script>

<style lang="scss">

</style>

4.创建用于展示web-view组件的页面

大家可以将h5页面部署(本地测试时，可以先用hbuilder启动至浏览器，模拟部署页面，ip地址就是http://localhost)的ip地址存入config中，便于后续的修改，可以在url中传递必要测参数

<template>
	<view>
		<web-view :src="src"></web-view>
	</view>
</template>

<script>
	import { getToken } from '@/utils/auth';
	import config from '@/config'
	export default {
		data() {
			return {
				src:'',
			}
		},
		onLoad(options){
			//先获取token，然后传递给h5页面
			const token =  getToken();
			this.src = config.baseH5Url + '/#/pages_dam_mdm/mdm/playCamera/index?uuid=' + options.uuid + '&token=' + token;
		},
		methods: {
		}
	}
</script>

<style>

</style>

6.隐藏导航栏

因为h5页面本身自带导航栏，使用web-view组件展示的时候就会出现两个导航栏，因此需要隐藏一个，只需要在pages.json里配置一下即可

{
	"path" : "mdm/playCamera/index",
	"style" : 
	{
		"navigationBarTitleText" : "",
		"app-plus": {
			"titleNView": false //禁用原生导航栏  
		}
	}
}

7.查看效果

十分完美！