feat(视频): 添加video内嵌页面、调整视频监控列表和详情页

pages/video/video-detail.vue

@@ -5,7 +5,7 @@
 			
 			<!-- <video id="myVideo" :src="url" autoplay v-if="showVideo" show-mute-btn="true" vslide-gesture="true" :controls="btnToggle"> -->
 			<!-- #ifdef APP-PLUS -->
-			<video id="myVideo" :src="dataObj.flvUrl" autoplay  v-if="showVideo" :controls="false">
+			<video id="myVideo" :src="dataObj.flvUrl" autoplay show-fullscreen-btn v-if="showVideo" :controls="false">
 				<cover-view class="btn-toggle" v-if="btnToggle" @click="quitFullScreen">
 					退出全屏
 				</cover-view> 
@@ -16,14 +16,18 @@
 			<!-- #endif -->
 			
 			<!-- #ifdef MP-WEIXIN -->
-			<video id="myVideo" :src="dataObj.m3u8Url" autoplay  v-if="showVideo" :controls="false">
+			<video id="myVideo" class="video-content" :src="dataObj.m3u8Url" :autoplay="true" :direction="0"
-				<!-- <cover-view class="btn-toggle" v-if="btnToggle" @click="quitFullScreen">
+			:muted="true" :controls="true" :is-live="true" object-fit="contain" @binderror="error" :custom-cache="false"
+			title="放大后会显示的标题" show-fullscreen-btn>
+			</video>
+			<!--<video id="myVideo" :src="dataObj.m3u8Url" autoplay show-fullscreen-btn v-if="showVideo" :controls="false">
+				 <cover-view class="btn-toggle" v-if="btnToggle" @click="quitFullScreen">
 					退出全屏
 				</cover-view> -->
 				<!-- <view class="btn-toggle" v-if="btnToggle" @click="quitFullScreen">
 					退出全屏
-				</view> -->
+				</view>
-			</video>
+			</video> -->
 			<!-- #endif -->
 			
 			<!-- #ifdef MP-WEIXIN 
@@ -299,6 +303,9 @@
 					}
 				)
 			},
+			error(e){
+				console.log("播放错误",error)
+			},
 			btnToast(type) {
 				if (type == this.ptzType.up) {
 					this.$refs.uToast.show({

pages/video/video-list.vue

@@ -41,11 +41,12 @@
 								</view>
 							</view>
 							<view class="item-content-list-right">
-								<u-button type="primary" size="mini" :custom-style="customStyle" @click="getChanneList(item.id,index)">查询通道</u-button>
+								<!-- <u-button type="primary" size="mini" :custom-style="customStyle" @click="getChanneList(item.id,index)">查询通道</u-button> -->
+								<u-button type="primary" size="mini" :custom-style="customStyle" @click="goDetail(index)">查看设备</u-button>
 							</view>
 						</view>
 					</view>
-					<view class="item-footer" v-if="item.channelList && item.channelList.length>0">
+					<!-- <view class="item-footer" v-if="item.channelList && item.channelList.length>0">
 						<view class="channel-item" v-for="(val,i) in item.channelList" :key="val.id">
 							<view class="channel-item-left">
 								<view class="iconfont icon-video-camera"></view>
@@ -58,7 +59,7 @@
 							</view>
 							<u-button type="primary" size="mini" :custom-style="customStyle2" @click.stop="goDetail(index,i)">播放</u-button>
 						</view>
-					</view>
+					</view> -->
 				</view>
 			</view>
 		</mescroll-body>
@@ -174,18 +175,23 @@
 					this.$u.toast('服务器开小差了呢，请您稍后再试')
 				})
 			},
-			goDetail(index,i){
+			// goDetail(index,i){
-				console.log("111")
+			// 	console.log("111")
+			// 	let deviceObj = this.dataList[index];
+			// 	let channeObj = this.dataList[index].channelList[i];
+			// 	if(channeObj.hdlUrl){
+			// 		uni.navigateTo({
+			// 			url:'./video-detail?deviceObj='+encodeURIComponent(JSON.stringify(deviceObj))+ '&channeObj='+encodeURIComponent(JSON.stringify(channeObj))
+			// 		})
+			// 	}else{
+			// 		this.$u.toast('获取通道地址错误')
+			// 	}
+			// },
+			goDetail(index){
 				let deviceObj = this.dataList[index];
-				let channeObj = this.dataList[index].channelList[i];
+				uni.navigateTo({
-				if(channeObj.hdlUrl){
+					url:'./video-webview?deviceObj='+encodeURIComponent(JSON.stringify(deviceObj))
-					uni.navigateTo({
+				})
-						url:'./video-detail?deviceObj='+encodeURIComponent(JSON.stringify(deviceObj))+ '&channeObj='+encodeURIComponent(JSON.stringify(channeObj))
-					})
-				}else{
-					this.$u.toast('获取通道地址错误')
-				}
-				
 			}
 		}
 	}

pages/video/video-webview.vue

@@ -0,0 +1,90 @@
+<template>
+	<view class="webview-box">
+		<view  class="loading-box">
+			<u-loading size="100" :show="true"></u-loading>
+			<view>加载中。。。</view>
+		</view>
+		<web-view v-if="isWebview" :src="webviewUrl"></web-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return{
+				isWebview:false,
+				deviceObj:null,
+				channeList:[],
+				webviewUrl:'https://static-mp-e1ad9848-99ba-4f1e-84ca-72802ff6ff6e.next.bspapp.com/video-html/index.html'
+			}
+		},
+		onLoad(option) {
+			console.log("option",option)
+			let deviceObj = JSON.parse(decodeURIComponent(option.deviceObj));
+			this.deviceObj = deviceObj;
+			this.getChanneList(deviceObj.id)
+		},
+		methods:{
+			getChanneList(id){
+				console.log("id",id)
+				this.$api.videoApi.getVideoChannelList({pid: id,page:1,pageSize:999}).then(res => {
+					if(res.code == 0){
+						if(res.data.list && res.data.list.length>0){
+							let channeList = res.data.list||[];
+							// let arr = channeList.map(item=>{
+							// 	return {
+							// 		channeId:item.channeId,
+							// 		name:item.name,
+							// 		hdlUrl:item.hdlUrl,
+							// 	}
+							// })
+							this.$nextTick(()=>{
+								this.$set(this,'channeList',res.data.list);
+								let url = 'https://static-mp-e1ad9848-99ba-4f1e-84ca-72802ff6ff6e.next.bspapp.com/video-html/index.html?deviceObj=' + encodeURIComponent(JSON.stringify(this.deviceObj)) + '&channeList='+encodeURIComponent(JSON.stringify(channeList))
+								this.$set(this,'webviewUrl',url);
+								this.isWebview = true;
+							})
+						}else{
+							this.$u.toast('通道为空');
+							this.$nextTick(()=>{
+								this.$set(this,'channeList',[])
+							})
+						}
+						
+					}else{
+						this.$u.toast(res.msg);
+					}
+				}, error => {
+					this.$u.toast('服务器开小差了呢，请您稍后再试')
+				})
+			},
+		}
+	}
+</script>
+<style>
+	page{
+		height: 100%;
+	}
+</style>
+
+<style scoped lang="less">
+	.webview-box{
+		height: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		position: relative;
+	}
+	.loading-box{
+		position: absolute;
+		left: auto;
+		right: auto;
+		top: auto;
+		bottom: auto;
+		text-align: center;
+		>view{
+			font-size: 30rpx;
+			line-height: 80rpx;
+		}
+	}
+</style>