Skip to content

蒋秀川 / miniProject

Go to a project
Commit a70a02cd by Tianqing Liu
Options

Merge branch 'qxh-master' of http://git.keliuyun.com:55676/jiaxiuc123/miniProject into qxh-master

2 parents f4c35818 b4194460
Expand all
Inline Side-by-side
Showing 10 changed files with 108 additions and 73 deletions
h5/src/api/index.js
...@@ -4,6 +4,10 @@ const tourApi = { ...@@ -4,6 +4,10 @@ const tourApi = {
getLiveAndPlaybackAddress(params, config){ getLiveAndPlaybackAddress(params, config){
return req('GET', `/patrol/patrolDeviceChannel/getLiveAndPlaybackAddress`, params, config) return req('GET', `/patrol/patrolDeviceChannel/getLiveAndPlaybackAddress`, params, config)
}, },
// 获取直播回放地址
getThroughVideoUrl(params, config){
return req('POST', `/patrol/through/video/url`, params, config)
},
// 云控制 // 云控制
ptzStart(params,config) { ptzStart(params,config) {
return req('PUT', `/patrol/patrolDeviceChannel/ptzStart`, params, config) return req('PUT', `/patrol/patrolDeviceChannel/ptzStart`, params, config)
...@@ -11,6 +15,9 @@ const tourApi = { ...@@ -11,6 +15,9 @@ const tourApi = {
ptzStop(params,config) { ptzStop(params,config) {
return req('PUT', `/patrol/patrolDeviceChannel/ptzStop`, params, config) return req('PUT', `/patrol/patrolDeviceChannel/ptzStop`, params, config)
}, },
// 获取设备录像记录
getThroughVideoRecord(params, config){
return req('POST', `/patrol/through/video/record`, params, config)
},
} }
export default tourApi; export default tourApi;
\ No newline at end of file \ No newline at end of file
h5/src/views/extension/index.vue
<template> <template>
<div class="extension-page"> <div class="extension-page">
<div class="j-player-wrapper"> <div class="j-player-wrapper">
<vion-player ref="vionPlayer" :watermarkText="params.watermarkText" :hideControls="false" :showPtz="false" :isXCXPage="true"/> <vion-player ref="vionPlayer" :watermarkText="params.watermarkText" :hideControls="false" :showPtz="false" :isXCXPage="true" @magnificationChange="magnificationChange"/>
<!-- <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAJFBMVEVHcEzMzMzMzMzMzMzMzMzNzc3MzMzMzMzNzc3Nzc3MzMzMzMwv5ahDAAAAC3RSTlMAW+8S2UGVwyyZnOTRhEMAAAEfSURBVDjLzZKxbsJADIYdBQpsSCyVMlXAdEuQYGKpWFk6dWHJgsQ7sMDSpUv3PgITAQT0f7ly57ucQ45KXRAZot+/89k+X4ju9KzL4XOhlm3pR0enYrWViSRPXQIQSASkRSkIJEFRimYCuQAHSW89IOv6SH5TCsuAj68Ab1wDzqkAzqoC7AUAPtgsABgkBBgkCJiNHehGok//KRVsHqd+3Dj1/vukt3AH/Jj05s5/AmyZhFVWXDls44iVvfQWkCvgxU6g9ZdJfCLvjJbYaT3GvjOY4mQSG3SJGjhr/Y1Xohp+TGKqqzexZ/1GVGdNCitt6R8zVvb9d+JmKdl8o5sPWbtxT6zFuJcDQtk92MNmYiXHquYlZlVt1j4P6cd7fgHFW7Nhqu29TwAAAABJRU5ErkJggg==" alt="" @click="screenshot" class="screen-shot-img"> --> <!-- <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAJFBMVEVHcEzMzMzMzMzMzMzMzMzNzc3MzMzMzMzNzc3Nzc3MzMzMzMwv5ahDAAAAC3RSTlMAW+8S2UGVwyyZnOTRhEMAAAEfSURBVDjLzZKxbsJADIYdBQpsSCyVMlXAdEuQYGKpWFk6dWHJgsQ7sMDSpUv3PgITAQT0f7ly57ucQ45KXRAZot+/89k+X4ju9KzL4XOhlm3pR0enYrWViSRPXQIQSASkRSkIJEFRimYCuQAHSW89IOv6SH5TCsuAj68Ab1wDzqkAzqoC7AUAPtgsABgkBBgkCJiNHehGok//KRVsHqd+3Dj1/vukt3AH/Jj05s5/AmyZhFVWXDls44iVvfQWkCvgxU6g9ZdJfCLvjJbYaT3GvjOY4mQSG3SJGjhr/Y1Xohp+TGKqqzexZ/1GVGdNCitt6R8zVvb9d+JmKdl8o5sPWbtxT6zFuJcDQtk92MNmYiXHquYlZlVt1j4P6cd7fgHFW7Nhqu29TwAAAABJRU5ErkJggg==" alt="" @click="screenshot" class="screen-shot-img"> -->
</div> </div>
<!-- 时间线组件 --> <!-- 时间线组件 -->
<div class="extension-time-box"> <div class="extension-time-box">
<videoTime ref="videoTime" @videoTimeChange="videoTimeChange" @ptzControlClick="ptzControlClick" :dateFormatType="dateFormatType"/> <videoTime ref="videoTime" @videoTimeChange="videoTimeChange" @ptzControlClick="ptzControlClick" :dateFormatType="dateFormatType" :magnification="magnification" :ptzEnable="params.ptzEnable" :gateUnid="params.gateUnid" :appKey="params.appKey"/>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { getUrlParams } from './utils'; import { getUrlParams } from './utils';
import vionPlayer from '@/components/vionPlayer'; import vionPlayer from '@/components/vionPlayer';
import videoTime from './videoTime'; import videoTime from './videoTime';
import moment from "moment"; import moment from "moment";
import tourApi from '@/api'; import tourApi from '@/api';
var {CryptoJS} = require('./aes')
import { import {
Toast Toast
} from 'vant'; } from 'vant';
...@@ -40,6 +42,8 @@ export default { ...@@ -40,6 +42,8 @@ export default {
params: { params: {
gateUnid: '', gateUnid: '',
watermarkText: '', watermarkText: '',
appKey:'',
ptzEnable:'',
}, },
panTiltList:{ panTiltList:{
up:0, up:0,
...@@ -59,6 +63,7 @@ export default { ...@@ -59,6 +63,7 @@ export default {
nowPanTilt:'', nowPanTilt:'',
terminalType:'', terminalType:'',
dateFormatType:'YYYY-MM-DD', dateFormatType:'YYYY-MM-DD',
magnification:1,
} }
}, },
created() { created() {
...@@ -70,6 +75,10 @@ export default { ...@@ -70,6 +75,10 @@ export default {
window.screenshot = this.screenshot; window.screenshot = this.screenshot;
}, },
methods: { methods: {
// 播放倍率改变
magnificationChange(val) {
this.magnification = val
},
// 时间线改变 // 时间线改变
videoTimeChange(val) { videoTimeChange(val) {
let valTime = moment(val).format('YYYY-MM-DD HH:mm:ss') let valTime = moment(val).format('YYYY-MM-DD HH:mm:ss')
...@@ -89,15 +98,18 @@ export default { ...@@ -89,15 +98,18 @@ export default {
let par = { let par = {
direction:this.panTiltList[type], direction:this.panTiltList[type],
speed:2, speed:2,
gateUnid:this.params.gateUnid gateUnid:this.params.gateUnid,
appKey:this.params.appKey,
} }
// 加密
let parStr = this.aesEncrypt(par)
if(type == 'stop') { if(type == 'stop') {
par.direction = this.nowPanTilt par.direction = this.nowPanTilt
tourApi.ptzStop(par).then(res => { tourApi.ptzStop({param:parStr}).then(res => {
console.log(res) console.log(res)
}) })
} else { } else {
tourApi.ptzStart(par).then(res => { tourApi.ptzStart({param:parStr}).then(res => {
console.log(res) console.log(res)
if(res.data&&res.data.code != 200) { if(res.data&&res.data.code != 200) {
Toast.fail('云台当前操作失败'); Toast.fail('云台当前操作失败');
...@@ -139,17 +151,24 @@ export default { ...@@ -139,17 +151,24 @@ export default {
getVideoAddress(startTime,stopTime) { getVideoAddress(startTime,stopTime) {
let par = { let par = {
gateUnid: this.params.gateUnid, gateUnid: this.params.gateUnid,
appKey: this.params.appKey,
playbackSpeed: 1,
startTime:startTime?startTime:null, startTime:startTime?startTime:null,
stopTime:stopTime?stopTime:null, stopTime:stopTime?stopTime:null,
} }
tourApi.getLiveAndPlaybackAddress(par).then(res => { // 加密
console.log(res) let parStr = this.aesEncrypt(par)
tourApi.getThroughVideoUrl({param:parStr}).then(res => {
if (res.data&&res.data.code == 200) { if (res.data&&res.data.code == 200) {
this.$refs.vionPlayer.play(res.data.msg); this.$refs.vionPlayer.play(res.data.msg);
} }
}) })
}, },
//加密
aesEncrypt (obj){
let encrypted = CryptoJS.AES.encrypt(CryptoJS.enc.Utf8.parse(JSON.stringify(obj)), CryptoJS.enc.Utf8.parse('0123456789abcdef'), {mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7}).toString();
return encrypted
},
// 暴露方法 // 暴露方法
// 截图方法 // 截图方法
screenshot() { screenshot() {
......
h5/src/views/extension/videoTime.vue
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
</div> </div>
<!-- 操作按钮 --> <!-- 操作按钮 -->
<div class="operating-box"> <div class="operating-box">
<van-button v-if="isNoBack" type="info" size="mini" @click="ptzControlChange">{{ptzControlShow?'隐藏云台':'打开云台'}}</van-button> <van-button v-if="isNoBack&&ptzEnable==1" type="info" size="mini" @click="ptzControlChange">{{ptzControlShow?'隐藏云台':'打开云台'}}</van-button>
<van-button v-else type="info" size="mini" @click="backRealTime">返回实时</van-button> <van-button v-else type="info" size="mini" @click="backRealTime">返回实时</van-button>
<!-- <div v-if="isNoBack" class="operating-btn" @click="ptzControlChange">{{ptzControlShow?'隐藏云台':'打开云台'}}</div> --> <!-- <div v-if="isNoBack" class="operating-btn" @click="ptzControlChange">{{ptzControlShow?'隐藏云台':'打开云台'}}</div> -->
<!-- <div v-else class="operating-btn" @click="backRealTime">返回实时</div> --> <!-- <div v-else class="operating-btn" @click="backRealTime">返回实时</div> -->
...@@ -65,13 +65,11 @@ ...@@ -65,13 +65,11 @@
import TimeLineCanvas from "./timeline-canvas-wx.vue"; import TimeLineCanvas from "./timeline-canvas-wx.vue";
import moment from "moment"; import moment from "moment";
import tourApi from '@/api'; import tourApi from '@/api';
var {CryptoJS} = require('./aes')
export default { export default {
name:'videoTime', name:'videoTime',
data() { data() {
return { return {
startTimePickerOptions: {
selectableRange: '00:00:00 - 00:00:01'
},
showDayStr: moment().format('MM月DD日'), showDayStr: moment().format('MM月DD日'),
showDay: '', showDay: '',
showDaySelectShow:false, showDaySelectShow:false,
...@@ -100,7 +98,7 @@ export default { ...@@ -100,7 +98,7 @@ export default {
playDateArr:[], playDateArr:[],
} }
}, },
props:['dateFormatType'], props:['dateFormatType','ptzEnable','gateUnid','appKey'],
components: { components: {
TimeLineCanvas, TimeLineCanvas,
}, },
...@@ -108,21 +106,46 @@ export default { ...@@ -108,21 +106,46 @@ export default {
let that = this let that = this
this.showDay = moment().format(this.dateFormatType) this.showDay = moment().format(this.dateFormatType)
this.timeRange = [moment().format(this.dateFormatType + ' 00:00:00'), moment().format(this.dateFormatType + ' 23:59:59')] this.timeRange = [moment().format(this.dateFormatType + ' 00:00:00'), moment().format(this.dateFormatType + ' 23:59:59')]
this.startTimePickerOptions.selectableRange = '00:00:00 - ' + moment().format('HH:mm:ss')
this.startTime = moment().format('HH:mm:ss') this.startTime = moment().format('HH:mm:ss')
this.nowPlayTime = this.startTime this.nowPlayTime = this.startTime
this.startMeddleTime = moment().format(this.dateFormatType + ' HH:mm:ss') this.startMeddleTime = moment().format(this.dateFormatType + ' HH:mm:ss')
this.proTimeColumns() this.proTimeColumns()
this.getDateBackTime(this.showDay)
}, },
beforeDestroy() { beforeDestroy() {
this.stopPlay() this.stopPlay()
}, },
methods: { methods: {
// 获取可播放日期列表 // 获取播放日期录像回放时间
getPlayDate() { getDateBackTime(startDay) {
tourApi.ptzStop(par).then(res => { let stopTime = startDay == moment().format(this.dateFormatType)?moment().format(this.dateFormatType + ' HH:mm:ss'):moment().format(this.dateFormatType + ' 23:59:59');
console.log(res) let par = {
gateUnid: this.gateUnid,
appKey: this.appKey,
startTime:startDay + ' 00:00:00',
stopTime:stopTime,
}
let parStr = this.aesEncrypt(par)
tourApi.getThroughVideoRecord({param:parStr}).then(res => {
// console.log(res)
if(res.data.code == 200) {
this.markTime = []
let list = res.data.data?res.data.data:[];
list.forEach((one)=>{
this.markTime.push({
beginTime: moment(one.startTime).format(this.dateFormatType + ' HH:mm:ss'),
endTime: moment(one.endTime).format(this.dateFormatType + ' HH:mm:ss'),
bgColor: "rgba(255,153,0,0.4)",
text: "",
}) })
})
}
})
},
//加密
aesEncrypt (obj){
let encrypted = CryptoJS.AES.encrypt(CryptoJS.enc.Utf8.parse(JSON.stringify(obj)), CryptoJS.enc.Utf8.parse('0123456789abcdef'), {mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7}).toString();
return encrypted
}, },
startPlay() { startPlay() {
if(this.isAutoPlay) { if(this.isAutoPlay) {
...@@ -130,18 +153,12 @@ export default { ...@@ -130,18 +153,12 @@ export default {
} }
this.isNoBack = true this.isNoBack = true
this.timeRange = [moment().format(this.dateFormatType + ' 00:00:00'), moment().format(this.dateFormatType + ' 23:59:59')] this.timeRange = [moment().format(this.dateFormatType + ' 00:00:00'), moment().format(this.dateFormatType + ' 23:59:59')]
this.markTime = [{
beginTime: moment().format(this.dateFormatType + ' 00:00:00'),
endTime: moment().format(this.dateFormatType + ' HH:mm:ss'),
bgColor: "rgba(255,153,0,0.4)",
text: "",
}]
this.startTimePickerOptions.selectableRange = '00:00:00 - ' + moment().format('HH:mm:ss')
this.startTime = moment().format('HH:mm:ss') this.startTime = moment().format('HH:mm:ss')
this.showDayStr = moment().format('MM月DD日') this.showDayStr = moment().format('MM月DD日')
this.showDay = moment().format(this.dateFormatType) this.showDay = moment().format(this.dateFormatType)
this.startMeddleTime = moment().format(this.dateFormatType + ' HH:mm:ss') this.startMeddleTime = moment().format(this.dateFormatType + ' HH:mm:ss')
this.$refs.time_line.play(moment().format(this.dateFormatType + ' HH:mm:ss')); this.$refs.time_line.play(moment().format(this.dateFormatType + ' HH:mm:ss'));
this.getDateBackTime(this.showDay)
this.isAutoPlay = true this.isAutoPlay = true
}, },
stopPlay() { stopPlay() {
...@@ -165,23 +182,10 @@ export default { ...@@ -165,23 +182,10 @@ export default {
if (this.showDay == moment().format(this.dateFormatType) &&!type) { if (this.showDay == moment().format(this.dateFormatType) &&!type) {
this.isNoBack = true this.isNoBack = true
this.startTime = moment().format('HH:mm:ss') this.startTime = moment().format('HH:mm:ss')
this.startTimePickerOptions.selectableRange = '00:00:00 - ' + moment().format('HH:mm:ss')
this.markTime = [{
beginTime: moment().format(this.dateFormatType + ' 00:00:00'),
endTime: moment().format(this.dateFormatType + ' HH:mm:ss'),
bgColor: "rgba(255,153,0,0.4)",
text: "",
}]
} else { } else {
this.isNoBack = false this.isNoBack = false
this.startTimePickerOptions.selectableRange = '00:00:00 - 23:59:59'
this.markTime = [{
beginTime: this.showDay + ' 00:00:00',
endTime: this.showDay + ' 23:59:59',
bgColor: "rgba(255,153,0,0.4)",
text: "",
}]
} }
this.getDateBackTime(this.showDay)
this.startMeddleTime = moment(this.showDay + ' ' + this.startTime).format(this.dateFormatType + ' HH:mm:ss') this.startMeddleTime = moment(this.showDay + ' ' + this.startTime).format(this.dateFormatType + ' HH:mm:ss')
if(!type) { if(!type) {
this.$emit('videoTimeChange',this.startMeddleTime) this.$emit('videoTimeChange',this.startMeddleTime)
...@@ -260,12 +264,7 @@ export default { ...@@ -260,12 +264,7 @@ export default {
this.proTimeColumns() this.proTimeColumns()
} }
if (moment(date).format(this.dateFormatType) == moment().format(this.dateFormatType)) { if (moment(date).format(this.dateFormatType) == moment().format(this.dateFormatType)) {
this.markTime = [{ // this.getDateBackTime(moment().format(this.dateFormatType))
beginTime: moment().format(this.dateFormatType + ' 00:00:00'),
endTime: moment().format(this.dateFormatType + ' HH:mm:ss'),
bgColor: "rgba(255,153,0,0.4)",
text: "",
}]
} }
// 更新时间下拉选项 // 更新时间下拉选项
}, },
......
h5/src/views/pc/index.vue
<template> <template>
<div class="video-page" :style="{height:isFullScreen?'100%':height?height:videoHeight+'px'}"> <div class="video-page" :style="{height:isFullScreen?'100%':height?height:videoHeight+'px'}">
<!-- <div>
<el-button type="primary" @click="playWebVideo({gateUnid: '7c55b448-5857-11ee-8777-00163e143ecd'})">会议室</el-button>
<el-button type="primary" @click="playWebVideo({gateUnid: '85de13a8-5775-11ee-94ed-00163e143ecd'})">办公室</el-button>
<el-button type="primary" @click="playWebVideo({gateUnid: '85de1326-5775-11ee-94ed-00163e143ecd'})">大华</el-button>
</div> -->
<div class="video-box" :style="{height:isShowTime?'calc(100% - 128px)':'100%'}"> <div class="video-box" :style="{height:isShowTime?'calc(100% - 128px)':'100%'}">
<div v-if="playerNum == 1" class="video-split-one"> <div v-if="playerNum == 1" class="video-split-one">
<div v-if="videoObj.name" class="elRow"> <div v-if="videoObj.name" class="elRow">
...@@ -17,7 +22,7 @@ ...@@ -17,7 +22,7 @@
</div> </div>
<div v-else class="video-split-box"> <div v-else class="video-split-box">
<div class="video-split-line"> <div class="video-split-line">
<div class="video-split-one" @click="selectVideoChange(0)"> <div class="video-split-one" :class="[splitNum==0?'video-split-one-show':'']" @click="selectVideoChange(0)">
<div v-if="videoArrObj[0]&&videoArrObj[0].name" class="elRow"> <div v-if="videoArrObj[0]&&videoArrObj[0].name" class="elRow">
<div class="gateName"> <div class="gateName">
{{videoArrObj[0].name}} {{videoArrObj[0].name}}
...@@ -31,7 +36,7 @@ ...@@ -31,7 +36,7 @@
<p class="screenshot" @click="screenshot(0)"><i class="el-icon-camera"></i></p> <p class="screenshot" @click="screenshot(0)"><i class="el-icon-camera"></i></p>
</div> </div>
</div> </div>
<div class="video-split-one" @click="selectVideoChange(1)"> <div class="video-split-one" :class="[splitNum==1?'video-split-one-show':'']" @click="selectVideoChange(1)">
<div v-if="videoArrObj[1]&&videoArrObj[1].name" class="elRow"> <div v-if="videoArrObj[1]&&videoArrObj[1].name" class="elRow">
<div class="gateName"> <div class="gateName">
{{videoArrObj[1].name}} {{videoArrObj[1].name}}
...@@ -47,7 +52,7 @@ ...@@ -47,7 +52,7 @@
</div> </div>
</div> </div>
<div class="video-split-line"> <div class="video-split-line">
<div class="video-split-one" @click="selectVideoChange(2)"> <div class="video-split-one" :class="[splitNum==2?'video-split-one-show':'']" @click="selectVideoChange(2)">
<div v-if="videoArrObj[2]&&videoArrObj[2].name" class="elRow"> <div v-if="videoArrObj[2]&&videoArrObj[2].name" class="elRow">
<div class="gateName"> <div class="gateName">
{{videoArrObj[2].name}} {{videoArrObj[2].name}}
...@@ -61,7 +66,7 @@ ...@@ -61,7 +66,7 @@
<p class="screenshot" @click="screenshot(2)"><i class="el-icon-camera"></i></p> <p class="screenshot" @click="screenshot(2)"><i class="el-icon-camera"></i></p>
</div> </div>
</div> </div>
<div class="video-split-one" @click="selectVideoChange(3)"> <div class="video-split-one" :class="[splitNum==3?'video-split-one-show':'']" @click="selectVideoChange(3)">
<div v-if="videoArrObj[3]&&videoArrObj[3].name" class="elRow"> <div v-if="videoArrObj[3]&&videoArrObj[3].name" class="elRow">
<div class="gateName"> <div class="gateName">
{{videoArrObj[3].name}} {{videoArrObj[3].name}}
...@@ -79,7 +84,7 @@ ...@@ -79,7 +84,7 @@
</div> </div>
</div> </div>
<div class="time-box" v-if="isShowTime"> <div class="time-box" v-if="isShowTime">
<videoTime ref="videoTime" @videoTimeChange="videoTimeChange" @videoTimeSync="videoTimeSync" @allVideoFullScreen="allVideoFullScreen" @allVideoExitFullScreen="allVideoExitFullScreen" @splitScreenChange="splitScreenChange" :isShowSplit="isShowSplit"/> <videoTime ref="videoTime" @videoTimeChange="videoTimeChange" @videoTimeSync="videoTimeSync" @allVideoFullScreen="allVideoFullScreen" @allVideoExitFullScreen="allVideoExitFullScreen" @splitScreenChange="splitScreenChange" :isShowSplit="isShowSplit" :splitNum="splitNum"/>
</div> </div>
</div> </div>
</template> </template>
...@@ -174,20 +179,18 @@ export default { ...@@ -174,20 +179,18 @@ export default {
this.splitNum = obj.splitNum this.splitNum = obj.splitNum
} }
console.log(obj) console.log(obj)
if(this.$refs.videoTime) {
this.$refs.videoTime.stopPlay()
}
obj.watermarkText = obj.watermarkText||''; obj.watermarkText = obj.watermarkText||'';
if(this.playerNum == 4) { if(this.playerNum == 4) {
this.videoArrObj[this.splitNum] = Object.assign({}, obj) this.videoArrObj[this.splitNum] = Object.assign({}, obj)
this.$forceUpdate() this.$forceUpdate()
this.getVideoAddress(obj,this.splitNum) this.getVideoAddress(obj,this.splitNum)
} else { } else {
this.splitNum = 0
this.videoObj = Object.assign({}, obj); this.videoObj = Object.assign({}, obj);
this.$forceUpdate() this.$forceUpdate()
this.getVideoAddress(obj) this.getVideoAddress(obj)
} }
if(this.isShowTime) { if(this.isShowTime&&this.isNoBack) {
this.$refs.videoTime.startPlay() this.$refs.videoTime.startPlay()
} }
}, },
...@@ -221,7 +224,7 @@ export default { ...@@ -221,7 +224,7 @@ export default {
} else { } else {
this.$refs.vionPlayer.play(res.data.msg); this.$refs.vionPlayer.play(res.data.msg);
} }
this.splitNumChange() // this.splitNumChange()
} }
}) })
}, },
...@@ -290,16 +293,16 @@ export default { ...@@ -290,16 +293,16 @@ export default {
} }
// 更新视频地址 // 更新视频地址
if(this.playerNum == 4) { if(this.playerNum == 4) {
if(this.videoArrObj[0]){ if(this.splitNum == 0){
this.getVideoAddress(this.videoArrObj[0],0) this.getVideoAddress(this.videoArrObj[0],0)
} }
if(this.videoArrObj[1]){ if(this.splitNum == 1){
this.getVideoAddress(this.videoArrObj[1],1) this.getVideoAddress(this.videoArrObj[1],1)
} }
if(this.videoArrObj[2]){ if(this.splitNum == 2){
this.getVideoAddress(this.videoArrObj[2],2) this.getVideoAddress(this.videoArrObj[2],2)
} }
if(this.videoArrObj[3]){ if(this.splitNum == 3){
this.getVideoAddress(this.videoArrObj[3],3) this.getVideoAddress(this.videoArrObj[3],3)
} }
} else { } else {
...@@ -413,11 +416,12 @@ export default { ...@@ -413,11 +416,12 @@ export default {
this.videoArrObj[val] = null this.videoArrObj[val] = null
this.splitNum = val this.splitNum = val
} else { } else {
this.splitNum = 0
this.$refs.vionPlayer.destroy(); this.$refs.vionPlayer.destroy();
} }
if(this.playerNum == 1||(this.playerNum == 4&&!this.videoArrObj[0]&&!this.videoArrObj[1]&&!this.videoArrObj[2]&&!this.videoArrObj[3])) { // if(this.playerNum == 1||(this.playerNum == 4&&!this.videoArrObj[0]&&!this.videoArrObj[1]&&!this.videoArrObj[2]&&!this.videoArrObj[3])) {
this.$refs.videoTime.stopPlay() this.$refs.videoTime.stopPlay(this.splitNum)
} // }
}, },
} }
} }
...@@ -467,8 +471,8 @@ export default { ...@@ -467,8 +471,8 @@ export default {
top:0px; top:0px;
left:0px; left:0px;
z-index: 99; z-index: 99;
height: 48px; height: 38px;
line-height: 48px; line-height: 38px;
display: none; display: none;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
...@@ -477,8 +481,8 @@ export default { ...@@ -477,8 +481,8 @@ export default {
padding: 0 30px; padding: 0 30px;
font-size: 18px; font-size: 18px;
.closeIcon{ .closeIcon{
height: 48px; height: 38px;
line-height: 48px; line-height: 38px;
cursor: pointer; cursor: pointer;
padding: 0 10px; padding: 0 10px;
} }
...@@ -503,6 +507,9 @@ export default { ...@@ -503,6 +507,9 @@ export default {
position: relative; position: relative;
border: 2px solid rgba(255,255,255,0.4); border: 2px solid rgba(255,255,255,0.4);
} }
.video-split-one-show{
border: 2px solid #409EFF;
}
} }
} }
</style> </style>
h5/src/views/pc/pcdemo.vue
...@@ -2,17 +2,20 @@ ...@@ -2,17 +2,20 @@
<div> <div>
<!-- 添加视频测试 --> <!-- 添加视频测试 -->
<div> <div>
<el-button type="primary" @click="addPlayer({gateUnid: '7c55b448-5857-11ee-8777-00163e143ecd'})">办公室</el-button> <el-button type="primary" @click="addPlayer({gateUnid: '7c55b448-5857-11ee-8777-00163e143ecd'})">会议室</el-button>
<el-button type="primary" @click="addPlayer({gateUnid: '85de13a8-5775-11ee-94ed-00163e143ecd'})">办公室</el-button>
<el-button type="primary" @click="addPlayer({gateUnid: '85de1326-5775-11ee-94ed-00163e143ecd'})">大华</el-button>
</div> </div>
<iframe id="iframe" name="iframe" ref="iframe" style="width: 100vw;height:calc(100vh - 60px);" src="/#/vionplayer-web" frameborder="0"></iframe> <indexPlayer id="iframe" ref="iframe" style="width: 100vw;height:calc(100vh - 60px);"></indexPlayer>
<!-- <iframe id="iframe" name="iframe" ref="iframe" style="width: 100vw;height:calc(100vh - 60px);" src="/#/vionplayer-web" frameborder="0"></iframe> -->
</div> </div>
</template> </template>
<script> <script>
// import indexPlayer from './index.vue'; import indexPlayer from './index.vue';
export default { export default {
name: 'jplayerWebDemo', name: 'jplayerWebDemo',
components: { components: {
// indexPlayer, indexPlayer,
}, },
data() { data() {
return { return {
...@@ -33,9 +36,9 @@ export default { ...@@ -33,9 +36,9 @@ export default {
}, },
methods: { methods: {
addPlayer(obj) { addPlayer(obj) {
window.parent.document.getElementById('iframe').contentWindow.playWebVideo(obj) // window.parent.document.getElementById('iframe').contentWindow.playWebVideo(obj)
// this.$refs.iframe.playWebVideo(obj) this.$refs.iframe.playWebVideo(obj)
}, },
}, },
} }
......
h5/vionPlayer.zip 0 → 100644
This file is too large to display.
h5/vionPlayer1.zip 0 → 100644
This file is too large to display.
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!