Skip to content

蒋秀川 / miniProject

Go to a project
Commit b5c4d73f by 李乾广
Options

修改bug

1 parent ccdd4d5d
Inline Side-by-side
Showing 4 changed files with 89 additions and 49 deletions
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">
<j-player ref="jplay" <vion-player ref="vionPlayer" :watermarkText="params.watermarkText" :controlAutoHide="false" :showPtz="false"/>
:type="playerType"
:prefix-url="params.prefixUrl"
:watermark-text="params.watermark"
:player-address="params.address"
:channel-id="params.channelId"
:datetime-range="datetimeRange"
/>
</div> </div>
<!-- 时间线组件 --> <!-- 时间线组件 -->
<div class="extension-time-box"> <div class="extension-time-box">
<videoTime ref="videoTime" @videoTimeChange="videoTimeChange" @ptzControlClick="ptzControlClick" @ptzControlStop="ptzControlStop"/> <videoTime ref="videoTime" @videoTimeChange="videoTimeChange" @ptzControlClick="ptzControlClick"/>
</div> </div>
</div> </div>
...@@ -21,9 +13,10 @@ ...@@ -21,9 +13,10 @@
<script> <script>
import { getUrlParams } from './utils'; import { getUrlParams } from './utils';
import JPlayer from '@/components/jPlayer'; 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';
/** /**
* 此部分负责： * 此部分负责：
* 1. iframe通信postmessage * 1. iframe通信postmessage
...@@ -33,68 +26,118 @@ import moment from "moment"; ...@@ -33,68 +26,118 @@ import moment from "moment";
export default { export default {
name: 'JPlayerExtension', name: 'JPlayerExtension',
components: { components: {
JPlayer, vionPlayer,
videoTime, videoTime,
}, },
data() { data() {
return { return {
playerType: 'live', isNoBack: true,
datetimeRange: [], datetimeRange: [],
params: { params: {
// channelId: '20000000001310000011', gateUnid: '',
channelId: '', watermarkText: '',
address: '52.130.155.147',
prefixUrl: '',
watermark: '',
}, },
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:'',
} }
}, },
created() { created() {
console.log(window.JessibucaPro)
this.init(); this.init();
}, },
methods: { methods: {
// 时间线改变 // 时间线改变
videoTimeChange(val) { videoTimeChange(val) {
this.playerType = moment(val).format('YYYY-MM-DD HH:mm:ss') == moment().format('YYYY-MM-DD HH:mm:ss')?'live':'playback'; let startTime = null
if(this.playerType == 'playback'){ let stopTime = null
this.datetimeRange = [new Date(moment(val).format("YYYY-MM-DD HH:mm:ss")).getTime(),new Date().getTime()] if(moment(val).format('YYYY-MM-DD HH:mm:ss') != moment().format('YYYY-MM-DD HH:mm:ss')){
startTime = moment(val).format('YYYY-MM-DD HH:mm:ss')
stopTime = moment().format('YYYY-MM-DD HH:mm:ss')
} }
this.getVideoAddress(startTime,stopTime)
}, },
// 云台控制 // 云台控制
ptzControlClick(type) { ptzControlClick(type) {
console.log(type) console.log(type)
// this.$refs.jplay.ptzController(type); if(type != 'stop') {
}, this.nowPanTilt = this.panTiltList[type]
// 云台控制结束 }
ptzControlStop() { let par = {
// this.$refs.jplay.ptzController('stop'); direction:this.panTiltList[type],
speed:2,
gateUnid:this.params.gateUnid
}
if(type == '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'
});
}
})
}
}, },
init() { init() {
// 通过URL获取相关参数 // 通过URL获取相关参数
const urlParamsMap = getUrlParams(window.location.hash); const urlParamsMap = getUrlParams(window.location.hash);
console.log('urlParamsMap', urlParamsMap); console.log('urlParamsMap', urlParamsMap);
Object.keys(this.params).forEach(key => { Object.keys(this.params).forEach(key => {
if (urlParamsMap[key]) { if (urlParamsMap[key]) {
this.params[key] = urlParamsMap[key]; this.params[key] = urlParamsMap[key];
} }
}); });
if (!this.params.gateUnid) {
if (!this.params.address || !this.params.channelId) {
console.error('传递URL参数有误，请确认 address 和 channelId 是否正确。'); console.error('传递URL参数有误，请确认 address 和 channelId 是否正确。');
} }
this.getVideoAddress()
},
// 获取视频播放地址
getVideoAddress(startTime,stopTime) {
let par = {
gateUnid: this.params.gateUnid,
startTime:startTime?startTime:null,
stopTime:stopTime?stopTime:null,
}
tourApi.getLiveAndPlaybackAddress(par).then(res => {
console.log(res)
if (res.data&&res.data.code == 200) {
this.$refs.vionPlayer.play(res.data.msg);
}
})
}, },
// 暴露方法 // 暴露方法
// 截图方法
screenshot() { screenshot() {
return this.$refs.jplay.screenshot(); this.$refs.vionPlayer.screenshot().then(data => {
return data;
}).catch(err => {
})
}, },
// 关闭视频播放
stopPlay() { stopPlay() {
return this.$refs.jplay.stopPlay(); this.$refs.vionPlayer.destroy();
}, },
}, },
} }
......
h5/src/views/extension/videoTime.vue
...@@ -41,17 +41,16 @@ ...@@ -41,17 +41,16 @@
<div class="ptz-control-box" v-if="ptzControlShow"> <div class="ptz-control-box" v-if="ptzControlShow">
<div class="ptz-control-left-box" :class="[ptzControlType=='left'?'ptz-left':ptzControlType=='top'?'ptz-top':ptzControlType=='right'?'ptz-right':ptzControlType=='bottom'?'ptz-bottom':'']"> <div class="ptz-control-left-box" :class="[ptzControlType=='left'?'ptz-left':ptzControlType=='top'?'ptz-top':ptzControlType=='right'?'ptz-right':ptzControlType=='bottom'?'ptz-bottom':'']">
<div class="ptz-control-left" @mousedown="ptzControlOneClick('left')" @mouseup="ptzControlStop" @mouseleave="ptzControlStop" @touchstart="ptzControlOneClick('left')" @touchend="ptzControlStop"></div> <div class="ptz-control-left" @mousedown="ptzControlOneClick('left')" @mouseup="ptzControlStop" @mouseleave="ptzControlStop" @touchstart="ptzControlOneClick('left')" @touchend="ptzControlStop"></div>
<div class="ptz-control-top" @mousedown="ptzControlOneClick('top')" @mouseup="ptzControlStop" @mouseleave="ptzControlStop" @touchstart="ptzControlOneClick('top')" @touchend="ptzControlStop"></div> <div class="ptz-control-top" @mousedown="ptzControlOneClick('up')" @mouseup="ptzControlStop" @mouseleave="ptzControlStop" @touchstart="ptzControlOneClick('up')" @touchend="ptzControlStop"></div>
<div class="ptz-control-right" @mousedown="ptzControlOneClick('right')" @mouseup="ptzControlStop" @mouseleave="ptzControlStop" @touchstart="ptzControlOneClick('right')" @touchend="ptzControlStop"></div> <div class="ptz-control-right" @mousedown="ptzControlOneClick('right')" @mouseup="ptzControlStop" @mouseleave="ptzControlStop" @touchstart="ptzControlOneClick('right')" @touchend="ptzControlStop"></div>
<div class="ptz-control-bottom" @mousedown="ptzControlOneClick('bottom')" @mouseup="ptzControlStop" @mouseleave="ptzControlStop" @touchstart="ptzControlOneClick('bottom')" @touchend="ptzControlStop"></div> <div class="ptz-control-bottom" @mousedown="ptzControlOneClick('down')" @mouseup="ptzControlStop" @mouseleave="ptzControlStop" @touchstart="ptzControlOneClick('down')" @touchend="ptzControlStop"></div>
<div class="ptz-control-content"></div> <div class="ptz-control-content"></div>
</div> </div>
<div class="ptz-control-right-box"> <div class="ptz-control-right-box">
<div class="ptz-control-jia" @mousedown="ptzControlOneClick('jia')" @mouseup="ptzControlStop" @mouseleave="ptzControlStop" @touchstart="ptzControlOneClick('jia')" @touchend="ptzControlStop">+</div> <div class="ptz-control-jia" @mousedown="ptzControlOneClick('zoomExpand')" @mouseup="ptzControlStop" @mouseleave="ptzControlStop" @touchstart="ptzControlOneClick('zoomExpand')" @touchend="ptzControlStop">+</div>
<div class="ptz-control-jian" @mousedown="ptzControlOneClick('jian')" @mouseup="ptzControlStop" @mouseleave="ptzControlStop" @touchstart="ptzControlOneClick('jian')" @touchend="ptzControlStop">-</div> <div class="ptz-control-jian" @mousedown="ptzControlOneClick('zoomNarrow')" @mouseup="ptzControlStop" @mouseleave="ptzControlStop" @touchstart="ptzControlOneClick('zoomNarrow')" @touchend="ptzControlStop">-</div>
</div> </div>
</div> </div>
<!-- 日历下拉框 --> <!-- 日历下拉框 -->
<van-calendar v-model="showDaySelectShow" @confirm="showDayChange" color="rgb(1,167,245)" :min-date="minDay" :max-date="maxDay" row-height="40" :show-subtitle="false"/> <van-calendar v-model="showDaySelectShow" @confirm="showDayChange" color="rgb(1,167,245)" :min-date="minDay" :max-date="maxDay" row-height="40" :show-subtitle="false"/>
<!-- 时间下拉框 --> <!-- 时间下拉框 -->
...@@ -326,7 +325,7 @@ export default { ...@@ -326,7 +325,7 @@ export default {
// 云台控制结束 // 云台控制结束
ptzControlStop() { ptzControlStop() {
this.ptzControlType = '' this.ptzControlType = ''
this.$emit('ptzControlStop') this.$emit('ptzControlClick','stop')
}, },
// 快退/快进 // 快退/快进
......
h5/src/views/pc/index.vue
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<i class="el-icon-close"></i> <i class="el-icon-close"></i>
</div> </div>
</div> </div>
<vion-player v-if="videoObj.gateUnid" ref="vionPlayer" :watermarkText="videoObj.watermarkText" :controlAutoHide="controlAutoHide" :showPtz="showPtz" @ptz-control="panTiltControlComp"/> <vion-player v-if="videoObj.gateUnid" ref="vionPlayer" :watermarkText="videoObj.watermarkText" :controlAutoHide="controlAutoHide" :showPtz="isNoBack&&showPtz?true:false" @ptz-control="panTiltControlComp"/>
<div class="cameraTool" v-show="isShowJT"> <div class="cameraTool" v-show="isShowJT">
<p class="screenshot" @click="screenshot()"><i class="el-icon-camera"></i></p> <p class="screenshot" @click="screenshot()"><i class="el-icon-camera"></i></p>
</div> </div>
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
<i class="el-icon-close"></i> <i class="el-icon-close"></i>
</div> </div>
</div> </div>
<vion-player ref="vionPlayer0" v-if="videoArrObj[0]" :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="isNoBack&&showPtz?true:false" @ptz-control="panTiltControlComp0"/>
<div class="cameraTool" v-show="isShowJT&&videoArrObj[0]"> <div class="cameraTool" v-show="isShowJT&&videoArrObj[0]">
<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>
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
<i class="el-icon-close"></i> <i class="el-icon-close"></i>
</div> </div>
</div> </div>
<vion-player ref="vionPlayer1" v-if="videoArrObj[1]" :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="isNoBack&&showPtz?true:false" @ptz-control="panTiltControlComp1"/>
<div class="cameraTool" v-show="isShowJT&&videoArrObj[1]"> <div class="cameraTool" v-show="isShowJT&&videoArrObj[1]">
<p class="screenshot" @click="screenshot(1)"><i class="el-icon-camera"></i></p> <p class="screenshot" @click="screenshot(1)"><i class="el-icon-camera"></i></p>
</div> </div>
...@@ -56,7 +56,7 @@ ...@@ -56,7 +56,7 @@
<i class="el-icon-close"></i> <i class="el-icon-close"></i>
</div> </div>
</div> </div>
<vion-player ref="vionPlayer2" v-if="videoArrObj[2]" :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="isNoBack&&showPtz?true:false" @ptz-control="panTiltControlComp2"/>
<div class="cameraTool" v-show="isShowJT&&videoArrObj[2]"> <div class="cameraTool" v-show="isShowJT&&videoArrObj[2]">
<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>
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
<i class="el-icon-close"></i> <i class="el-icon-close"></i>
</div> </div>
</div> </div>
<vion-player ref="vionPlayer3" v-if="videoArrObj[3]" :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="isNoBack&&showPtz?true:false" @ptz-control="panTiltControlComp3"/>
<div class="cameraTool" v-show="isShowJT&&videoArrObj[3]"> <div class="cameraTool" v-show="isShowJT&&videoArrObj[3]">
<p class="screenshot" @click="screenshot(3)"><i class="el-icon-camera"></i></p> <p class="screenshot" @click="screenshot(3)"><i class="el-icon-camera"></i></p>
</div> </div>
...@@ -164,8 +164,6 @@ export default { ...@@ -164,8 +164,6 @@ export default {
if(obj.showPtz !== undefined&&obj.showPtz !== null) { if(obj.showPtz !== undefined&&obj.showPtz !== null) {
this.showPtz = obj.showPtz this.showPtz = obj.showPtz
} }
console.log(this.controlAutoHide)
console.log(this.showPtz)
}, },
playWebVideo(obj) { playWebVideo(obj) {
if(obj.splitNum >=0) { if(obj.splitNum >=0) {
......
h5/src/views/pc/pcdemo.vue
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
<div> <div>
<!-- 添加视频测试 --> <!-- 添加视频测试 -->
<div> <div>
<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>
<el-button type="primary" @click="addPlayer({gateUnid: '85de1aec-5775-11ee-94ed-00163e143ecd',watermarkText:'Demo Store'})">Demo Store--客流相机-入口1</el-button> <el-button type="primary" @click="addPlayer({gateUnid: '85de1326-5775-11ee-94ed-00163e143ecd',watermarkText:'Demo Store'})">Demo Store--客流相机-入口1</el-button>
</div> </div>
<indexPlayer ref="iframe"></indexPlayer> <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="/nvsdemo/#/jplayer-web" frameborder="0"></iframe> -->
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!