850 lines
26 KiB
Vue
850 lines
26 KiB
Vue
<template>
|
||
<!-- 下拉框选择视频，需传入视频列表 -->
|
||
<div class="fullHeight videoOverview" id="videoOverview">
|
||
<div v-show="showPlaybacks" class="videoTop">
|
||
<span
|
||
class="videoType"
|
||
:class="{ active: videoType == 1 }"
|
||
@click="videoType = 1"
|
||
>{{ $t('message.videoManage.live') }}</span
|
||
>
|
||
<span
|
||
v-show="showPlaybacks"
|
||
class="videoType"
|
||
:class="{ active: videoType == 2 }"
|
||
@click="
|
||
videoType = 2
|
||
winNum = 1
|
||
activeWinIndex = 1
|
||
"
|
||
>{{ $t('message.videoManage.playback') }}</span
|
||
>
|
||
</div>
|
||
<leCheng
|
||
v-if="pluginType == 'lecheng'"
|
||
: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"
|
||
:isIframe="isIframe"
|
||
:devList="devList"
|
||
:class="{
|
||
isDockingToWoer: isDockingToWoer,
|
||
isLongguangIframe: isIframe,
|
||
isFullScreen: isFullScreen,
|
||
}"
|
||
:style="{ left: worMenuWidth + 'px' }"
|
||
></iscPlugin>
|
||
<!-- 回放插件 -->
|
||
<Back v-else-if="pluginType == 'isc' && videoType == 2" :devList="devList">
|
||
</Back>
|
||
<div v-else-if="pluginType == 'xiongmai'">
|
||
<div id="wrapper" style="width: 1570px; height: 830px"></div>
|
||
</div>
|
||
<div
|
||
v-else
|
||
:class="
|
||
!bottomMod
|
||
? 'oneVideoContent videoContent' + winNum
|
||
: 'videoContent videoContent' + winNum
|
||
"
|
||
>
|
||
<div
|
||
class="videoItem"
|
||
v-for="item in initDivNum"
|
||
:key="item"
|
||
:class="{ active: activeWinIndex == item }"
|
||
@click="activeWinIndex = item"
|
||
v-show="item <= winNum"
|
||
>
|
||
<!-- <ysyPlayAndPlayback
|
||
:ref="'ysy' + item"
|
||
v-if="pluginType == 'ysy'"
|
||
:ysyParams="ysyParams"
|
||
></ysyPlayAndPlayback> -->
|
||
|
||
<ckPlayer
|
||
@selectWin="selectWin"
|
||
:showSelectBtn="true"
|
||
v-if="pluginType == 'ckPlayer'"
|
||
:url="urls[item]"
|
||
:index="item"
|
||
></ckPlayer>
|
||
<div class="videoInner2" v-if="pluginType == 'videojs'">
|
||
<div class="top">
|
||
<span class="winNumName"
|
||
>{{ $t('message.videoManage.video')
|
||
}}{{ $t('message.videoManage.window') }}{{ item }}</span
|
||
>
|
||
<img
|
||
src="@/assets/images/overview3/close.png"
|
||
class="close"
|
||
@click="clocseVideo(item)"
|
||
/>
|
||
</div>
|
||
<div class="noVideoBox noVideoBox1">
|
||
<img src="@/assets/images/overview3/noVideo.png" class="close" />
|
||
<p>
|
||
{{ $t('message.videoManage.no')
|
||
}}{{ $t('message.videoManage.video') }}
|
||
</p>
|
||
</div>
|
||
<div class="noVideoBox noVideoBox2" style="display: none">
|
||
<img
|
||
src="@/assets/images/longguang/loading.png"
|
||
class="close"
|
||
v-if="company == 'longguang'"
|
||
/>
|
||
<img
|
||
src="@/assets/images/overview3/loading.png"
|
||
class="close"
|
||
v-else
|
||
/>
|
||
<p>
|
||
{{ $t('message.videoManage.video')
|
||
}}{{ $t('message.videoManage.loading') }}...
|
||
</p>
|
||
</div>
|
||
<div class="videoInner">
|
||
<video
|
||
width="100%"
|
||
height="100%"
|
||
:id="'myPlayer' + item"
|
||
autoplay="autoplay"
|
||
class="videoClass"
|
||
controls="controls"
|
||
>
|
||
<source type="application/x-mpegURL" src />
|
||
</video>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
@mousemove="DisplayCoord"
|
||
@click="getPlaybackTime"
|
||
class="timeLineBox"
|
||
id="timeLineBox"
|
||
>
|
||
<div class="timeItem" v-for="item in 24" :key="item">
|
||
<span class="time" v-show="item != 24">{{ item }}:00</span>
|
||
</div>
|
||
<div class="mouseLine" id="mouseLine"></div>
|
||
</div>
|
||
<div class="videoControl" v-if="bottomMod">
|
||
<div>
|
||
<!-- <el-autocomplete v-if="!hiddenSelectBox"
|
||
class="selectDev"
|
||
size="medium"
|
||
popper-class="my-autocomplete"
|
||
v-model="selectDev"
|
||
:fetch-suggestions="querySearch"
|
||
placeholder="请选择视频"
|
||
@select="handleSelect"
|
||
@focus="selectDev=''"
|
||
>
|
||
<i class="el-icon-caret-bottom el-input__icon" slot="suffix"></i>
|
||
<template slot-scope="{ item }">
|
||
<div class="devDetail" :class="{'active':item.winNum!=0}">
|
||
<div class="name">{{ item.value }}</div>
|
||
<span
|
||
class="addr"
|
||
v-show="item.winNum!=0"
|
||
>{{$t('message.videoManage.video')}}{{$t('message.videoManage.window')}}{{ item.winNum }}{{$t('message.videoManage.playing')}}......</span>
|
||
</div>
|
||
</template>
|
||
</el-autocomplete> -->
|
||
<span
|
||
v-show="showPlaybacks"
|
||
class="videoType"
|
||
:class="{ active: videoType == 1 }"
|
||
@click="videoType = 1"
|
||
>{{ $t('message.videoManage.live') }}</span
|
||
>
|
||
<span
|
||
v-show="showPlaybacks"
|
||
class="videoType"
|
||
:class="{ active: videoType == 2 }"
|
||
@click="
|
||
videoType = 2
|
||
winNum = 1
|
||
activeWinIndex = 1
|
||
"
|
||
>{{ $t('message.videoManage.playback') }}</span
|
||
>
|
||
</div>
|
||
<div class="historyDate" v-show="videoType == 2">
|
||
<img
|
||
src="@/assets/images/overview3/forward.png"
|
||
class="forward forward-l"
|
||
srcset
|
||
/>
|
||
<i class="el-icon-caret-left"></i>
|
||
<el-date-picker
|
||
size="medium"
|
||
class="selectDev"
|
||
v-model="time"
|
||
type="datetime"
|
||
placeholder="选择日期时间"
|
||
value-format="yyyy-MM-dd hh:mm:ss"
|
||
></el-date-picker>
|
||
<i class="el-icon-caret-right"></i>
|
||
<img
|
||
src="@/assets/images/overview3/forward.png"
|
||
class="forward"
|
||
srcset
|
||
/>
|
||
</div>
|
||
<div class="operateBar">
|
||
<i
|
||
v-show="videoType == 1 && showMoreWin"
|
||
class="one"
|
||
:class="{ active: winNum == 1 }"
|
||
@click="changeWinNum(1)"
|
||
></i>
|
||
<i
|
||
v-show="videoType == 1 && showMoreWin && videoWinNum > 1"
|
||
class="four"
|
||
:class="{ active: winNum == 4 }"
|
||
@click="changeWinNum(4)"
|
||
></i>
|
||
<i
|
||
v-show="videoType == 1 && showMoreWin && videoWinNum > 4"
|
||
class="nine"
|
||
:class="{ active: winNum == 9 }"
|
||
@click="changeWinNum(9)"
|
||
></i>
|
||
<i v-show="showCaptrue && videoWinNum > 4" class="img"></i>
|
||
<i
|
||
v-show="videoType == 1 && showControl && videoWinNum > 4"
|
||
class="control"
|
||
:class="{ active: showControlBox }"
|
||
@click="showControlBox = !showControlBox"
|
||
></i>
|
||
</div>
|
||
</div>
|
||
<div class="controlBox" v-show="showControlBox">
|
||
<div class="top">
|
||
<img src="@/assets/images/overview3/controlBG.png" alt srcset />
|
||
<img src="@/assets/images/overview3/arrow.png" class="arrow arrow1" />
|
||
<img src="@/assets/images/overview3/arrow.png" class="arrow arrow2" />
|
||
<img src="@/assets/images/overview3/arrow.png" class="arrow arrow3" />
|
||
<img src="@/assets/images/overview3/arrow.png" class="arrow arrow4" />
|
||
<img src="@/assets/images/overview3/arrow.png" class="arrow arrow5" />
|
||
<img src="@/assets/images/overview3/arrow.png" class="arrow arrow6" />
|
||
<img src="@/assets/images/overview3/arrow.png" class="arrow arrow7" />
|
||
<img src="@/assets/images/overview3/arrow.png" class="arrow arrow8" />
|
||
</div>
|
||
<div class="bar">
|
||
<span>{{ $t('message.videoManage.changeTimes') }}</span>
|
||
<el-slider class="slider" v-model="bar1"></el-slider>
|
||
</div>
|
||
<div class="bar">
|
||
<span>{{ $t('message.videoManage.focus') }}</span>
|
||
<el-slider class="slider" v-model="bar2"></el-slider>
|
||
</div>
|
||
<div class="bar">
|
||
<span>{{ $t('message.videoManage.aperture') }}</span>
|
||
<el-slider class="slider" v-model="bar3"></el-slider>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import YsyNew from '@/views/projectFront/videoManage/ysyNew.vue'
|
||
import ysyPlayAndPlayback from './ysyPlayAndPlayback'
|
||
import iscPlugin from './isc_plugin/isc_plugin'
|
||
import ckPlayer from './ckPlayer'
|
||
import leCheng from './leCheng'
|
||
import Back from './playBack/playBack'
|
||
import Live from '@/plugins/screens'
|
||
import {
|
||
resizeFn,
|
||
setOffset,
|
||
hidePluginWindow,
|
||
showPluginWindow
|
||
} from './isc_plugin/video_isc_plugin.js'
|
||
import { getVideoItemInfoApi } from '@/assets/js/api/equipmentCenter/cameraList'
|
||
import { projectVideoConfigListApi } from '@/assets/js/api/equipmentCenter/cameraList'
|
||
export default {
|
||
props: [
|
||
'value',
|
||
'displayBottomMod',
|
||
'winNumBer',
|
||
'autoplay',
|
||
'hiddenSelectBox',
|
||
'type',
|
||
'scrrenPosition',
|
||
'xxx',
|
||
'showPlayback'
|
||
],
|
||
components: {
|
||
ysyPlayAndPlayback,
|
||
ckPlayer,
|
||
leCheng,
|
||
iscPlugin,
|
||
Back,
|
||
YsyNew
|
||
},
|
||
watch: {
|
||
//监听value的变化，进行相应的操作即可
|
||
value: function (a, b) {
|
||
console.log('新的值', a)
|
||
this.devList = a
|
||
if (this.isDockingToWoer) {
|
||
this.pluginType = 'isc'
|
||
} else {
|
||
this.getPlayType()
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
currentVideoTypeDetail: '',
|
||
screens: null,
|
||
bottomMod: false, //是否显示 底部 选择框 和 窗口选择器 false 不显示； true 显示
|
||
videoWinNum: 1, // 窗口选择器 数量 1 1个窗口 4 4个窗口 9 九个窗口
|
||
showAutoplay: false, //自动播放
|
||
infor: '',
|
||
devList: [],
|
||
videoType: 1,
|
||
selectDev: '',
|
||
winNum: 1,
|
||
activeWinIndex: 1,
|
||
showControlBox: false,
|
||
bar1: 20,
|
||
bar2: 20,
|
||
bar3: 20,
|
||
startTime: '',
|
||
endTime: '',
|
||
locationValue: '',
|
||
videoObject1: '',
|
||
videoObject2: '',
|
||
videoObject3: '',
|
||
videoObject4: '',
|
||
videoObject5: '',
|
||
videoObject6: '',
|
||
videoObject7: '',
|
||
videoObject8: '',
|
||
videoObject9: '',
|
||
showMoreWin: true, //是否显示多窗口切换
|
||
showCaptrue: false, //是否显示截图按钮
|
||
showControl: false, //是否显示控球按钮
|
||
showPlaybacks: false, //是否显示视频回放按钮
|
||
pluginType: '', //ysy:萤石云 videojs ckPlayer lecheng isc xiongmai
|
||
initDivNum: 9,
|
||
ysyParams: [],
|
||
urls: ['', '', '', '', '', '', '', '', ''],
|
||
lcToken: '',
|
||
isDockingToWoer: false,
|
||
worMenuWidth: 0, //用于和沃尔对接时定位插件
|
||
company: '',
|
||
isIframe: false,
|
||
isFullScreen: false
|
||
}
|
||
},
|
||
destroy() {
|
||
hidePluginWindow()
|
||
},
|
||
created() {
|
||
console.log('用的是这个组件吗')
|
||
this.company = COMPANY
|
||
this.devList = this.$props.value
|
||
|
||
// this.bottomMod = this.$props.displayBottomMod;
|
||
this.videoWinNum = this.$props.winNumBer
|
||
this.showAutoplay = this.$props.autoplay
|
||
|
||
this.showCaptrue = this.$props.showCaptrue
|
||
this.showControl = this.$props.showControl
|
||
this.showPlaybacks = this.$props.showPlayback
|
||
console.log('当前显示回放不', this.showPlaybacks)
|
||
// if(this.$props.hiddenSelectBox){
|
||
// this.hiddenSelectBox = this.$props.hiddenSelectBox;
|
||
// }
|
||
this.isDockingToWoer = isDockingToWoer
|
||
// lgzbdp
|
||
if (window.localStorage.getItem('isIframe')) {
|
||
if (window.localStorage.getItem('isIframe') == '1') {
|
||
this.isIframe = true
|
||
// this.$nextTick(()=>{
|
||
// setOffset(2180,360)
|
||
// })
|
||
}
|
||
console.log(window.localStorage.getItem('isIframe'))
|
||
}
|
||
if (this.isIframe && this.scrrenPosition) {
|
||
this.worMenuWidth = this.scrrenPosition
|
||
// this.worMenuWidth = 2160
|
||
}
|
||
if (this.isDockingToWoer) {
|
||
this.worMenuWidth = parseInt(document.body.clientWidth) * 0.025 + 10
|
||
// this.pluginType='isc'
|
||
} else {
|
||
this.getPlayType()
|
||
}
|
||
},
|
||
|
||
mounted() {
|
||
// 广西联通 处理回放按钮
|
||
if (this.pluginType == 'ysy' || this.pluginType == 'isc') {
|
||
console.log('是这里不')
|
||
this.showMoreWin = false
|
||
this.showCaptrue = false
|
||
this.showControl = false
|
||
this.showPlaybacks = true //回放
|
||
this.bottomMod = false
|
||
this.initDivNum = 1
|
||
} else if (this.pluginType == 'videojs') {
|
||
this.$nextTick(() => {
|
||
this.initVideo()
|
||
})
|
||
} else if (this.pluginType == 'xiongmai') {
|
||
this.bottomMod = false
|
||
} else if (this.pluginType == 'lecheng') {
|
||
this.bottomMod = false
|
||
}
|
||
// window.addEventListener('keydown',this.fullScreen)
|
||
// console.log(document.getElementById('videoOverview'))
|
||
},
|
||
destroyed() {
|
||
if (this.pluginType == 'videojs') {
|
||
for (let index = 1; index <= 9; index++) {
|
||
this['videoObject' + index].dispose()
|
||
}
|
||
}
|
||
window.removeEventListener('keydown', this.fullScreen)
|
||
},
|
||
methods: {
|
||
//查询项目各类型的视频配置信息
|
||
getProjectVideoConfigList() {
|
||
projectVideoConfigListApi({
|
||
projectSn: this.$store.state.projectSn
|
||
}).then((res) => {
|
||
this.infor = res.result
|
||
// Live.login(
|
||
// this.infor.appId,
|
||
// this.infor.appSecret,
|
||
// this.infor.account,
|
||
// this.infor.password
|
||
// ).then((res) => {
|
||
// // 配置参数加载视频
|
||
// this.screens.setOptions(
|
||
// /* 这里传入配置对象 */ {
|
||
// deviceId: "1202291000447",
|
||
// channelNum: 1,
|
||
// streamType: 0,
|
||
// mediaType: "FLV",
|
||
// recordTimeStart: "2022-07-16 04:00:00",
|
||
// recordTimeEnd: "2022-07-16 06:00:00",
|
||
// source: "device",
|
||
// isDownload: 0,
|
||
// tokenType: "Dynamic",
|
||
// expireTime: "0",
|
||
// https: false,
|
||
// }
|
||
// );
|
||
// });
|
||
})
|
||
},
|
||
fullScreen(e) {
|
||
var e = event || window.event || arguments.callee.caller.arguments[0]
|
||
if (e && e.keyCode == 122) {
|
||
//捕捉F11键盘动作
|
||
console.log(e.keyCode)
|
||
this.isFullScreen = !this.isFullScreen
|
||
if (this.isFullScreen) {
|
||
resizeFn(1)
|
||
} else {
|
||
// hidePluginWindow()
|
||
// showPluginWindow()
|
||
}
|
||
// setOffset(2180,360)
|
||
}
|
||
},
|
||
//改变窗口分割数量
|
||
changeWinNum(num) {
|
||
this.winNum = num
|
||
this.activeWinIndex = 1
|
||
console.log('this.activeWinIndex', this.activeWinIndex)
|
||
if (this.pluginType == 'ysy') {
|
||
this.$refs.ysy1.init2('')
|
||
// this.$refs['ysy'+this.activeWinIndex].init()
|
||
}
|
||
},
|
||
//判断视频播放方式
|
||
getPlayType() {
|
||
console.log(this.devList, 123)
|
||
if (this.devList.length == 0) {
|
||
return
|
||
}
|
||
//videoType 1萤石云，2乐橙，3ISC，4大华，5宇视，6国标，7国密
|
||
switch (Number(this.devList[0].videoType)) {
|
||
case 1:
|
||
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
|
||
switch (Number(videoType)) {
|
||
case 1:
|
||
if (playType == 1 || playType == 2) {
|
||
this.bottomMod = true
|
||
this.pluginType = 'ckPlayer'
|
||
// console.log(this.devList[0].url)
|
||
this.urls[this.activeWinIndex] = this.devList[0].url
|
||
// console.log(this.urls)
|
||
// this.bottomMod=true
|
||
}
|
||
if (playType == 3 || playType == 4) {
|
||
console.log('this.bottomMod', this.bottomMod)
|
||
this.bottomMod = true
|
||
this.pluginType = 'videojs'
|
||
this.$nextTick(() => {
|
||
this.initVideo()
|
||
this.playVideoWithVideojs(this.devList[0].url)
|
||
})
|
||
}
|
||
if (playType == 5 || playType == 6) {
|
||
this.bottomMod = false
|
||
|
||
this.pluginType = 'ysy'
|
||
}
|
||
break
|
||
case 2:
|
||
this.pluginType = 'videojs'
|
||
break
|
||
case 3:
|
||
this.pluginType = 'videojs'
|
||
break
|
||
case 4:
|
||
this.pluginType = 'videojs'
|
||
break
|
||
case 5:
|
||
this.pluginType = 'videojs'
|
||
break
|
||
case 6:
|
||
this.pluginType = 'videojs'
|
||
break
|
||
}
|
||
break
|
||
case 2:
|
||
// this.urls.push({
|
||
// url:this.devList[0].url,
|
||
// kitToken:this.devList[0].accessToken
|
||
// })
|
||
this.bottomMod = false
|
||
// if(this.$props.type=='company'){
|
||
// this.bottomMod=false
|
||
// }else{
|
||
// this.bottomMod=true
|
||
// }
|
||
this.$nextTick(() => {
|
||
this.initVideo()
|
||
this.devList[0].winNum = 1
|
||
this.playVideoWithVideojs(this.devList[0].url)
|
||
})
|
||
this.pluginType = 'videojs'
|
||
break
|
||
case 3:
|
||
this.bottomMod = false
|
||
// if(this.$props.type=='company'){
|
||
// this.bottomMod=false
|
||
// }else{
|
||
// this.bottomMod=true
|
||
// }
|
||
this.pluginType = 'isc'
|
||
break
|
||
case 7:
|
||
this.bottomMod = false
|
||
this.pluginType = 'xiongmai'
|
||
}
|
||
console.log('当前点击的类型', this.pluginType)
|
||
setTimeout(() => {
|
||
if (
|
||
document.getElementById('wrapper') != null &&
|
||
this.screens == null
|
||
) {
|
||
this.screens = Live.init(document.getElementById('wrapper'))
|
||
}
|
||
let configInfo = localStorage.getItem('configInfo')
|
||
if (configInfo) {
|
||
configInfo = configInfo && JSON.parse(configInfo)
|
||
if (configInfo.length < 0) {
|
||
this.getProjectVideoConfigList()
|
||
} else {
|
||
// this.infor = configInfo
|
||
// Live.login(
|
||
// this.infor.appId,
|
||
// this.infor.appSecret,
|
||
// this.infor.account,
|
||
// this.infor.password
|
||
// ).then((res) => {
|
||
// this.screens.setOptions(
|
||
// /* 这里传入配置对象 */ {
|
||
// deviceId: '1202291000447',
|
||
// channelNum: 1,
|
||
// streamType: 0,
|
||
// mediaType: 'FLV',
|
||
// recordTimeStart: '2022-07-16 04:00:00',
|
||
// recordTimeEnd: '2022-07-16 06:00:00',
|
||
// source: 'device',
|
||
// isDownload: 0,
|
||
// tokenType: 'Dynamic',
|
||
// expireTime: '0',
|
||
// https: false
|
||
// }
|
||
// )
|
||
// })
|
||
}
|
||
} else {
|
||
this.getProjectVideoConfigList()
|
||
}
|
||
}, 100)
|
||
},
|
||
selectWin(data) {
|
||
this.activeWinIndex = data
|
||
},
|
||
//初始化视频插件
|
||
initVideo() {
|
||
console.log(this.devList)
|
||
//
|
||
for (let index = 1; index <= 9; index++) {
|
||
if (this['videoObject' + index] == '') {
|
||
this['videoObject' + index] = videojs(
|
||
'myPlayer' + index,
|
||
{
|
||
textTrackDisplay: false,
|
||
controlBar: false,
|
||
autoplay: this.showAutoplay,
|
||
muted: this.showAutoplay ? true : false
|
||
},
|
||
function onPlayerReady() {
|
||
this.on('error', function () {
|
||
// 报错信息
|
||
var mediaError = this.error()
|
||
console.log('mediaError', mediaError)
|
||
})
|
||
}
|
||
)
|
||
|
||
if (!this.bottomMod) {
|
||
this['videoObject' + 1].src([
|
||
{
|
||
type: 'application/x-mpegURL',
|
||
src: this.devList[0].url
|
||
}
|
||
])
|
||
this['videoObject' + 1].play()
|
||
}
|
||
}
|
||
}
|
||
},
|
||
querySearch(queryString, cb) {
|
||
var restaurants = this.devList
|
||
var results = queryString
|
||
? restaurants.filter(this.createFilter(queryString))
|
||
: restaurants
|
||
// 调用 callback 返回建议列表的数据
|
||
cb(results)
|
||
},
|
||
createFilter(queryString) {
|
||
return (restaurant) => {
|
||
return (
|
||
restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
|
||
0
|
||
)
|
||
}
|
||
},
|
||
clocseVideo(item) {
|
||
// console.log(item);
|
||
var obj = this['videoObject' + item]
|
||
// console.log(obj);
|
||
if (obj) {
|
||
this['videoObject' + item].dispose()
|
||
this.devList.forEach((element) => {
|
||
if (element.winNum == item) {
|
||
element.winNum = 0
|
||
}
|
||
})
|
||
// console.log(this.devList);
|
||
}
|
||
document.getElementsByClassName('noVideoBox2')[item - 1].style.display =
|
||
'none'
|
||
document.getElementsByClassName('noVideoBox1')[item - 1].style.display =
|
||
'block'
|
||
this.$emit('closeVideoDialog', false)
|
||
},
|
||
handleSelect(item) {
|
||
console.log(item)
|
||
|
||
this.urls[this.activeWinIndex] = item.url
|
||
this.devList.forEach((element) => {
|
||
if (element.value == item.value) {
|
||
element.winNum = this.activeWinIndex
|
||
}
|
||
if (
|
||
element.value != item.value &&
|
||
element.winNum == this.activeWinIndex
|
||
) {
|
||
element.winNum = 0
|
||
}
|
||
})
|
||
console.log(this.devList)
|
||
this.selectDev = ''
|
||
if (this.pluginType == 'ysy') {
|
||
this.getVideo(item)
|
||
}
|
||
if (this.pluginType != 'videojs') {
|
||
return
|
||
}
|
||
// var obj = this["videoObject" + this.activeWinIndex];
|
||
// console.log(obj)
|
||
this.playVideoWithVideojs(item.url)
|
||
},
|
||
//使用videojs播放视频
|
||
playVideoWithVideojs(url) {
|
||
var el = document.getElementById('myPlayer' + this.activeWinIndex)
|
||
if (!el) {
|
||
var pEl =
|
||
document.getElementsByClassName('videoInner')[this.activeWinIndex - 1]
|
||
var idName = 'myPlayer' + this.activeWinIndex
|
||
var div2 =
|
||
'<video width="100%" height="100%" id="' +
|
||
idName +
|
||
'" autoplay="autoplay" class="videoClass" controls="controls" > <source type="application/x-mpegURL" src /> </video>'
|
||
pEl.innerHTML = div2
|
||
this['videoObject' + this.activeWinIndex] = videojs(
|
||
'myPlayer' + this.activeWinIndex,
|
||
{
|
||
textTrackDisplay: false,
|
||
controlBar: false
|
||
}
|
||
)
|
||
}
|
||
this['videoObject' + this.activeWinIndex].src([
|
||
{
|
||
type: 'application/x-mpegURL',
|
||
src: url
|
||
}
|
||
])
|
||
this['videoObject' + this.activeWinIndex].play()
|
||
|
||
document.getElementsByClassName('noVideoBox1')[
|
||
this.activeWinIndex - 1
|
||
].style.display = 'none'
|
||
document.getElementsByClassName('noVideoBox2')[
|
||
this.activeWinIndex - 1
|
||
].style.display = 'block'
|
||
},
|
||
getX(obj) {
|
||
var parObj = obj
|
||
var left = obj.offsetLeft
|
||
while ((parObj = parObj.offsetParent)) {
|
||
left += parObj.offsetLeft
|
||
}
|
||
return left
|
||
},
|
||
getY(obj) {
|
||
var parObj = obj
|
||
var top = obj.offsetTop
|
||
while ((parObj = parObj.offsetParent)) {
|
||
top += parObj.offsetTop
|
||
}
|
||
return top
|
||
},
|
||
getPlaybackTime(event) { },
|
||
DisplayCoord(event) {
|
||
var top, left, oDiv
|
||
// oDiv = document.getElementById("timeLineBox");
|
||
// top = getY(oDiv);
|
||
// left = this.getX(oDiv);
|
||
// + document.documentElement.scrollLeft
|
||
console.log(event.clientX)
|
||
document.getElementById('mouseLine').style.left = event.clientX - 1 + 'px'
|
||
// document.getElementById("mp_y").innerHTML = (event.clientY - top + document.documentElement.scrollTop) - 2 +
|
||
// "px";
|
||
},
|
||
//获取视频播放url
|
||
getVideo(item) {
|
||
//videoType 1萤石云，2乐橙，3ISC，4大华，5宇视，6国标
|
||
//playType 播放方式，1高清RTMP,2流畅RTMP,3高清HLS,4流畅HLS,5高清轻量级插件，6流畅轻量级插件
|
||
getVideoItemInfoApi({
|
||
itemId: item.itemId
|
||
}).then((res) => {
|
||
var result = res.result
|
||
var url = ''
|
||
if (item.videoType == 1) {
|
||
switch (Number(result.projectVideoConfig.playType)) {
|
||
case 1:
|
||
url = result.videoInfo.rtmpHd
|
||
break
|
||
case 2:
|
||
url = result.videoInfo.rtmp
|
||
break
|
||
case 3:
|
||
url = result.videoInfo.hdFlvAddress
|
||
break
|
||
case 4:
|
||
url = result.videoInfo.flvAddress
|
||
break
|
||
case 5:
|
||
url = `ezopen://open.ys7.com/${result.videoInfo.deviceSerial}/${result.videoInfo.channelNo}.hd.live`
|
||
break
|
||
case 6:
|
||
url = `ezopen://open.ys7.com/${result.videoInfo.deviceSerial}/${result.videoInfo.channelNo}.live`
|
||
break
|
||
default:
|
||
url = `ezopen://open.ys7.com/${result.videoInfo.deviceSerial}/${result.videoInfo.channelNo}.live`
|
||
break
|
||
}
|
||
this.ysyParams.url = url
|
||
this.ysyParams.accessToken = result.accessToken
|
||
// this.$emit('playParams',{accessToken:result.accessToken,url:url,videoType:videoType,playType:result.projectVideoConfig.playType})
|
||
}
|
||
|
||
// if(videoType==2){
|
||
// // url=`imou://open.lechange.com/${item.serialNumber}/${item.channelId}/1?streamId=1`
|
||
// // this.$emit('playParams',{accessToken:result.accessToken,url:url,videoType:item.videoType})
|
||
// this.$emit('playParams',{accessToken:result.accessToken,url:item.liveRadioUrl,videoType:item.videoType})
|
||
// }
|
||
// console.log('视频播放url',url)
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="less" scoped>
|
||
@import './videoModule.less';
|
||
.isDockingToWoer {
|
||
position: relative;
|
||
left: 58px;
|
||
top: 83px;
|
||
}
|
||
.isLongguangIframe {
|
||
position: relative;
|
||
left: 2180px;
|
||
top: 276px;
|
||
}
|
||
// .isFullScreen{
|
||
// left: 2160px;
|
||
// top: 226px;
|
||
// }
|
||
#wrapper {
|
||
padding-top: 20px;
|
||
box-sizing: border-box;
|
||
}
|
||
</style>
|