视频管理-模块自定义分屏功能、云联万物修改
This commit is contained in:
yjl
parent
603d2f7ae7
commit
04c6b9bebe
@ -25,6 +25,11 @@
|
||||
:url="urls"
|
||||
:token="lcToken"
|
||||
></leCheng>
|
||||
<YsyNew
|
||||
:ref="'ysy'"
|
||||
v-if="pluginType == 'ysy'"
|
||||
:ysyParams="ysyParams"
|
||||
></YsyNew>
|
||||
<iscPlugin
|
||||
v-else-if="pluginType == 'isc' && videoType == 1"
|
||||
:type="type"
|
||||
@ -64,11 +69,7 @@
|
||||
v-if="pluginType == 'ysy'"
|
||||
:ysyParams="ysyParams"
|
||||
></ysyPlayAndPlayback> -->
|
||||
<YsyNew
|
||||
:ref="'ysy' + item"
|
||||
v-if="pluginType == 'ysy'"
|
||||
:ysyParams="ysyParams"
|
||||
></YsyNew>
|
||||
|
||||
<ckPlayer
|
||||
@selectWin="selectWin"
|
||||
:showSelectBtn="true"
|
||||
@ -339,11 +340,7 @@ export default {
|
||||
showPlaybacks: false, //是否显示视频回放按钮
|
||||
pluginType: '', //ysy:萤石云 videojs ckPlayer lecheng isc xiongmai
|
||||
initDivNum: 9,
|
||||
ysyParams: {
|
||||
url: '',
|
||||
accessToken:
|
||||
'at.3goo7ob2dic9amkg5ycg4n5yak9jtpf2-2dn1vwm6z3-134xqr4-td1bh38w2'
|
||||
},
|
||||
ysyParams: [],
|
||||
urls: ['', '', '', '', '', '', '', '', ''],
|
||||
lcToken: '',
|
||||
isDockingToWoer: false,
|
||||
@ -491,7 +488,13 @@ export default {
|
||||
//videoType 1萤石云，2乐橙，3ISC，4大华，5宇视，6国标，7国密
|
||||
switch (Number(this.devList[0].videoType)) {
|
||||
case 1:
|
||||
this.ysyParams = this.devList[0]
|
||||
if (this.devList.length > 1) {
|
||||
this.ysyParams = this.devList
|
||||
} else if (this.devList.length == 1) {
|
||||
let arr = []
|
||||
arr.push(this.devList[0])
|
||||
this.ysyParams = arr
|
||||
}
|
||||
//playType 播放方式，1高清RTMP,2流畅RTMP,3高清HLS,4流畅HLS,5高清轻量级插件，6流畅轻量级插件
|
||||
var videoType = this.devList[0].videoType
|
||||
var playType = this.devList[0].playType
|
||||
|
||||
@ -1287,7 +1287,7 @@ export default {
|
||||
},
|
||||
{
|
||||
label: '洗轮机',
|
||||
value: 'JKDWZ00'
|
||||
value: 'JKDWZ005'
|
||||
},
|
||||
{
|
||||
label: '围墙',
|
||||
|
||||
@ -4,32 +4,49 @@
|
||||
<div class="header"></div>
|
||||
<div class="videoContent">
|
||||
<div class="videoListBox fullHeight">
|
||||
<div class="pageTitle">
|
||||
视频列表
|
||||
</div>
|
||||
<div class="videoBox" v-if="dataType==1">
|
||||
<div class="pageTitle">视频列表</div>
|
||||
<div class="videoBox" v-if="dataType == 1">
|
||||
<vue-scroll>
|
||||
<ul v-if="devList.length>0">
|
||||
<li @click="changeVideo(item)" v-for="(item,index) in devList" :key="index">
|
||||
<img v-if="item.deviceType==2" src="@/assets/images/icon-video2-white.png">
|
||||
<img v-else src="@/assets/images/icon-video-white.png">
|
||||
{{item.videoName}}
|
||||
<ul v-if="devList.length > 0">
|
||||
<li
|
||||
@click="changeVideo(item)"
|
||||
v-for="(item, index) in devList"
|
||||
:key="index"
|
||||
>
|
||||
<img
|
||||
v-if="item.deviceType == 2"
|
||||
src="@/assets/images/icon-video2-white.png"
|
||||
/>
|
||||
<img v-else src="@/assets/images/icon-video-white.png" />
|
||||
{{ item.videoName }}
|
||||
</li>
|
||||
</ul>
|
||||
<div class="placeholderBox" v-else>
|
||||
<img src="@/assets/images/noData2-dark.png" alt="" srcset="">
|
||||
<img src="@/assets/images/noData2-dark.png" alt="" srcset="" />
|
||||
</div>
|
||||
</vue-scroll>
|
||||
</div>
|
||||
<div class="videoBox" v-else>
|
||||
<vue-scroll>
|
||||
<el-collapse v-model="activeNames" style="padding:0 20px">
|
||||
<el-collapse-item :title="item.name" :name="index" v-for="(item,index) in devList" :key="index">
|
||||
<ul v-if="item.list.length>0">
|
||||
<li @click="changeVideo(data)" v-for="(data,index2) in item.list" :key="index2">
|
||||
<img v-if="data.deviceType==2" src="@/assets/images/icon-video2-white.png">
|
||||
<img v-else src="@/assets/images/icon-video-white.png">
|
||||
{{data.videoName}}
|
||||
<el-collapse v-model="activeNames" style="padding: 0 20px">
|
||||
<el-collapse-item
|
||||
:title="item.name"
|
||||
:name="index"
|
||||
v-for="(item, index) in devList"
|
||||
:key="index"
|
||||
>
|
||||
<ul v-if="item.list.length > 0">
|
||||
<li
|
||||
@click="changeVideo(data)"
|
||||
v-for="(data, index2) in item.list"
|
||||
:key="index2"
|
||||
>
|
||||
<img
|
||||
v-if="data.deviceType == 2"
|
||||
src="@/assets/images/icon-video2-white.png"
|
||||
/>
|
||||
<img v-else src="@/assets/images/icon-video-white.png" />
|
||||
{{ data.videoName }}
|
||||
</li>
|
||||
</ul>
|
||||
</el-collapse-item>
|
||||
@ -37,7 +54,8 @@
|
||||
</vue-scroll>
|
||||
</div>
|
||||
</div>
|
||||
<videoModule class="playVideoBox"
|
||||
<videoModule
|
||||
class="playVideoBox"
|
||||
:type="'project'"
|
||||
:value="selectList"
|
||||
:displayBottomMod="false"
|
||||
@ -52,106 +70,110 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { selectProjectVideoListApi,selectUserVideoListApi } from "@/assets/js/api/equipmentCenter/cameraList";
|
||||
import videoModule from "@/components/videoModule/videoModule.vue";
|
||||
import closePage from "@/components/closePage"
|
||||
import {
|
||||
selectProjectVideoListApi,
|
||||
selectUserVideoListApi
|
||||
} from '@/assets/js/api/equipmentCenter/cameraList'
|
||||
import videoModule from '@/components/videoModule/videoModule.vue'
|
||||
import closePage from '@/components/closePage'
|
||||
export default {
|
||||
components: { videoModule,closePage },
|
||||
components: { videoModule, closePage },
|
||||
data() {
|
||||
return {
|
||||
devList: [],
|
||||
selectList:[],
|
||||
dataType:1,
|
||||
selectList: [],
|
||||
dataType: 1,
|
||||
activeNames: [0],
|
||||
screens:{},
|
||||
pluginType:'',
|
||||
};
|
||||
screens: {},
|
||||
pluginType: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// console.dir(window.parent)
|
||||
// console.log(window.parent.document.getElementById("myFrame"), 12312313)
|
||||
if(this.$store.state.userInfo.accountType!=6){
|
||||
if (this.$store.state.userInfo.accountType != 6) {
|
||||
this.loadData()
|
||||
}else{
|
||||
} else {
|
||||
this.loadData2()
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
changeVideo(item){
|
||||
console.log(item, 'xxxxxxxxxx');
|
||||
this.selectList=[item]
|
||||
console.log('右边的值',this.selectList)
|
||||
changeVideo(item) {
|
||||
console.log(item, 'xxxxxxxxxx')
|
||||
this.selectList = [item]
|
||||
console.log('右边的值', this.selectList)
|
||||
},
|
||||
loadData() {
|
||||
selectProjectVideoListApi({
|
||||
projectSn: this.$store.state.projectSn
|
||||
}).then((res) => {
|
||||
var DATA = res.result.videoList;
|
||||
this.devList=DATA
|
||||
console.log('视频的列表',res.result)
|
||||
this.dataType=res.result.type
|
||||
});
|
||||
var DATA = res.result.videoList
|
||||
this.devList = DATA
|
||||
this.selectList = this.devList
|
||||
console.log('视频的列表', res.result)
|
||||
this.dataType = res.result.type
|
||||
})
|
||||
},
|
||||
loadData2() {
|
||||
selectUserVideoListApi({
|
||||
projectSn: this.$store.state.projectSn,
|
||||
userId:this.$store.state.userInfo.userId
|
||||
userId: this.$store.state.userInfo.userId
|
||||
}).then((res) => {
|
||||
var DATA = res.result.videoList;
|
||||
this.devList=DATA
|
||||
this.dataType=res.result.type
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
var DATA = res.result.videoList
|
||||
this.devList = DATA
|
||||
this.dataType = res.result.type
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import "./style.less";
|
||||
.videoListBox{
|
||||
@import './style.less';
|
||||
.videoListBox {
|
||||
float: left;
|
||||
width: 300px;
|
||||
color: white;
|
||||
background-color: #01112d;
|
||||
}
|
||||
.pageTitle{
|
||||
.pageTitle {
|
||||
margin: 12px 0;
|
||||
background-color: #01112d;
|
||||
&::before{
|
||||
&::before {
|
||||
background-color: #00fafa;
|
||||
}
|
||||
|
||||
}
|
||||
.videoBox{
|
||||
.videoBox {
|
||||
background-color: #00091a;
|
||||
height: calc(100% - 52px);
|
||||
margin: 0 15px 0 0;
|
||||
position: relative;
|
||||
li{
|
||||
li {
|
||||
padding: 10px 25px;
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img{
|
||||
img {
|
||||
margin-right: 8px;
|
||||
}
|
||||
&:hover{
|
||||
&:hover {
|
||||
background-color: #003e4b;
|
||||
}
|
||||
}
|
||||
/deep/.el-collapse-item__header,/deep/.el-collapse-item__wrap{
|
||||
/deep/.el-collapse-item__header,
|
||||
/deep/.el-collapse-item__wrap {
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
}
|
||||
/deep/.el-collapse-item__content{
|
||||
/deep/.el-collapse-item__content {
|
||||
color: white;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
/deep/.playVideoBox{
|
||||
background-color: #030303;
|
||||
float: left;
|
||||
width: calc(100% - 300px);
|
||||
/deep/.playVideoBox {
|
||||
background-color: #030303;
|
||||
float: left;
|
||||
width: calc(100% - 300px);
|
||||
}
|
||||
</style>
|
||||
@ -18,170 +18,17 @@
|
||||
:class="select == 1 ? 'width' : select == 2 ? 'width2' : 'width3'"
|
||||
style="position: relative"
|
||||
>
|
||||
<div
|
||||
<!-- <div
|
||||
:id="'video-cover' + item"
|
||||
class="video-cover"
|
||||
:class="{
|
||||
'video-active': selectVideo == item
|
||||
}"
|
||||
></div>
|
||||
<div id="video-container"></div>
|
||||
<!-- <div :id="'video-container' + item"></div> -->
|
||||
></div> -->
|
||||
<div :id="'video-container' + item"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右边操作区 -->
|
||||
<!-- <div class="right">
|
||||
<el-input
|
||||
style="width: 15.625rem; position: relative; left: 1.875rem"
|
||||
placeholder="请输入设备名称"
|
||||
prefix-icon="el-icon-search"
|
||||
v-model="search"
|
||||
clearable
|
||||
></el-input>
|
||||
<div
|
||||
v-if="searchList.length"
|
||||
style="
|
||||
width: 91%;
|
||||
position: relative;
|
||||
left: 1.25rem;
|
||||
height: 50%;
|
||||
overflow: auto;
|
||||
top: 0.3125rem;
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-for="(camera, index) in searchList"
|
||||
@click="selectCamera2(camera)"
|
||||
:key="index"
|
||||
:style="
|
||||
cameraList[selectVideo - 1].ipcSerial == camera.ipcSerial
|
||||
? 'color:#0079e0'
|
||||
: ''
|
||||
"
|
||||
style="width: 100%; height: 2rem; cursor: pointer"
|
||||
>
|
||||
<span
|
||||
v-if="camera.status"
|
||||
style="
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
borderradius: 50%;
|
||||
background: #0cdc8c;
|
||||
display: inline-block;
|
||||
margin-right: 0.9375rem;
|
||||
"
|
||||
></span>
|
||||
<span
|
||||
v-else
|
||||
style="
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
borderradius: 50%;
|
||||
background: #aaa;
|
||||
display: inline-block;
|
||||
margin-right: 0.9375rem;
|
||||
"
|
||||
></span>
|
||||
{{ camera.channelName }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
style="
|
||||
width: 91%;
|
||||
position: relative;
|
||||
left: 1.25rem;
|
||||
height: 50%;
|
||||
overflow: auto;
|
||||
top: 0.3125rem;
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-for="(camera, index) in cameraList"
|
||||
@click="selectCamera(camera, index)"
|
||||
:key="index"
|
||||
:style="
|
||||
cameraList[selectVideo - 1].ipcSerial == camera.ipcSerial
|
||||
? 'color:#0079e0'
|
||||
: ''
|
||||
"
|
||||
style="width: 100%; height: 2rem; cursor: pointer"
|
||||
>
|
||||
<span
|
||||
v-if="camera.status"
|
||||
style="
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
borderradius: 50%;
|
||||
background: #0cdc8c;
|
||||
display: inline-block;
|
||||
margin-right: 0.9375rem;
|
||||
"
|
||||
></span>
|
||||
<span
|
||||
v-else
|
||||
style="
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
borderradius: 50%;
|
||||
background: #aaa;
|
||||
display: inline-block;
|
||||
margin-right: 0.9375rem;
|
||||
"
|
||||
></span>
|
||||
{{ camera.channelName }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="btns">
|
||||
<div class="wheel">
|
||||
<div @click="deviceCapture" class="camera">
|
||||
<i class="el-icon-camera"></i>
|
||||
</div>
|
||||
<div class="top">
|
||||
<div
|
||||
@click="startPTZCtrl('0')"
|
||||
class="triangle triangle-top"
|
||||
></div>
|
||||
</div>
|
||||
<div class="center">
|
||||
<div class="center-left">
|
||||
<div
|
||||
@click="startPTZCtrl('2')"
|
||||
class="triangle triangle-left"
|
||||
></div>
|
||||
</div>
|
||||
<div class="center-right">
|
||||
<div
|
||||
@click="startPTZCtrl('3')"
|
||||
class="triangle triangle-right"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div
|
||||
@click="startPTZCtrl('1')"
|
||||
class="triangle triangle-bottom"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="two-btn">
|
||||
<el-button @click="startPTZCtrl('9')" size="mini" type="primary"
|
||||
>-</el-button
|
||||
>
|
||||
<el-button @click="startPTZCtrl('8')" size="mini" type="primary"
|
||||
>+</el-button
|
||||
>
|
||||
</div>
|
||||
<el-button
|
||||
class="right-btn"
|
||||
@click="showAllScreen"
|
||||
size="small"
|
||||
type="primary"
|
||||
>全屏显示</el-button
|
||||
>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<!-- 底部切屏按钮 -->
|
||||
<div
|
||||
@ -220,18 +67,6 @@
|
||||
/>
|
||||
<img class="rect" v-else src="@/assets/images/videoThree.png" alt />
|
||||
</div>
|
||||
<!-- <div
|
||||
@click="select = 4"
|
||||
style="position: absolute;left:8.25rem;top:94.5vh;cursor: pointer;"
|
||||
>
|
||||
<img
|
||||
class="rect"
|
||||
v-if="select == 4"
|
||||
src="../../assets/images1/nine_1.png"
|
||||
alt
|
||||
/>
|
||||
<img class="rect" v-else src="../../assets/images1/nine.png" alt />
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@ -252,117 +87,89 @@ export default {
|
||||
selectVideoFirst: 1,
|
||||
search: '', // 搜索框
|
||||
searchList: [],
|
||||
devList: []
|
||||
devList: [],
|
||||
demoList: [],
|
||||
sceencount: 1, // 当前窗口是几分屏（1、4、9）
|
||||
indextest: 0
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
//向父组件取的数据
|
||||
this.devList = this.$props.ysyParams
|
||||
console.log('this.$props.ysyParams', this.$props.ysyParams)
|
||||
this.ysyBtn()
|
||||
this.ysyBtn(this.devList, this.indextest, this.sceencount)
|
||||
},
|
||||
watch: {
|
||||
// 选择显示video数量
|
||||
select(value) {
|
||||
this.select = value
|
||||
this.cameraList.forEach((item, index) => {
|
||||
if (value == 1) {
|
||||
if (item.code == 200)
|
||||
item.player.reSize(
|
||||
this.$refs.videoBox.offsetWidth,
|
||||
this.$refs.videoBox.offsetHeight
|
||||
)
|
||||
} else if (value == 2) {
|
||||
if (item.code == 200)
|
||||
item.player.reSize(
|
||||
this.$refs.videoBox.offsetWidth / 2 - 2,
|
||||
this.$refs.videoBox.offsetHeight / 2 - 2
|
||||
)
|
||||
} else if (value == 3) {
|
||||
if (item.code == 200)
|
||||
item.player.reSize(
|
||||
this.$refs.videoBox.offsetWidth / 3,
|
||||
this.$refs.videoBox.offsetHeight / 3
|
||||
)
|
||||
}
|
||||
// else {
|
||||
// if (item.code == 200)
|
||||
// item.player.reSize(
|
||||
// this.$refs.videoBox.offsetWidth / 4,
|
||||
// this.$refs.videoBox.offsetHeight / 4
|
||||
// );
|
||||
// }
|
||||
})
|
||||
ysyParams: function (a, b) {
|
||||
console.log('父组件传递的数据 ysyParams :', a)
|
||||
this.indextest++
|
||||
console.log('父组件传递的数据 this.devList :', this.devList)
|
||||
|
||||
var index = this.devList.findIndex((item) => item.url == a[0].url)
|
||||
this.selectVideoFirst = index + 1
|
||||
// this.select = 1
|
||||
// this.devList.forEach((item, index) => {
|
||||
// if (item.url == a[0].url) {
|
||||
// item.player.reSize(
|
||||
// this.$refs.videoBox.offsetWidth,
|
||||
// this.$refs.videoBox.offsetHeight
|
||||
// )
|
||||
// }
|
||||
// })
|
||||
},
|
||||
search(value) {
|
||||
if (value) {
|
||||
this.searchList = this.cameraList.filter(
|
||||
(item) => item.channelName.indexOf(value) > -1
|
||||
)
|
||||
} else {
|
||||
this.searchList = []
|
||||
}
|
||||
select: function (value, b) {
|
||||
this.indextest = 0
|
||||
console.log('选择显示video数量 :', this.devList)
|
||||
this.select = value
|
||||
this.selectVideoFirst = 1
|
||||
this.devList.forEach((item, index) => {
|
||||
// item.player.stop()
|
||||
if (value == 1) {
|
||||
item.player.reSize(
|
||||
this.$refs.videoBox.offsetWidth,
|
||||
this.$refs.videoBox.offsetHeight
|
||||
)
|
||||
} else if (value == 2) {
|
||||
item.player.reSize(
|
||||
this.$refs.videoBox.offsetWidth / 2,
|
||||
this.$refs.videoBox.offsetHeight / 2
|
||||
)
|
||||
} else if (value == 3) {
|
||||
item.player.reSize(
|
||||
this.$refs.videoBox.offsetWidth / 3,
|
||||
this.$refs.videoBox.offsetHeight / 3
|
||||
)
|
||||
}
|
||||
console.log('==========')
|
||||
})
|
||||
}
|
||||
// 选择显示video数量
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
this.players.forEach((item) => {
|
||||
item.stop()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
ysyBtn() {
|
||||
var EZOPENDemo
|
||||
window.EZOPENDemo = EZOPENDemo
|
||||
const ezopenInit = () => {
|
||||
EZOPENDemo = new EZUIKit.EZUIKitPlayer({
|
||||
id: 'video-container',
|
||||
// id: `video-container${index + 1}`,
|
||||
width: this.$refs.videoBox.offsetWidth / 3,
|
||||
height: this.$refs.videoBox.offsetHeight / 3,
|
||||
template: 'pcLive',
|
||||
// AppKey: 'd6772be410d349c795b3b002a26694cd',
|
||||
url: this.devList.url,
|
||||
accessToken: this.devList.token,
|
||||
// url: 'ezopen://open.ys7.com/E61616447/1.hd.live',
|
||||
// accessToken:
|
||||
// 'at.are9lpci40jur1cm8mteein3bpweoopp-6t6hpg4e24-1463cyp-fxrmaa7or',
|
||||
template: 'simple', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版; theme-可配置主题；
|
||||
header: ['capturePicture'], // 如果templete参数不为simple,该字段将被覆盖 // 加载插件，talk-对讲
|
||||
footer: ['hd', 'fullScreen'], // 如果template参数不为simple,该字段将被覆盖
|
||||
fullScreenCallBack: (data) => console.log('全屏回调', data) // 如果template参数不为simple, 无法获取
|
||||
// 视频播放数据 视频容器id（所在窗口） 当前窗口是几分屏（1、4、9）
|
||||
ysyBtn(item) {
|
||||
item.forEach((item2, index) => {
|
||||
console.log('item :', item2 + 'index', index)
|
||||
var player = new EZUIKit.EZUIKitPlayer({
|
||||
autoplay: true,
|
||||
audio: '0',
|
||||
id: `video-container${index + 1}`, // 视频容器ID
|
||||
accessToken: item2.token,
|
||||
url: item2.url, // 初始化写死一个离线或者找不到的设备，避免初始化无法创建播放器；
|
||||
template: 'simple',
|
||||
width: this.$refs.videoBox.offsetWidth,
|
||||
height: this.$refs.videoBox.offsetHeight
|
||||
})
|
||||
}
|
||||
ezopenInit()
|
||||
item2.player = player
|
||||
})
|
||||
}
|
||||
// 渲染视频播放
|
||||
// StructureEZUIKitPlayer(item, index, select) {
|
||||
// if (select) {
|
||||
// var player = new EZUIKit.EZUIKitPlayer({
|
||||
// autoplay: false,
|
||||
// audio: '0',
|
||||
// id: 'video-container', // 视频容器ID
|
||||
// accessToken: this.devList.token,
|
||||
// url: this.devList.url, // 初始化写死一个离线或者找不到的设备，避免初始化无法创建播放器；
|
||||
// template: 'simple',
|
||||
// width: this.$refs.videoBox.offsetWidth / 3,
|
||||
// height: this.$refs.videoBox.offsetHeight / 3
|
||||
// })
|
||||
// // this.selectPlayer.player = player
|
||||
// } else {
|
||||
// var player = new EZUIKit.EZUIKitPlayer({
|
||||
// autoplay: false,
|
||||
// audio: '0',
|
||||
// id: `video-container${index + 1}`, // 视频容器ID
|
||||
// accessToken: this.devList.token,
|
||||
// url: this.devList.url, // 初始化写死一个离线或者找不到的设备，避免初始化无法创建播放器；
|
||||
// template: 'simple',
|
||||
// width: this.$refs.videoBox.offsetWidth / 3,
|
||||
// height: this.$refs.videoBox.offsetHeight / 3
|
||||
// })
|
||||
// item.player = player
|
||||
// }
|
||||
// this.select = 3
|
||||
// }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -422,44 +229,6 @@ export default {
|
||||
overflow: hidden;
|
||||
left: 0;
|
||||
}
|
||||
// .right {
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// justify-content: space-between;
|
||||
// background: rgb(255, 255, 255);
|
||||
// width: 20%;
|
||||
// height: 100%;
|
||||
// top: 0;
|
||||
|
||||
// // border: .0625rem solid rgb(22, 21, 27);
|
||||
// position: absolute;
|
||||
// right: 0;
|
||||
// .right1 {
|
||||
// width: 100%;
|
||||
// text-align: start;
|
||||
// line-height: 2.5rem;
|
||||
// color: #6e727a;
|
||||
// margin: 0.3125rem auto;
|
||||
// height: 2.5rem;
|
||||
// padding: 0 1.25rem;
|
||||
// cursor: pointer;
|
||||
// }
|
||||
// .right1:hover {
|
||||
// background: #1393fc;
|
||||
// color: rgb(255, 255, 255);
|
||||
// border: none;
|
||||
// }
|
||||
// .right2 {
|
||||
// width: 100%;
|
||||
// padding: 0 1.25rem;
|
||||
// height: 2.5rem;
|
||||
// margin: 0.3125rem auto;
|
||||
// line-height: 2.5rem;
|
||||
// background: #1393fc;
|
||||
// color: rgb(255, 255, 255);
|
||||
// cursor: pointer;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user