西海岸：批量预览视频增加提示，去申请才能查看
This commit is contained in:
parent
2d32d735a5
commit
4296677fcd
|
|
@ -353,19 +353,10 @@
|
|||
<a-modal wrapClassName="single-preview-modal" v-model:visible="visible" title="视频预览" :width="960" destroyOnClose>
|
||||
<template #footer></template>
|
||||
<div style="width: 100%; display: flex; justify-content: center">
|
||||
<div style="width: 100%; height: 100%">
|
||||
<vue3VideoPlay v-bind="options" @play="onPlay" @pause="onPause" @timeupdate="onTimeupdate"
|
||||
@canplay="onCanplay" />
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
<!-- 西海岸--单个预览弹窗--遮挡，不让点击视频播放 -->
|
||||
<a-modal wrapClassName="single-preview-modal-cover" v-if="whoShow1.itShowXiHaiAn" v-model:visible="visible"
|
||||
:width="960">
|
||||
<template #footer></template>
|
||||
<div style="width: 100%; display: flex; justify-content: center">
|
||||
<div style="width: 100%; height: 100%">
|
||||
<div style="width: 912px; height: 518px;margin-top: 50px" @click="showMsg"></div>
|
||||
<div style="width: 100%; height: 100%;position:relative">
|
||||
<!-- 预览视频--遮罩 -->
|
||||
<div class="video-cover" @click="videoShowMsg"></div>
|
||||
<vue3VideoPlay v-bind="options" />
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
|
|
@ -397,6 +388,8 @@
|
|||
<template #footer></template>
|
||||
<div class="batch-video">
|
||||
<div v-for="item in videoList" :key="item.id" style="width: 100%; height: 100%;position:relative">
|
||||
<!-- 批量预览视频--遮罩 -->
|
||||
<div class="batch-video-cover" @click="videoShowMsg"></div>
|
||||
<p></p>
|
||||
<vue3VideoPlay v-bind="item.options" />
|
||||
</div>
|
||||
|
|
@ -650,27 +643,11 @@ const tabList = ref([
|
|||
const wrjVisible = ref(false)
|
||||
const wrjName = ref('')
|
||||
const wrjData = ref([])
|
||||
const showWrj = (data) => {
|
||||
console.log('data---dddd--------->', data);
|
||||
wrjName.value = data.wrjName
|
||||
// wrjData.value = data.details
|
||||
wrjData.value = data.deviceAttrDTOList
|
||||
// wrjData.value = []
|
||||
// data.deviceAttrDTOList.map(v => {
|
||||
// console.log('v.attrType------------>', v.attrType);
|
||||
// console.log('v.attrValue------------>', v.attrValue);
|
||||
// try {
|
||||
// let obj = {
|
||||
// name: v.attrType,
|
||||
// list: v.attrValue && JSON.parse(v.attrValue)
|
||||
// }
|
||||
// wrjData.value.push(obj)
|
||||
// } catch (error) {
|
||||
// console.log('error------------>', error);
|
||||
// }
|
||||
// })
|
||||
// console.log('wrjData.value------------>', wrjData.value);
|
||||
|
||||
// 单兵、无人机-详情
|
||||
const showWrj = (data) => {
|
||||
wrjName.value = data.wrjName
|
||||
wrjData.value = data.deviceAttrDTOList || []
|
||||
wrjVisible.value = true
|
||||
}
|
||||
const goToWrj = (data) => {
|
||||
|
|
@ -718,7 +695,7 @@ const openVideo = (id) => {
|
|||
visible.value = true
|
||||
options.src = res.data.data
|
||||
})
|
||||
// 视频测试--勿删
|
||||
// // 视频测试--勿删
|
||||
// visible.value = true
|
||||
// options.src = 'http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8'
|
||||
}
|
||||
|
|
@ -1318,13 +1295,13 @@ const batchPreview = async function (page) {
|
|||
muted: false, //静音
|
||||
webFullScreen: false,
|
||||
speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
|
||||
autoPlay: isXiHaiAn, //自动播放
|
||||
autoPlay: isXiHaiAn ? false : true, //自动播放
|
||||
loop: false, //循环播放
|
||||
mirror: false, //镜像画面
|
||||
ligthOff: false, //关灯模式
|
||||
volume: 0.3, //默认音量大小
|
||||
control: true, //是否显示控制
|
||||
controlBtns: [
|
||||
control: isXiHaiAn ? false : true, //是否显示控制
|
||||
controlBtns: isXiHaiAn ? [] : [
|
||||
'audioTrack',
|
||||
'quality',
|
||||
'speedRate',
|
||||
|
|
@ -1337,6 +1314,8 @@ const batchPreview = async function (page) {
|
|||
},
|
||||
}
|
||||
await getStreamByChannelCode(param).then((res) => {
|
||||
// 视频测试
|
||||
// ob.options.src = 'http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8'
|
||||
ob.options.src = res.data.data
|
||||
console.log('监测ob的变化', ob)
|
||||
videoList.value.push(ob)
|
||||
|
|
@ -1640,7 +1619,7 @@ const handleTableChange = (val) => {
|
|||
}
|
||||
}
|
||||
|
||||
const showMsg = () => {
|
||||
const videoShowMsg = () => {
|
||||
message.warning('请申请后在我的申请中预览视频!')
|
||||
}
|
||||
</script>
|
||||
|
|
@ -2031,27 +2010,6 @@ const showMsg = () => {
|
|||
}
|
||||
}
|
||||
|
||||
.ant-modal-mask {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.ant-modal-footer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.single-preview-modal-cover {
|
||||
background: transparent;
|
||||
z-index: 999999;
|
||||
|
||||
.ant-modal {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.ant-modal-content {
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
.batch-preview-modal {
|
||||
.batch-video {
|
||||
width: 100%;
|
||||
|
|
@ -2087,4 +2045,27 @@ const showMsg = () => {
|
|||
video::-webkit-media-controls {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.video-cover {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: transparent;
|
||||
z-index: 99999999;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.batch-video-cover {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: transparent;
|
||||
height: 288px;
|
||||
z-index: 99999999;
|
||||
width: 512px;
|
||||
margin-top: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue