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

<template>
	<view class="player-container">
		<view class="av-box">
			<template v-for="(item,index) in openDataed">
				<view class="av-box-item" :key="index">
					<view class="video-wapper">
						
						<view class="video-player">
							<view class="video-header">
								{{item.plate}} - {{item.label}}
							</view>
							<Player :videoUrl="item.videoUrl"></Player>
						</view>
					</view>
				</view>
			</template>
		</view>
		
	</view>
</template>

<script>
import {openVideo} from '@/api/monitor.js'
import {getImages} from '@/plugins/images'
import {isArray,isEmpty} from 'lodash'
// #ifdef H5
import Player from './h5Player.vue'
// #endif

export default {
	components: {
		Player
	},
	
	computed: {
		checkedArr() {
			return this.$store.state.monitor.checkedArr
		}
	},
	watch: {
		checkedArr: {
			immediate: true,
			deep: true,
			handler(newVal,oldVal) {
				let newlist = newVal.filter(item => { return item.code == "camera" })
				
				// console.log(newVal,oldVal,'checkedArrcheckedArrcheckedArr')
				this.openDataedOrgin = {}
				this.openDataed = []
				
				if(!isEmpty(newlist)) {
					this.openAllChanel(newlist)	
				} 
				
			}
		}
	},
	created() {
	
	},
	data() {
		return {
			openDataedOrgin: {}, //打开视频数据
			openDataed: [], //打开视频数据
		}
	},
	
	methods: {
		openAllChanel(chanelList) {
			// console.log(chanelList,'chanelList')
			let deviceIdObj = {}
			if(isArray(chanelList)) {
				chanelList.forEach((item) => {
					let newId = `${item.deviceId}-${item.videoNumber}`
					if(!this.openDataedOrgin[newId]) {
						let obj = {
							newId,
							...item,
							status: 0, //-1播放失败 0未播放 1播放
							videoUrl: ''
 						}
						this.openDataedOrgin[newId] = obj
						this.openDataed.push(this.openDataedOrgin[newId] = obj)
						
						/* 请求接口用 */
						if(!deviceIdObj[item.deviceId]) {
							deviceIdObj[item.deviceId] = [item.videoNumber]
						} else {
							deviceIdObj[item.deviceId].push(item.videoNumber)
						}
						
						
					}			
					
				})
				
				for(let i in deviceIdObj) {
					this.openAv(i, deviceIdObj[i])
				}
				console.log(deviceIdObj,'this.openDataedOrginthis.openDataedOrgin')
			}
		},
		openAv(deviceId,channels,Rate) {
			 let dataRate = 1//子码流  默认 1
			if (typeof Rate === 'number') {
				dataRate = Rate
			}
			let params = {
				channels, // 通道号
				dataRate: dataRate, // 码流类型 0：主码流，1：子码流 默认 1
				deviceId, // 设备号
			};
				
			openVideo(params).then((res)=> {
				if (res.code == 0) {
					res.data.forEach(e => {
						let newId = `${e.deviceId}-${e.channel}`
						this.openDataedOrgin[newId].status == 1;
						this.openDataedOrgin[newId].videoUrl = getImages(e.videoUrl);
					})
					
				}
			}).catch((error)=> {
				console.log('设备命令下发失败',error)	
				channels.forEach(e => {
					let newId = `${deviceId}-${e}`
					this.openDataedOrgin[newId].status == -1
					this.openDataedOrgin[newId].videoUrl = 'command_failed'
				})	
				
			});
			
			
		}
	}
}
</script>

<style lang="scss" scoped>
.player-container {
	width: 100%;
	height: 100%;
	
	.av-box {
		display: flex;
		flex-wrap: wrap;
		.av-box-item {
			width: 50%;
			// flex: 1 1 50%;
			.video-wapper {
				margin: 20rpx !important;
				height: 280rpx;
				
				
			
				.video-player {
					position: relative;
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					overflow: hidden;
					border: 1px solid #243253;
					background: #071323;
					border-color: none;
					
					.video-header {
						position: absolute;
						top: 0;
						left: 0;
						height: 30rpx;
						color: #6DC0FF;
						font-size: 22rpx;
						width: 100%;
						background-color: rgba(11, 24, 40, 0.6);
						z-index: 1000;
						padding-left: 4rpx;
					}
				}
			}
			
		}
	}
	
	
}
</style>