From e6a52dcfe952f9baecb6d1ef5da0f8e650654df7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=A3=8E=E8=8A=B1=E4=B8=80=E4=B8=96=E6=9C=88?=
 <1149505133@qq.com>
Date: Sun, 14 Jul 2024 01:50:33 +0800
Subject: [PATCH] =?UTF-8?q?=20feat(=E8=A7=86=E9=A2=91):=20=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0video=E5=86=85=E5=B5=8C=E9=A1=B5=E9=9D=A2=E3=80=81?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E8=A7=86=E9=A2=91=E7=9B=91=E6=8E=A7=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E5=92=8C=E8=AF=A6=E6=83=85=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/video/video-detail.vue  | 17 +++++--
 pages/video/video-list.vue    | 34 +++++++------
 pages/video/video-webview.vue | 90 +++++++++++++++++++++++++++++++++++
 3 files changed, 122 insertions(+), 19 deletions(-)
 create mode 100644 pages/video/video-webview.vue

diff --git a/pages/video/video-detail.vue b/pages/video/video-detail.vue
index 8065bc9..df8eda9 100644
--- a/pages/video/video-detail.vue
+++ b/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">
-				<!-- <cover-view class="btn-toggle" v-if="btnToggle" @click="quitFullScreen">
+			<video id="myVideo" class="video-content" :src="dataObj.m3u8Url" :autoplay="true" :direction="0"
+			: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> -->
-			</video>
+				</view>
+			</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({
diff --git a/pages/video/video-list.vue b/pages/video/video-list.vue
index c14c8d0..b469e7e 100644
--- a/pages/video/video-list.vue
+++ b/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){
-				console.log("111")
+			// goDetail(index,i){
+			// 	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];
-				if(channeObj.hdlUrl){
-					uni.navigateTo({
-						url:'./video-detail?deviceObj='+encodeURIComponent(JSON.stringify(deviceObj))+ '&channeObj='+encodeURIComponent(JSON.stringify(channeObj))
-					})
-				}else{
-					this.$u.toast('获取通道地址错误')
-				}
-				
+				uni.navigateTo({
+					url:'./video-webview?deviceObj='+encodeURIComponent(JSON.stringify(deviceObj))
+				})
 			}
 		}
 	}
diff --git a/pages/video/video-webview.vue b/pages/video/video-webview.vue
new file mode 100644
index 0000000..ba4561a
--- /dev/null
+++ b/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>
\ No newline at end of file