Skip to content

蒋秀川 / miniProject

Go to a project
Commit 3da32f2a by Tianqing Liu
Options

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

2 parents d0a3a3b7 70863b03
Inline Side-by-side
Showing 6 changed files with 761 additions and 99 deletions
h5/src/views/extension/index.vue
......@@ -51,6 +51,7 @@ export default {
}
},
created() {
console.log(window.JessibucaPro)
this.init();
},
methods: {
......
h5/src/views/pc/index-v2.vue 0 → 100644
<template>
<div class="video-page" :style="{height:isFullScreen?'100%':height?height:videoHeight+'px'}">
<div class="video-box" :style="{height:isShowTime?'calc(100% - 128px)':'100%'}">
<div v-if="playerNum == 1" class="video-split-one">
<div v-if="videoObj.name" class="elRow">
<div class="gateName">
{{videoObj.name}}
</div>
<div class="closeIcon" @click="stopPlay">
<i class="el-icon-close"></i>
</div>
</div>
<vion-player v-if="videoObj.gateUnid" ref="vionPlayer" :watermarkText="videoObj.watermarkText" :controlAutoHide="controlAutoHide" :showPtz="showPtz" @ptz-control="panTiltControlComp"/>
<div class="cameraTool" v-show="isShowJT">
<p class="screenshot" @click="screenshot()"><i class="el-icon-camera"></i></p>
</div>
</div>
<div v-else class="video-split-box">
<div class="video-split-line">
<div class="video-split-one" @click="selectVideoChange(0)">
<div v-if="videoArrObj[0]&&videoArrObj[0].name" class="elRow">
<div class="gateName">
{{videoArrObj[0].name}}
</div>
<div class="closeIcon" @click="stopPlay(0)">
<i class="el-icon-close"></i>
</div>
</div>
<vion-player ref="vionPlayer0" v-if="videoArrObj[0]" :watermarkText="videoArrObj[0].watermarkText" :controlAutoHide="controlAutoHide" :showPtz="showPtz" @ptz-control="panTiltControlComp0"/>
<div class="cameraTool" v-show="isShowJT&&videoArrObj[0]">
<p class="screenshot" @click="screenshot(0)"><i class="el-icon-camera"></i></p>
</div>
</div>
<div class="video-split-one" @click="selectVideoChange(1)">
<div v-if="videoArrObj[1]&&videoArrObj[1].name" class="elRow">
<div class="gateName">
{{videoArrObj[1].name}}
</div>
<div class="closeIcon" @click="stopPlay(1)">
<i class="el-icon-close"></i>
</div>
</div>
<vion-player ref="vionPlayer1" v-if="videoArrObj[1]" :watermarkText="videoArrObj[1].watermarkText" :controlAutoHide="controlAutoHide" :showPtz="showPtz" @ptz-control="panTiltControlComp1"/>
<div class="cameraTool" v-show="isShowJT&&videoArrObj[1]">
<p class="screenshot" @click="screenshot(1)"><i class="el-icon-camera"></i></p>
</div>
</div>
</div>
<div class="video-split-line">
<div class="video-split-one" @click="selectVideoChange(2)">
<div v-if="videoArrObj[2]&&videoArrObj[2].name" class="elRow">
<div class="gateName">
{{videoArrObj[2].name}}
</div>
<div class="closeIcon" @click="stopPlay(2)">
<i class="el-icon-close"></i>
</div>
</div>
<vion-player ref="vionPlayer2" v-if="videoArrObj[2]" :watermarkText="videoArrObj[2].watermarkText" :controlAutoHide="controlAutoHide" :showPtz="showPtz" @ptz-control="panTiltControlComp2"/>
<div class="cameraTool" v-show="isShowJT&&videoArrObj[2]">
<p class="screenshot" @click="screenshot(2)"><i class="el-icon-camera"></i></p>
</div>
</div>
<div class="video-split-one" @click="selectVideoChange(3)">
<div v-if="videoArrObj[3]&&videoArrObj[3].name" class="elRow">
<div class="gateName">
{{videoArrObj[3].name}}
</div>
<div class="closeIcon" @click="stopPlay(3)">
<i class="el-icon-close"></i>
</div>
</div>
<vion-player ref="vionPlayer3" v-if="videoArrObj[3]" :watermarkText="videoArrObj[3].watermarkText" :controlAutoHide="controlAutoHide" :showPtz="showPtz" @ptz-control="panTiltControlComp3"/>
<div class="cameraTool" v-show="isShowJT&&videoArrObj[3]">
<p class="screenshot" @click="screenshot(3)"><i class="el-icon-camera"></i></p>
</div>
</div>
</div>
</div>
</div>
<div class="time-box" v-if="isShowTime">
<videoTime v-if="splitNum == -1" ref="videoTime" @videoTimeChange="videoTimeChange" @videoTimeSync="videoTimeSync" @allVideoFullScreen="allVideoFullScreen" @allVideoExitFullScreen="allVideoExitFullScreen" @splitScreenChange="splitScreenChange" :isShowSplit="isShowSplit"/>
<videoTime v-if="splitNum == 0" ref="videoTime0" @videoTimeChange="videoTimeChange0" @videoTimeSync="videoTimeSync0" @allVideoFullScreen="allVideoFullScreen" @allVideoExitFullScreen="allVideoExitFullScreen" @splitScreenChange="splitScreenChange" :isShowSplit="isShowSplit"/>
<videoTime v-if="splitNum == 1" ref="videoTime1" @videoTimeChange="videoTimeChange1" @videoTimeSync="videoTimeSync1" @allVideoFullScreen="allVideoFullScreen" @allVideoExitFullScreen="allVideoExitFullScreen" @splitScreenChange="splitScreenChange" :isShowSplit="isShowSplit"/>
<videoTime v-if="splitNum == 2" ref="videoTime2" @videoTimeChange="videoTimeChange2" @videoTimeSync="videoTimeSync2" @allVideoFullScreen="allVideoFullScreen" @allVideoExitFullScreen="allVideoExitFullScreen" @splitScreenChange="splitScreenChange" :isShowSplit="isShowSplit"/>
<videoTime v-if="splitNum == 3" ref="videoTime3" @videoTimeChange="videoTimeChange3" @videoTimeSync="videoTimeSync3" @allVideoFullScreen="allVideoFullScreen" @allVideoExitFullScreen="allVideoExitFullScreen" @splitScreenChange="splitScreenChange" :isShowSplit="isShowSplit"/>
</div>
</div>
</template>
<script>
import videoTime from './videoTime.vue'
import vionPlayer from '@/components/vionPlayer';
import moment from 'moment'
import tourApi from '@/api';
export default {
name: 'VionPlayerWeb',
components:{
videoTime,
vionPlayer,
},
data() {
return {
videoArrObj:[],
isFullScreen:false,
videoObj: {
gateUnid: '',
watermarkText: '',
name:'',
},
videoPlayTime:'',
videoPlayTime0:'',
videoPlayTime1:'',
videoPlayTime2:'',
videoPlayTime3:'',
videoBackEndTime:'',
videoBackEndTime0:'',
videoBackEndTime1:'',
videoBackEndTime2:'',
videoBackEndTime3:'',
isNoBack:true,
isNoBack0:true,
isNoBack1:true,
isNoBack2:true,
isNoBack3:true,
playerNum:1,
splitNum:0,
panTiltList:{
up:0,
down:1,
left:2,
right:3,
leftUp:4,
leftDown:5,
rightUp:6,
rightDown:7,
zoomExpand:8,
zoomNarrow:9,
focusNear:10,
focusFar:11,
stop:-1
},
nowPanTilt:'',
}
},
props:{
// 是否显示时间操作区，默认为true
isShowTime: {
type: Boolean,
default: true,
},
// 设置组件高度
height:{
type: String,
default: '',
},
// 是否显示截图按钮，默认为false
isShowJT: {
type: Boolean,
default: true,
},
// 是否支持四分屏，默认为true
isShowSplit: {
type: Boolean,
default: true,
},
// 是否显示视频操作区，默认为true
controlAutoHide: {
type: Boolean,
default: true,
},
// 是否显示视频操作区中的云台控制，默认为true
showPtz: {
type: Boolean,
default: true,
},
},
computed: {
videoHeight() {
const windowInnerHeight = window.innerHeight;
return windowInnerHeight - 80;
}
},
mounted() {
window.playWebVideo = this.playWebVideo;
},
methods: {
playWebVideo(obj) {
if(obj.splitNum >=0) {
this.splitNum = obj.splitNum
}
console.log(obj)
if(this.$refs.videoTime) {
this.$refs.videoTime.stopPlay()
}
if(this.$refs.videoTime0) {
this.$refs.videoTime0.stopPlay()
}
if(this.$refs.videoTime1) {
this.$refs.videoTime1.stopPlay()
}
if(this.$refs.videoTime2) {
this.$refs.videoTime2.stopPlay()
}
if(this.$refs.videoTime3) {
this.$refs.videoTime3.stopPlay()
}
obj.watermarkText = obj.watermarkText||'';
if(this.playerNum == 4) {
this.videoArrObj[this.splitNum] = Object.assign({}, obj)
this.$forceUpdate()
this.getVideoAddress(obj,this.splitNum)
if(this.isShowTime) {
if(this.splitNum == 0) {
this.$refs.videoTime0.startPlay()
} else if(this.splitNum == 1) {
this.$refs.videoTime1.startPlay()
} else if(this.splitNum == 2) {
this.$refs.videoTime2.startPlay()
} else if(this.splitNum == 3) {
this.$refs.videoTime3.startPlay()
}
}
} else {
this.splitNum = -1
this.videoObj = Object.assign({}, obj);
this.$forceUpdate()
this.getVideoAddress(obj,-1)
if(this.isShowTime) {
this.$refs.videoTime.startPlay()
}
}
},
// 获取视频播放地址
getVideoAddress(obj,index) {
let par = {
gateUnid: obj.gateUnid,
}
if(!this.isNoBack){
if(index == -1) {
par.startTime = obj.startTime?obj.startTime:this.videoPlayTime;
par.stopTime = obj.stopTime?obj.stopTime:this.videoBackEndTime;
} else if(index == 0) {
par.startTime = obj.startTime?obj.startTime:this.videoPlayTime0;
par.stopTime = obj.stopTime?obj.stopTime:this.videoBackEndTime0;
} else if(index == 1) {
par.startTime = obj.startTime?obj.startTime:this.videoPlayTime1;
par.stopTime = obj.stopTime?obj.stopTime:this.videoBackEndTime1;
} else if(index == 2) {
par.startTime = obj.startTime?obj.startTime:this.videoPlayTime2;
par.stopTime = obj.stopTime?obj.stopTime:this.videoBackEndTime2;
} else if(index == 3) {
par.startTime = obj.startTime?obj.startTime:this.videoPlayTime3;
par.stopTime = obj.stopTime?obj.stopTime:this.videoBackEndTime3;
}
}
tourApi.getLiveAndPlaybackAddress(par).then(res => {
console.log(res)
if (res.data&&res.data.code == 200) {
if(this.playerNum == 4) {
if(index == 0) {
console.log(this.videoArrObj[this.splitNum],this.splitNum)
console.log(this.$refs.vionPlayer0)
this.$refs.vionPlayer0.play(res.data.msg);
}
if(index == 1) {
this.$refs.vionPlayer1.play(res.data.msg);
}
if(index == 2) {
this.$refs.vionPlayer2.play(res.data.msg);
}
if(index == 3) {
this.$refs.vionPlayer3.play(res.data.msg);
}
} else {
this.$refs.vionPlayer.play(res.data.msg);
}
this.splitNumChange()
}
})
},
// 分屏时选中屏数自动改变
splitNumChange() {
if(this.playerNum == 4) {
for(let i=0;i<5;i++){
if(!this.videoArrObj[i]){
this.splitNum = i
break;
}
}
if(this.splitNum== 5) {
this.splitNum = 0
}
}
},
allVideoExitFullScreen(){
this.isFullScreen = false
},
allVideoFullScreen(val){
this.isFullScreen = true
},
// 四分屏，单屏切换
splitScreenChange(val) {
if(val == 4) {
if(this.$refs.vionPlayer) {
this.$refs.vionPlayer.destroy();
this.$refs.videoTime.stopPlay()
}
this.splitNum = 0
} else {
if(this.$refs.vionPlayer0) {
this.$refs.vionPlayer0.destroy();
this.$refs.videoTime0.stopPlay()
}
if(this.$refs.vionPlayer1) {
this.$refs.vionPlayer1.destroy();
this.$refs.videoTime1.stopPlay()
}
if(this.$refs.vionPlayer2) {
this.$refs.vionPlayer2.destroy();
this.$refs.videoTime2.stopPlay()
}
if(this.$refs.vionPlayer3) {
this.$refs.vionPlayer3.destroy();
this.$refs.videoTime3.stopPlay()
}
this.splitNum = -1
}
// console.log(val)
this.playerNum = val
this.videoArrObj = []
},
// 分屏单个播放窗口点击
selectVideoChange(val) {
this.splitNum = val
},
// 时间线改变
videoTimeChange(val) {
this.isNoBack = val == moment().format('YYYY-MM-DD HH:mm:ss')
if(!this.isNoBack){
this.videoPlayTime = val
this.videoBackEndTime = moment().format('YYYY-MM-DD HH:mm:ss')
}
this.getVideoAddress(this.videoObj,-1)
},
videoTimeChange0(val) {
this.isNoBack0 = val == moment().format('YYYY-MM-DD HH:mm:ss')
if(!this.isNoBack0){
this.videoPlayTime0 = val
this.videoBackEndTime0 = moment().format('YYYY-MM-DD HH:mm:ss')
}
this.getVideoAddress(this.videoArrObj[0],0)
},
videoTimeChange1(val) {
this.isNoBack1 = val == moment().format('YYYY-MM-DD HH:mm:ss')
if(!this.isNoBack1){
this.videoPlayTime1 = val
this.videoBackEndTime1 = moment().format('YYYY-MM-DD HH:mm:ss')
}
this.getVideoAddress(this.videoArrObj[1],1)
},
videoTimeChange2(val) {
this.isNoBack2 = val == moment().format('YYYY-MM-DD HH:mm:ss')
if(!this.isNoBack2){
this.videoPlayTime2 = val
this.videoBackEndTime2 = moment().format('YYYY-MM-DD HH:mm:ss')
}
this.getVideoAddress(this.videoArrObj[2],2)
},
videoTimeChange3(val) {
this.isNoBack3 = val == moment().format('YYYY-MM-DD HH:mm:ss')
if(!this.isNoBack3){
this.videoPlayTime3 = val
this.videoBackEndTime3 = moment().format('YYYY-MM-DD HH:mm:ss')
}
this.getVideoAddress(this.videoArrObj[3],3)
},
// 云台控制接口调用
panTiltControl(val,gateUnid) {
if(val != 'stop') {
this.nowPanTilt = this.panTiltList[val]
}
let par = {
direction:this.panTiltList[val],
speed:2,
gateUnid:gateUnid
}
if(val == 'stop') {
par.direction = this.nowPanTilt
tourApi.ptzStop(par).then(res => {
console.log(res)
})
} else {
tourApi.ptzStart(par).then(res => {
console.log(res)
if(res.data&&res.data.code != 200) {
this.$message({
message: res.data.msg||'云台当前操作失败',
type: 'warning'
});
}
})
}
},
panTiltControlComp(val){
console.log(val,this.videoObj.gateUnid)
this.panTiltControl(val,this.videoObj.gateUnid)
},
panTiltControlComp0(val){
this.panTiltControl(val,this.videoArrObj[0].gateUnid)
},
panTiltControlComp1(val){
this.panTiltControl(val,this.videoArrObj[1].gateUnid)
},
panTiltControlComp2(val){
this.panTiltControl(val,this.videoArrObj[2].gateUnid)
},
panTiltControlComp3(val){
this.panTiltControl(val,this.videoArrObj[3].gateUnid)
},
// 播放时间与时间线同步
videoTimeSync(val) {
this.videoPlayTime = val
this.videoBackEndTime = moment().format('YYYY-MM-DD HH:mm:ss')
},
videoTimeSync0(val) {
this.videoPlayTime0 = val
this.videoBackEndTime0 = moment().format('YYYY-MM-DD HH:mm:ss')
},
videoTimeSync1(val) {
this.videoPlayTime1 = val
this.videoBackEndTime1 = moment().format('YYYY-MM-DD HH:mm:ss')
},
videoTimeSync2(val) {
this.videoPlayTime2 = val
this.videoBackEndTime2 = moment().format('YYYY-MM-DD HH:mm:ss')
},
videoTimeSync3(val) {
this.videoPlayTime3 = val
this.videoBackEndTime3 = moment().format('YYYY-MM-DD HH:mm:ss')
},
// 暴露方法
/**
* 截图
* num为分屏时的窗口序号，从0开始；不传则认为是单屏
*/
screenshot(num) {
if(num === 0) {
this.$refs.vionPlayer0.screenshot().then(data => {
return data;
}).catch(err => {
})
} else if(num === 1) {
this.$refs.vionPlayer1.screenshot().then(data => {
return data;
}).catch(err => {
})
} else if(num === 2) {
this.$refs.vionPlayer2.screenshot().then(data => {
return data;
}).catch(err => {
})
} else if(num === 3) {
this.$refs.vionPlayer3.screenshot().then(data => {
return data;
}).catch(err => {
})
} else {
this.$refs.vionPlayer.screenshot().then(data => {
return data;
}).catch(err => {
})
}
},
/**
* 关闭视频播放
* num为分屏时的窗口序号，从0开始；不传则认为是单屏
*/
stopPlay(val) {
if(val >=0) {
if(val === 0) {
this.$refs.vionPlayer0.destroy();
this.$refs.videoTime0.stopPlay()
} else if(val === 1) {
this.$refs.vionPlayer1.destroy();
this.$refs.videoTime1.stopPlay()
} else if(val === 2) {
this.$refs.vionPlayer2.destroy();
this.$refs.videoTime2.stopPlay()
} else if(val === 3) {
this.$refs.vionPlayer3.destroy();
this.$refs.videoTime3.stopPlay()
}
this.videoArrObj[val] = null
this.splitNum = val
} else {
this.$refs.vionPlayer.destroy();
this.$refs.videoTime.stopPlay()
}
},
}
}
</script>
<style scoped lang="less">
.video-page{
background-color: rgba(0, 0, 0, 0.7);
.video-box{
width: 100%;
position: relative;
border-bottom: 1px solid #666666;
.video-split-one{
height: 100%;
&:hover{
.cameraTool{
display: block;
}
.elRow{
display: flex;
}
}
}
.cameraTool{
position: absolute;
right: 15px;
top: 40%;
display: none;
z-index: 9999;
color: #fff;
.screenshot{
width: 40px;
height: 40px;
background: rgba(0,0,0,.7);
line-height: 40px;
text-align: center;
font-size: 25px;
cursor: pointer;
margin-bottom: 3px;
border-radius: 5px;
}
}
.elRow{
width: calc(100% - 60px);
position: absolute;
top:0px;
left:0px;
z-index: 99;
height: 48px;
line-height: 48px;
display: none;
align-items: center;
justify-content: space-between;
background: rgba(0, 0, 0, 0.7);
color: #fff;
padding: 0 30px;
font-size: 18px;
.closeIcon{
height: 48px;
line-height: 48px;
cursor: pointer;
padding: 0 10px;
}
}
}
.time-box{
width: 100%;
}
.video-split-box{
width: 100%;
height: 100%;
.video-split-line{
width: 100%;
height: calc(50% - 2px);
display: flex;
align-items: center;
justify-content: space-between;
}
.video-split-one{
width: calc(50% - 2px);
height: 100%;
position: relative;
border: 2px solid rgba(255,255,255,0.4);
}
}
}
</style>
\ No newline at end of file
h5/src/views/pc/index.vue
......@@ -10,7 +10,7 @@
<i class="el-icon-close"></i>
</div>
</div>
<vion-player v-if="videoObj.playUrl" ref="vionPlayer" :playUrl="videoObj.playUrl" :watermarkText="videoObj.watermarkText" :controlAutoHide="controlAutoHide" :showPtz="showPtz" @ptz-control="panTiltControlComp"/>
<vion-player v-if="videoObj.gateUnid" ref="vionPlayer" :watermarkText="videoObj.watermarkText" :controlAutoHide="controlAutoHide" :showPtz="showPtz" @ptz-control="panTiltControlComp"/>
<div class="cameraTool" v-show="isShowJT">
<p class="screenshot" @click="screenshot()"><i class="el-icon-camera"></i></p>
</div>
......@@ -26,7 +26,7 @@
<i class="el-icon-close"></i>
</div>
</div>
<vion-player ref="vionPlayer0" v-if="videoArrObj[0]&&videoArrObj[0].playUrl" :playUrl="videoArrObj[0].playUrl" :watermarkText="videoArrObj[0].watermarkText" :controlAutoHide="controlAutoHide" :showPtz="showPtz" @ptz-control="panTiltControlComp0"/>
<vion-player ref="vionPlayer0" v-if="videoArrObj[0]" :watermarkText="videoArrObj[0].watermarkText" :controlAutoHide="controlAutoHide" :showPtz="showPtz" @ptz-control="panTiltControlComp0"/>
<div class="cameraTool" v-show="isShowJT&&videoArrObj[0]">
<p class="screenshot" @click="screenshot(0)"><i class="el-icon-camera"></i></p>
</div>
......@@ -40,7 +40,7 @@
<i class="el-icon-close"></i>
</div>
</div>
<vion-player ref="vionPlayer1" v-if="videoArrObj[1]&&videoArrObj[1].playUrl" :playUrl="videoArrObj[1].playUrl" :watermarkText="videoArrObj[1].watermarkText" :controlAutoHide="controlAutoHide" :showPtz="showPtz" @ptz-control="panTiltControlComp1"/>
<vion-player ref="vionPlayer1" v-if="videoArrObj[1]" :watermarkText="videoArrObj[1].watermarkText" :controlAutoHide="controlAutoHide" :showPtz="showPtz" @ptz-control="panTiltControlComp1"/>
<div class="cameraTool" v-show="isShowJT&&videoArrObj[1]">
<p class="screenshot" @click="screenshot(1)"><i class="el-icon-camera"></i></p>
</div>
......@@ -56,7 +56,7 @@
<i class="el-icon-close"></i>
</div>
</div>
<vion-player ref="vionPlayer2" v-if="videoArrObj[2]&&videoArrObj[2].playUrl" :playUrl="videoArrObj[2].playUrl" :watermarkText="videoArrObj[2].watermarkText" :controlAutoHide="controlAutoHide" :showPtz="showPtz" @ptz-control="panTiltControlComp2"/>
<vion-player ref="vionPlayer2" v-if="videoArrObj[2]" :watermarkText="videoArrObj[2].watermarkText" :controlAutoHide="controlAutoHide" :showPtz="showPtz" @ptz-control="panTiltControlComp2"/>
<div class="cameraTool" v-show="isShowJT&&videoArrObj[2]">
<p class="screenshot" @click="screenshot(2)"><i class="el-icon-camera"></i></p>
</div>
......@@ -70,7 +70,7 @@
<i class="el-icon-close"></i>
</div>
</div>
<vion-player ref="vionPlayer3" v-if="videoArrObj[3]&&videoArrObj[3].playUrl" :playUrl="videoArrObj[3].playUrl" :watermarkText="videoArrObj[3].watermarkText" :controlAutoHide="controlAutoHide" :showPtz="showPtz" @ptz-control="panTiltControlComp3"/>
<vion-player ref="vionPlayer3" v-if="videoArrObj[3]" :watermarkText="videoArrObj[3].watermarkText" :controlAutoHide="controlAutoHide" :showPtz="showPtz" @ptz-control="panTiltControlComp3"/>
<div class="cameraTool" v-show="isShowJT&&videoArrObj[3]">
<p class="screenshot" @click="screenshot(3)"><i class="el-icon-camera"></i></p>
</div>
......@@ -120,42 +120,20 @@ export default {
rightDown:7,
zoomExpand:8,
zoomNarrow:9,
focusNear:10,
focusFar:11,
stop:-1
},
nowPanTilt:'',
isShowTime:true,// 是否显示时间操作区，默认为true
height:'',// 设置组件高度
isShowJT:false,// 是否显示截图按钮，默认为false
isShowSplit:true,// 是否支持四分屏，默认为true
controlAutoHide:true,// 是否显示视频操作区，默认为true
showPtz:true,// 是否显示视频操作区中的云台控制，默认为true
}
},
props:{
// 是否显示时间操作区，默认为true
isShowTime: {
type: Boolean,
default: true,
},
// 设置组件高度
height:{
type: String,
default: '',
},
// 是否显示截图按钮，默认为false
isShowJT: {
type: Boolean,
default: false,
},
// 是否支持四分屏，默认为true
isShowSplit: {
type: Boolean,
default: true,
},
// 是否显示视频操作区，默认为true
controlAutoHide: {
type: Boolean,
default: true,
},
// 是否显示视频操作区中的云台控制，默认为true
showPtz: {
type: Boolean,
default: true,
},
},
computed: {
videoHeight() {
const windowInnerHeight = window.innerHeight;
......@@ -166,6 +144,29 @@ export default {
window.playWebVideo = this.playWebVideo;
},
methods: {
initWebVideo(obj) {
console.log(obj)
if(obj.isShowTime !== undefined&&obj.isShowTime !== null) {
this.isShowTime = obj.isShowTime
}
if(obj.height !== undefined&&obj.height !== null) {
this.height = obj.height
}
if(obj.isShowJT !== undefined&&obj.isShowJT !== null) {
this.isShowJT = obj.isShowJT
}
if(obj.isShowSplit !== undefined&&obj.isShowSplit !== null) {
this.isShowSplit = obj.isShowSplit
}
if(obj.controlAutoHide !== undefined&&obj.controlAutoHide !== null) {
this.controlAutoHide = obj.controlAutoHide
}
if(obj.showPtz !== undefined&&obj.showPtz !== null) {
this.showPtz = obj.showPtz
}
console.log(this.controlAutoHide)
console.log(this.showPtz)
},
playWebVideo(obj) {
if(obj.splitNum >=0) {
this.splitNum = obj.splitNum
......@@ -177,16 +178,16 @@ export default {
obj.watermarkText = obj.watermarkText||'';
if(this.playerNum == 4) {
this.videoArrObj[this.splitNum] = Object.assign({}, obj)
this.$forceUpdate()
this.getVideoAddress(obj,this.splitNum)
} else {
this.videoObj = Object.assign({}, obj);
this.$forceUpdate()
this.getVideoAddress(obj)
}
this.$forceUpdate()
if(this.isShowTime) {
this.$refs.videoTime.startPlay()
}
this.splitNumChange()
},
// 获取视频播放地址
getVideoAddress(obj,index) {
......@@ -201,13 +202,24 @@ export default {
console.log(res)
if (res.data&&res.data.code == 200) {
if(this.playerNum == 4) {
this.videoArrObj[index].playUrl = res.data.msg ? res.data.msg : '';
if(index == 0) {
console.log(this.videoArrObj[this.splitNum],this.splitNum)
console.log(this.$refs.vionPlayer0)
this.$refs.vionPlayer0.play(res.data.msg);
}
if(index == 1) {
this.$refs.vionPlayer1.play(res.data.msg);
}
if(index == 2) {
this.$refs.vionPlayer2.play(res.data.msg);
}
if(index == 3) {
this.$refs.vionPlayer3.play(res.data.msg);
}
} else {
this.videoObj.playUrl = res.data.msg ? res.data.msg : '';
console.log(this.videoObj)
this.$forceUpdate()
// this.$refs.vionPlayer.play(res.data.msg);
this.$refs.vionPlayer.play(res.data.msg);
}
this.splitNumChange()
}
})
},
......@@ -233,29 +245,31 @@ export default {
},
// 四分屏，单屏切换
splitScreenChange(val) {
if(val == 4) {
if(this.$refs.vionPlayer) {
this.$refs.vionPlayer.stopPlay();
}
} else {
if(this.$refs.vionPlayer0) {
this.$refs.vionPlayer0.stopPlay();
}
if(this.$refs.vionPlayer1) {
this.$refs.vionPlayer1.stopPlay();
}
if(this.$refs.vionPlayer2) {
this.$refs.vionPlayer2.stopPlay();
}
if(this.$refs.vionPlayer3) {
this.$refs.vionPlayer3.stopPlay();
if(this.playerNum != val) {
if(val == 4) {
if(this.$refs.vionPlayer) {
this.$refs.vionPlayer.destroy();
}
} else {
if(this.$refs.vionPlayer0) {
this.$refs.vionPlayer0.destroy();
}
if(this.$refs.vionPlayer1) {
this.$refs.vionPlayer1.destroy();
}
if(this.$refs.vionPlayer2) {
this.$refs.vionPlayer2.destroy();
}
if(this.$refs.vionPlayer3) {
this.$refs.vionPlayer3.destroy();
}
}
this.$refs.videoTime.stopPlay()
// console.log(val)
this.playerNum = val
this.videoArrObj = []
this.splitNum = 0
}
this.$refs.videoTime.stopPlay()
// console.log(val)
this.playerNum = val
this.videoArrObj = []
this.splitNum = 0
},
// 分屏单个播放窗口点击
selectVideoChange(val) {
......@@ -270,28 +284,51 @@ export default {
}
// 更新视频地址
if(this.playerNum == 4) {
this.getVideoAddress(this.videoArrObj[0],0)
this.getVideoAddress(this.videoArrObj[1],1)
this.getVideoAddress(this.videoArrObj[2],2)
this.getVideoAddress(this.videoArrObj[3],3)
if(this.videoArrObj[0]){
this.getVideoAddress(this.videoArrObj[0],0)
}
if(this.videoArrObj[1]){
this.getVideoAddress(this.videoArrObj[1],1)
}
if(this.videoArrObj[2]){
this.getVideoAddress(this.videoArrObj[2],2)
}
if(this.videoArrObj[3]){
this.getVideoAddress(this.videoArrObj[3],3)
}
} else {
this.getVideoAddress(this.videoObj)
}
},
// 云台控制接口调用
panTiltControl(val,gateUnid) {
if(val != 'stop') {
this.nowPanTilt = this.panTiltList[val]
}
let par = {
direction:this.panTiltList[val],
speed:2,
gateUnid:gateUnid
}
if(val == 'stop') {
tourApi.ptzStop(par).then(res => {})
par.direction = this.nowPanTilt
tourApi.ptzStop(par).then(res => {
console.log(res)
})
} else {
tourApi.ptzStart(par).then(res => {})
tourApi.ptzStart(par).then(res => {
console.log(res)
if(res.data&&res.data.code != 200) {
this.$message({
message: res.data.msg||'云台当前操作失败',
type: 'warning'
});
}
})
}
},
panTiltControlComp(val){
console.log(val,this.videoObj.gateUnid)
this.panTiltControl(val,this.videoObj.gateUnid)
},
panTiltControlComp0(val){
......@@ -320,19 +357,33 @@ export default {
* num为分屏时的窗口序号，从0开始；不传则认为是单屏
*/
screenshot(num) {
let imgInfo = ''
if(num === 0) {
imgInfo = this.$refs.vionPlayer0.screenshot()
this.$refs.vionPlayer0.screenshot().then(data => {
return data;
}).catch(err => {
})
} else if(num === 1) {
imgInfo = this.$refs.vionPlayer1.screenshot()
this.$refs.vionPlayer1.screenshot().then(data => {
return data;
}).catch(err => {
})
} else if(num === 2) {
imgInfo = this.$refs.vionPlayer2.screenshot()
this.$refs.vionPlayer2.screenshot().then(data => {
return data;
}).catch(err => {
})
} else if(num === 3) {
imgInfo = this.$refs.vionPlayer3.screenshot()
this.$refs.vionPlayer3.screenshot().then(data => {
return data;
}).catch(err => {
})
} else {
imgInfo = this.$refs.vionPlayer.screenshot()
this.$refs.vionPlayer.screenshot().then(data => {
return data;
}).catch(err => {
})
}
return imgInfo;
},
/**
* 关闭视频播放
......@@ -341,26 +392,23 @@ export default {
stopPlay(val) {
if(val >=0) {
if(val === 0) {
this.$refs.vionPlayer0.stopPlay();
this.$refs.vionPlayer0.destroy();
} else if(val === 1) {
this.$refs.vionPlayer1.stopPlay();
this.$refs.vionPlayer1.destroy();
} else if(val === 2) {
this.$refs.vionPlayer2.stopPlay();
this.$refs.vionPlayer2.destroy();
} else if(val === 3) {
this.$refs.vionPlayer3.stopPlay();
this.$refs.vionPlayer3.destroy();
}
this.videoArrObj[val] = null
this.splitNum = val
} else {
this.$refs.vionPlayer.stopPlay();
this.$refs.vionPlayer.destroy();
}
if(this.playerNum == 1||(this.playerNum == 4&&!this.videoArrObj[0]&&!this.videoArrObj[1]&&!this.videoArrObj[2]&&!this.videoArrObj[3])) {
this.$refs.videoTime.stopPlay()
}
},
}
}
......@@ -438,12 +486,12 @@ export default {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 4px;
}
.video-split-one{
width: calc(50% - 2px);
height: 100%;
position: relative;
border: 2px solid rgba(255,255,255,0.4);
}
}
}
......
h5/src/views/pc/pcdemo.vue
......@@ -5,28 +5,40 @@
<el-button type="primary" @click="addPlayer({gateUnid: '85de13a8-5775-11ee-94ed-00163e143ecd'})">河南分公司--办公室--办公室监控</el-button>
<el-button type="primary" @click="addPlayer({gateUnid: '85de1aec-5775-11ee-94ed-00163e143ecd',watermarkText:'Demo Store'})">Demo Store--客流相机-入口1</el-button>
</div>
<iframe id="iframe" name="iframe" ref="iframe" style="width: 100vw;height:calc(100vh - 60px);" src="/nvsdemo/#/jplayer-web" frameborder="0"></iframe>
<!-- <iframe name="iframe" ref="iframe" style="width: 100vw;height:calc(100vh - 60px);" src="http://192.168.1.117:8080/" frameborder="0"></iframe> -->
<indexPlayer ref="iframe"></indexPlayer>
<!-- <iframe id="iframe" name="iframe" ref="iframe" style="width: 100vw;height:calc(100vh - 60px);" src="/nvsdemo/#/jplayer-web" frameborder="0"></iframe> -->
<!-- <iframe id="iframe" name="iframe" ref="iframe" style="width: 100vw;height:calc(100vh - 60px);" src="http://192.168.1.67:9091/#/vion-player-demo" frameborder="0"></iframe> -->
</div>
</template>
<script>
// import indexPlayer from './index.vue';
import indexPlayer from './index.vue';
export default {
name: 'jplayerWebDemo',
components: {
// indexPlayer,
indexPlayer,
},
data() {
return {
}
},
created() {
console.log(window.JessibucaPro)
},
mounted() {
this.$refs.iframe.initWebVideo({
isShowTime:true,// 是否显示时间操作区，默认为true
height:'',// 设置组件高度
isShowJT:false,// 是否显示截图按钮，默认为false
isShowSplit:false,// 是否支持四分屏，默认为true
controlAutoHide:false,// 是否显示视频操作区，默认为true
showPtz:false,// 是否显示视频操作区中的云台控制，默认为true
})
},
methods: {
addPlayer(obj) {
// window.playWebVideo(obj)
window.parent.document.getElementById('iframe').contentWindow.playWebVideo(obj)
// document.getElementById('iframe').contentWindow.playWebVideo(obj);
// window.parent.document.getElementById('iframe').contentWindow.playWebVideo(obj)
this.$refs.iframe.playWebVideo(obj)
},
},
}
......
h5/src/views/pc/timeline-canvas.vue
......@@ -52,14 +52,12 @@ export default {
return "";
},
},
// 需要标记的时间
markTime: {
markTimeArr: {
type: Array,
default() {
return [];
},
},
//是否自动播放
isAutoPlay: {
type: Boolean,
......@@ -96,6 +94,7 @@ export default {
},
data() {
return {
markTime:[],
//像素比
dpr: 1,
// realTimeRange: [],
......@@ -205,6 +204,12 @@ export default {
}
if (this.interval_play) clearInterval(this.interval_play);
},
// 重置画布
resetCanvas() {
this.markTime = []
this.stop()
this.drow();
},
/**
* 进度条播放(每次走一秒)
* @param {String|Date} date 启动时间,不传启动时间为this.meddleTime
......@@ -710,6 +715,9 @@ export default {
changeProps: function (newV) {
this.drow();
},
markTimeArr: function (newV) {
this.markTime = Object.assign([],newV)
},
},
};
// import Hammer from "./assets/hammerjs";
......
h5/src/views/pc/videoTime.vue
......@@ -65,7 +65,7 @@
<i class="el-icon-arrow-left"></i>
</div> -->
<div class="timeline-canvas-box">
<TimeLineCanvas id="timeline-canvas" ref="time_line" @click="clickCanvas" @change="changeDate" :mark-time="markTime" :time-range="timeRange" :isAutoPlay="isAutoPlay" :startMeddleTime="startMeddleTime" @mouseMove="mouseMoveDate"/>
<TimeLineCanvas id="timeline-canvas" ref="time_line" @click="clickCanvas" @change="changeDate" :markTimeArr="markTime" :time-range="timeRange" :isAutoPlay="isAutoPlay" :startMeddleTime="startMeddleTime" @mouseMove="mouseMoveDate"/>
</div>
<!-- <div class="timeline-icon-box" @click="timeLineMove(1)">
<i class="el-icon-arrow-right"></i>
......@@ -200,6 +200,7 @@ export default {
this.isAutoPlay = true
},
stopPlay() {
console.log(1)
this.isAutoPlay = false
this.isNoBack = true
this.markTime = []
......@@ -212,8 +213,9 @@ export default {
this.startMeddleTime = moment().format('YYYY-MM-DD HH:mm:ss')
this.daySubtractNum = 0
if(this.$refs.time_line) {
this.$refs.time_line.stop();
this.$refs.time_line.resetCanvas();
}
this.$forceUpdate()
},
showDayChange(val) {
this.showDayShow = val
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!