tqApp-webView/pagesVideo/monitor/module/h5Player2.vue

<template>
	<view class="player" ref="player">
		<canvas :id="videoId"></canvas>
		<view class="empty">{{tips}}</view>
	</view>
</template>

<script>
/* https://www.npmjs.com/package/flvplayer */
import {getImages} from '@/plugins/images'
import { uniqueId } from 'lodash'

let wasmUrl = getImages('/assetsMobile/script/WXInlinePlayer/prod.all.wasm.combine.js')
let asmUrl = getImages('/assetsMobile/script/WXInlinePlayer/prod.all.asm.combine.js')

export default {
	props: {
		videoUrl: {
			type: String,
			default: ''
		},
		control: {
			type: Boolean,
			default: true,
		}
	},
	watch: {
		videoUrl: {
			immediate: true,
			deep: true,
			handler(newVal,oldVal) {
				this.tips = '加载中'
				// console.log(newVal,'vv')
				if (!this.isNull(newVal)) {
					if(newVal.includes('failed')) {
						this.tips = '设备命令下发失败'
						return
					}
					this.playerDestroy();
					this.$nextTick(() => {
						let el = document.getElementById(`${this.videoId}`).firstChild
					
						this.createPlayer(el, newVal);
					})	
				}
				
			}
		}
	},
	components: {
	
	},
	created() {
		
	},
	data() {
		return {
			flv: null,
			videoId:  uniqueId('flv_video_'),
			tips: '加载中',
		}
	},
	
	methods: {
		createCanvas() {
			console.log(this.$refs,'refsresr')
			let canvas = document.createElement('canvas')
			canvas.setAttribute('id',this.videoId)
			this.$refs.player.$el.appendChild(canvas)
		},
		//创建播放器
		createPlayer(el,url) {
			// this.createCanvas()
			 if (window.WXInlinePlayer.isSupport()) {
				 console.log(el,'elel')
				window.WXInlinePlayer.init({
				 	asmUrl: asmUrl,
				 	wasmUrl: wasmUrl,
				})
				 WXInlinePlayer.ready().then(() => {
					this.flv = new WXInlinePlayer({
					  url: url,
					  $container: el,
					 hasVideo: true,
					  hasAudio: true,
					  volume: 1.0,
					  muted: false,
					  autoplay: true,
					  loop: true,
					  isLive: true,
					  chunkSize: 128 * 1024,
					  preloadTime: 5e2,
					  bufferingTime: 1e3,
					  cacheSegmentCount: 64,
					  customLoader: null
					  
					/*  hasVideo: true,
					  hasAudio: true,
					  volume: 1.0,
					  muted: false,
					  autoplay: true,
					  loop: false,
					  isLive: true,
					  chunkSize: 128 * 1024,
					  preloadTime: 500,
					  bufferingTime: 500,
					  cacheSegmentCount: 64,
					  customLoader: null, */
					});
					
					this.flv.play();
					
					this.flv.on("loadError", (e) => {
					  console.e("loadError", e);
					});
					this.flv.on("loadSuccess", () => {
					  console.log("loadSuccess");
					});
					/* const { userAgent } = navigator;
					const isWeChat = /MicroMessenger/i.test(userAgent);
					if (!isWeChat) {
					  alert('click to play!');
					  document.body.addEventListener('click', () => {
						player.play();
					  });
					} */
				  });
				/* if (!this.flv) {
				 	this.flv = new window.WXInlinePlayer({
				 		container: el,
				 		url,
				 		hasVideo: true,
				 		hasAudio: true,
				 		volume: 1.0,
				 		muted: false,
				 		autoplay: true,
				 		loop: false,
				 		isLive: true,
				 		chunkSize: 128 * 1024,
				 		preloadTime: 500,
				 		bufferingTime: 500,
				 		cacheSegmentCount: 64,
				 		customLoader: null,
				 					
				 	})
				 } */
			 }
			
		},
		play() {
			if(this.flv) this.flv.play()
		},
		pause() {
			if(this.flv) this.flv.pause()
		},
		//销毁播放方法
		playerDestroy() {
			if (this.flv) {
				this.flv.pause && this.flv.pause();
				this.flv.destroy && this.flv.destroy();
				this.flv = null;
			}
		},
	},
	beforeDestroy() {
		this.playerDestroy();
	},
}
</script>

<style lang="scss" scoped>
.player {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
	.empty {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		color: #fff;
		width: 100%;
		height: 100%;
	}
}
</style>