0017
/
iot-ui-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
风花一世月 2024-07-14 01:50:33 +08:00
parent 73e26c8355
commit e6a52dcfe9
3 changed files with 122 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
pages/video/video-detail.vue
View File

@ -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({

30
pages/video/video-list.vue
View File

@ -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))
url:'./video-webview?deviceObj='+encodeURIComponent(JSON.stringify(deviceObj))
})
}else{
this.$u.toast('获取通道地址错误')
}
}
}
}

90
pages/video/video-webview.vue Normal file
View File

@ -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>