Skip to content

蒋秀川 / miniProject

Go to a project
Commit 457834ca by 李乾广
Options

修改pc端组件

1 parent aa48bdd2
Inline Side-by-side
Showing 7 changed files with 224 additions and 76 deletions
h5/package.json
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
}, },
"dependencies": { "dependencies": {
"axios": "^0.26.1",
"core-js": "^3.8.3", "core-js": "^3.8.3",
"element-ui": "^2.15.14", "element-ui": "^2.15.14",
"less": "^4.2.0", "less": "^4.2.0",
......
h5/src/api/http.js 0 → 100644
import axios from 'axios'
import { Toast } from 'vant';
const baseURL = 'https://store.keliuyun.com';
const Axios = axios.create({
baseURL: baseURL, // 因为我本地做了反向代理
timeout: 0,
// responseType: "json",
changeOrigin: true,//允许跨域
withCredentials: true, // 是否允许带cookie这些
headers: {
"Content-Type": "application/json;charset=UTF-8"
// 'Content-Type': 'application/x-www-form-urlencoded'
}
})
// 请求拦截器
Axios.interceptors.request.use(
config => {
return config;
}, error => {
console.error(error);
return Promise.reject(error.data.msg)
}
)
Axios.interceptors.response.use(
res => {
if (res.data && !res.data.success) {
if (res.data.ecode && res.data.ecode != 200) {
return res.data.enote;
} else if (res.status == 200) {
return res;
}
return Promise.reject(res.data.msg);
} else if (!res.data && res.status == 200) {
return res;
}
return res;
}
)
export default function(method, url, data = null, config = null, bodyDelete) {
method = method.toLowerCase()
if (method == 'post') {
return Axios.post(url, data, config)
} else if (method == 'get') {
let defaultParam = {
_t: Date.parse(new Date()) / 1000
}
return Axios.get(url, { params: {...defaultParam, ...data }, config })
} else if (bodyDelete) {
return Axios.delete(url, { data: data }, config)
} else if (method == 'delete') {
return Axios.delete(url, { params: data }, config)
} else if (method == 'put') {
return Axios.put(url, data, config)
} else {
console.error('unknown method' + method)
return false
}
}
\ No newline at end of file \ No newline at end of file
h5/src/api/index.js 0 → 100644
import req from '@/api/http.js'
const tourApi = {
// 获取通道的视频直播与回放地址
getLiveAndPlaybackAddress(params, config){
return req('GET', `/patrol/patrolDeviceChannel/getLiveAndPlaybackAddress`, params, config)
},
// 云控制
ptzStart(params,config) {
return req('PUT', `/patrol/patrolDeviceChannel/ptzStart`, params, config)
},
ptzStop(params,config) {
return req('PUT', `/patrol/patrolDeviceChannel/ptzStop`, params, config)
},
}
export default tourApi;
\ No newline at end of file \ No newline at end of file
h5/src/components/vionPlayer/index.vue
...@@ -47,6 +47,7 @@ export default { ...@@ -47,6 +47,7 @@ export default {
} }
}, },
mounted() { mounted() {
console.log("this.playUrl", this.playUrl);
this.init(); this.init();
}, },
unmounted() { unmounted() {
...@@ -54,6 +55,7 @@ export default { ...@@ -54,6 +55,7 @@ export default {
}, },
methods:{ methods:{
init(params = {}) { init(params = {}) {
console.log("this.playUrl", this.playUrl);
const options = Object.assign({ const options = Object.assign({
container: this.$refs.container, container: this.$refs.container,
decoder: '/jessibuca-pro/decoder-pro.js', decoder: '/jessibuca-pro/decoder-pro.js',
...@@ -102,7 +104,7 @@ export default { ...@@ -102,7 +104,7 @@ export default {
this._jessibuca = new window.JessibucaPro(options); this._jessibuca = new window.JessibucaPro(options);
this.registerEvent(this._jessibuca); this.registerEvent(this._jessibuca);
console.log("this.playUrl", this.playUrl);
if (this.playUrl) { if (this.playUrl) {
// 示例上有延迟写法 // 示例上有延迟写法
setTimeout(this.play(this.playUrl), 150); setTimeout(this.play(this.playUrl), 150);
......
h5/src/views/pc/index.vue
<template> <template>
<div class="video-page" :style="{height:isFullScreen?'100%':allVideoHeight?allVideoHeight:videoHeight+'px'}"> <div class="video-page" :style="{height:isFullScreen?'100%':height?height:videoHeight+'px'}">
<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="isShowTitle&&videoObj.channelId" class="elRow"> <div v-if="videoObj.name" class="elRow">
<div class="gateName"> <div class="gateName">
{{videoObj.name||''}} {{videoObj.name}}
</div> </div>
<div class="closeIcon" @click="stopPlay"> <div class="closeIcon" @click="stopPlay">
<i class="el-icon-close"></i> <i class="el-icon-close"></i>
</div> </div>
</div> </div>
<j-player v-if="videoObj.channelId" ref="jPlayer" :type="jPlayerType" :channel-id="videoObj.channelId" :datetime-range="jPlayerTimeRange" :prefix-url="videoObj.prefixUrl" :player-address="videoObj.address" :watermark="params.watermark"/> <vion-player v-if="videoObj.playUrl" ref="vionPlayer" :playUrl="videoObj.playUrl" :watermarkText="videoObj.watermarkText" :controlAutoHide="controlAutoHide" :showPtz="showPtz" @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>
...@@ -18,29 +18,29 @@ ...@@ -18,29 +18,29 @@
<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" @click="selectVideoChange(0)">
<div v-if="isShowTitle&&videoArrObj[0]&&videoArrObj[0].channelId" class="elRow"> <div v-if="videoArrObj[0]&&videoArrObj[0].name" class="elRow">
<div class="gateName"> <div class="gateName">
{{videoArrObj[0].name||''}} {{videoArrObj[0].name}}
</div> </div>
<div class="closeIcon" @click="stopPlay(0)"> <div class="closeIcon" @click="stopPlay(0)">
<i class="el-icon-close"></i> <i class="el-icon-close"></i>
</div> </div>
</div> </div>
<j-player ref="jPlayer0" v-if="videoArrObj[0]" :type="jPlayerType" :channel-id="videoArrObj[0].channelId" :datetime-range="jPlayerTimeRange" :prefix-url="videoArrObj[0].prefixUrl" :player-address="videoArrObj[0].address" :watermark="videoArrObj[0].watermark"/> <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"/>
<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>
</div> </div>
<div class="video-split-one" @click="selectVideoChange(1)"> <div class="video-split-one" @click="selectVideoChange(1)">
<div v-if="isShowTitle&&videoArrObj[1]&&videoArrObj[1].channelId" class="elRow"> <div v-if="videoArrObj[1]&&videoArrObj[1].name" class="elRow">
<div class="gateName"> <div class="gateName">
{{videoArrObj[1].name||''}} {{videoArrObj[1].name}}
</div> </div>
<div class="closeIcon" @click="stopPlay(1)"> <div class="closeIcon" @click="stopPlay(1)">
<i class="el-icon-close"></i> <i class="el-icon-close"></i>
</div> </div>
</div> </div>
<j-player ref="jPlayer1" v-if="videoArrObj[1]" :type="jPlayerType" :channel-id="videoArrObj[1].channelId" :datetime-range="jPlayerTimeRange" :prefix-url="videoArrObj[1].prefixUrl" :player-address="videoArrObj[1].address" :watermark="videoArrObj[1].watermark"/> <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"/>
<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>
...@@ -48,29 +48,29 @@ ...@@ -48,29 +48,29 @@
</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" @click="selectVideoChange(2)">
<div v-if="isShowTitle&&videoArrObj[2]&&videoArrObj[2].channelId" class="elRow"> <div v-if="videoArrObj[2]&&videoArrObj[2].name" class="elRow">
<div class="gateName"> <div class="gateName">
{{videoArrObj[2].name||''}} {{videoArrObj[2].name}}
</div> </div>
<div class="closeIcon" @click="stopPlay(2)"> <div class="closeIcon" @click="stopPlay(2)">
<i class="el-icon-close"></i> <i class="el-icon-close"></i>
</div> </div>
</div> </div>
<j-player ref="jPlayer2" v-if="videoArrObj[2]" :type="jPlayerType" :channel-id="videoArrObj[2].channelId" :datetime-range="jPlayerTimeRange" :prefix-url="videoArrObj[2].prefixUrl" :player-address="videoArrObj[2].address" :watermark="videoArrObj[2].watermark"/> <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"/>
<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>
</div> </div>
<div class="video-split-one" @click="selectVideoChange(3)"> <div class="video-split-one" @click="selectVideoChange(3)">
<div v-if="isShowTitle&&videoArrObj[3]&&videoArrObj[3].channelId" class="elRow"> <div v-if="videoArrObj[3]&&videoArrObj[3].name" class="elRow">
<div class="gateName"> <div class="gateName">
{{videoArrObj[3].name||''}} {{videoArrObj[3].name}}
</div> </div>
<div class="closeIcon" @click="stopPlay(3)"> <div class="closeIcon" @click="stopPlay(3)">
<i class="el-icon-close"></i> <i class="el-icon-close"></i>
</div> </div>
</div> </div>
<j-player ref="jPlayer3" v-if="videoArrObj[3]" :type="jPlayerType" :channel-id="videoArrObj[3].channelId" :datetime-range="jPlayerTimeRange" :prefix-url="videoArrObj[3].prefixUrl" :player-address="videoArrObj[3].address" :watermark="videoArrObj[3].watermark"/> <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"/>
<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>
...@@ -86,30 +86,42 @@ ...@@ -86,30 +86,42 @@
<script> <script>
import videoTime from './videoTime.vue' import videoTime from './videoTime.vue'
import jPlayer from '@/components/jPlayer'; import vionPlayer from '@/components/vionPlayer';
import moment from 'moment' import moment from 'moment'
import tourApi from '@/api';
export default { export default {
name: 'JPlayerWeb', name: 'VionPlayerWeb',
components:{ components:{
videoTime, videoTime,
jPlayer, vionPlayer,
}, },
data() { data() {
return { return {
videoArrObj:[], videoArrObj:[],
isFullScreen:false, isFullScreen:false,
jPlayerType:'live',
videoObj: { videoObj: {
channelId: '', gateUnid: '',
address: '52.130.155.147', watermarkText: '',
prefixUrl: '', name:'',
watermark: '',
}, },
jPlayerTimeRange:[], videoPlayTime:'',
videoBackEndTime:'',
isNoBack:true,
playerNum:1, playerNum:1,
splitNum:0, splitNum:0,
panTiltList:{
videoPlayTime:'', up:0,
down:1,
left:2,
right:3,
leftUp:4,
leftDown:5,
rightUp:6,
rightDown:7,
zoomExpand:8,
zoomNarrow:9,
stop:-1
},
} }
}, },
props:{ props:{
...@@ -119,7 +131,7 @@ export default { ...@@ -119,7 +131,7 @@ export default {
default: true, default: true,
}, },
// 设置组件高度 // 设置组件高度
allVideoHeight:{ height:{
type: String, type: String,
default: '', default: '',
}, },
...@@ -128,16 +140,21 @@ export default { ...@@ -128,16 +140,21 @@ export default {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
// 是否显示头部标题栏，默认为false
isShowTitle: {
type: Boolean,
default: false,
},
// 是否支持四分屏，默认为true // 是否支持四分屏，默认为true
isShowSplit: { isShowSplit: {
type: Boolean, type: Boolean,
default: true, default: true,
}, },
// 是否显示视频操作区，默认为true
controlAutoHide: {
type: Boolean,
default: true,
},
// 是否显示视频操作区中的云台控制，默认为true
showPtz: {
type: Boolean,
default: true,
},
}, },
computed: { computed: {
videoHeight() { videoHeight() {
...@@ -150,10 +167,6 @@ export default { ...@@ -150,10 +167,6 @@ export default {
}, },
methods: { methods: {
playWebVideo(obj) { playWebVideo(obj) {
if (!obj.address || !obj.channelId) {
console.error('传递URL参数有误，请确认 address 和 channelId 是否正确。');
return false
}
if(obj.splitNum >=0) { if(obj.splitNum >=0) {
this.splitNum = obj.splitNum this.splitNum = obj.splitNum
} }
...@@ -161,22 +174,43 @@ export default { ...@@ -161,22 +174,43 @@ export default {
if(this.$refs.videoTime) { if(this.$refs.videoTime) {
this.$refs.videoTime.stopPlay() this.$refs.videoTime.stopPlay()
} }
this.jPlayerTimeRange = []; obj.watermarkText = obj.watermarkText||'';
this.jPlayerType = 'live';
obj.prefixUrl = obj.prefixUrl||'';
obj.watermark = obj.watermark||'';
if(this.playerNum == 4) { if(this.playerNum == 4) {
this.videoArrObj[this.splitNum] = Object.assign({}, obj) this.videoArrObj[this.splitNum] = Object.assign({}, obj)
this.getVideoAddress(obj,this.splitNum)
} else { } else {
this.videoObj = Object.assign({}, obj); this.videoObj = Object.assign({}, obj);
this.getVideoAddress(obj)
} }
console.log(this.videoObj)
this.$forceUpdate() this.$forceUpdate()
if(this.isShowTime) { if(this.isShowTime) {
this.$refs.videoTime.startPlay() this.$refs.videoTime.startPlay()
} }
this.splitNumChange() this.splitNumChange()
}, },
// 获取视频播放地址
getVideoAddress(obj,index) {
let par = {
gateUnid: obj.gateUnid,
}
if(!this.isNoBack){
par.startTime = obj.startTime?obj.startTime:this.videoPlayTime;
par.stopTime = obj.stopTime?obj.stopTime:this.videoBackEndTime;
}
tourApi.getLiveAndPlaybackAddress(par).then(res => {
console.log(res)
if (res.data&&res.data.code == 200) {
if(this.playerNum == 4) {
this.videoArrObj[index].playUrl = res.data.msg ? 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);
}
}
})
},
// 分屏时选中屏数自动改变 // 分屏时选中屏数自动改变
splitNumChange() { splitNumChange() {
if(this.playerNum == 4) { if(this.playerNum == 4) {
...@@ -193,30 +227,28 @@ export default { ...@@ -193,30 +227,28 @@ export default {
}, },
allVideoExitFullScreen(){ allVideoExitFullScreen(){
this.isFullScreen = false this.isFullScreen = false
this.$emit('exitFullScreen')
}, },
allVideoFullScreen(val){ allVideoFullScreen(val){
this.isFullScreen = true this.isFullScreen = true
this.$emit('fullScreen')
}, },
// 四分屏，单屏切换 // 四分屏，单屏切换
splitScreenChange(val) { splitScreenChange(val) {
if(val == 4) { if(val == 4) {
if(this.$refs.jPlayer) { if(this.$refs.vionPlayer) {
this.$refs.jPlayer.stopPlay(); this.$refs.vionPlayer.stopPlay();
} }
} else { } else {
if(this.$refs.jPlayer0) { if(this.$refs.vionPlayer0) {
this.$refs.jPlayer0.stopPlay(); this.$refs.vionPlayer0.stopPlay();
} }
if(this.$refs.jPlayer1) { if(this.$refs.vionPlayer1) {
this.$refs.jPlayer1.stopPlay(); this.$refs.vionPlayer1.stopPlay();
} }
if(this.$refs.jPlayer2) { if(this.$refs.vionPlayer2) {
this.$refs.jPlayer2.stopPlay(); this.$refs.vionPlayer2.stopPlay();
} }
if(this.$refs.jPlayer3) { if(this.$refs.vionPlayer3) {
this.$refs.jPlayer3.stopPlay(); this.$refs.vionPlayer3.stopPlay();
} }
} }
this.$refs.videoTime.stopPlay() this.$refs.videoTime.stopPlay()
...@@ -231,18 +263,55 @@ export default { ...@@ -231,18 +263,55 @@ export default {
}, },
// 时间线改变 // 时间线改变
videoTimeChange(val) { videoTimeChange(val) {
this.videoPlayTime = val this.isNoBack = val == moment().format('YYYY-MM-DD HH:mm:ss')
let isNoBack = moment(this.videoPlayTime).format('YYYY-MM-DD HH:mm:ss') == moment().format('YYYY-MM-DD HH:mm:ss') if(!this.isNoBack){
this.jPlayerType = isNoBack?'live':'playback' this.videoPlayTime = val
if(!isNoBack){ this.videoBackEndTime = moment().format('YYYY-MM-DD HH:mm:ss')
let startTime = new Date(moment(this.videoPlayTime).format("YYYY-MM-DD HH:mm:ss")).getTime() }
let endTime = new Date().getTime() // 更新视频地址
this.jPlayerTimeRange = [startTime,endTime] 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)
} else {
this.getVideoAddress(this.videoObj)
}
},
// 云台控制接口调用
panTiltControl(val,gateUnid) {
let par = {
direction:this.panTiltList[val],
speed:2,
gateUnid:gateUnid
}
if(val == 'stop') {
tourApi.ptzStop(par).then(res => {})
} else {
tourApi.ptzStart(par).then(res => {})
} }
}, },
panTiltControlComp(val){
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) { videoTimeSync(val) {
this.videoPlayTime = val this.videoPlayTime = val
this.videoBackEndTime = moment().format('YYYY-MM-DD HH:mm:ss')
}, },
// 暴露方法 // 暴露方法
...@@ -253,15 +322,15 @@ export default { ...@@ -253,15 +322,15 @@ export default {
screenshot(num) { screenshot(num) {
let imgInfo = '' let imgInfo = ''
if(num === 0) { if(num === 0) {
imgInfo = this.$refs.jPlayer0.screenshot() imgInfo = this.$refs.vionPlayer0.screenshot()
} else if(num === 1) { } else if(num === 1) {
imgInfo = this.$refs.jPlayer1.screenshot() imgInfo = this.$refs.vionPlayer1.screenshot()
} else if(num === 2) { } else if(num === 2) {
imgInfo = this.$refs.jPlayer2.screenshot() imgInfo = this.$refs.vionPlayer2.screenshot()
} else if(num === 3) { } else if(num === 3) {
imgInfo = this.$refs.jPlayer3.screenshot() imgInfo = this.$refs.vionPlayer3.screenshot()
} else { } else {
imgInfo = this.$refs.jPlayer.screenshot() imgInfo = this.$refs.vionPlayer.screenshot()
} }
return imgInfo; return imgInfo;
}, },
...@@ -272,24 +341,26 @@ export default { ...@@ -272,24 +341,26 @@ export default {
stopPlay(val) { stopPlay(val) {
if(val >=0) { if(val >=0) {
if(val === 0) { if(val === 0) {
this.$refs.jPlayer0.stopPlay(); this.$refs.vionPlayer0.stopPlay();
} else if(val === 1) { } else if(val === 1) {
this.$refs.jPlayer1.stopPlay(); this.$refs.vionPlayer1.stopPlay();
} else if(val === 2) { } else if(val === 2) {
this.$refs.jPlayer2.stopPlay(); this.$refs.vionPlayer2.stopPlay();
} else if(val === 3) { } else if(val === 3) {
this.$refs.jPlayer3.stopPlay(); this.$refs.vionPlayer3.stopPlay();
} }
this.videoArrObj[val] = null this.videoArrObj[val] = null
this.splitNum = val this.splitNum = val
} else { } else {
this.$refs.jPlayer.stopPlay(); this.$refs.vionPlayer.stopPlay();
} }
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()
} }
}, },
} }
} }
......
h5/src/views/pc/pcdemo.vue
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
<div> <div>
<!-- 添加视频测试 --> <!-- 添加视频测试 -->
<div> <div>
<el-button type="primary" @click="addPlayer({channelId: '20000000001310000008',address: '52.130.155.147',prefixUrl:'nvsdemo'})">添加视频一</el-button> <el-button type="primary" @click="addPlayer({gateUnid: '85de13a8-5775-11ee-94ed-00163e143ecd'})">河南分公司--办公室--办公室监控</el-button>
<el-button type="primary" @click="addPlayer({channelId: '20000000001310000008',address: '52.130.155.147',prefixUrl:'nvsdemo'})">添加视频二</el-button> <el-button type="primary" @click="addPlayer({gateUnid: '85de1aec-5775-11ee-94ed-00163e143ecd',watermarkText:'Demo Store'})">Demo Store--客流相机-入口1</el-button>
</div> </div>
<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>
<!-- <iframe name="iframe" ref="iframe" style="width: 100vw;height:calc(100vh - 60px);" src="http://192.168.1.117:8080/" 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> -->
......
h5/src/views/pc/videoTime.vue
...@@ -309,7 +309,7 @@ export default { ...@@ -309,7 +309,7 @@ export default {
this.mouseTimeMin = moment(date).format('mm') this.mouseTimeMin = moment(date).format('mm')
this.mouseTimeSec = moment(date).format('ss') this.mouseTimeSec = moment(date).format('ss')
this.isNoBack = moment(date).format('YYYY-MM-DD HH:mm:ss') == moment().format('YYYY-MM-DD HH:mm:ss') this.isNoBack = moment(date).format('YYYY-MM-DD HH:mm:ss') == moment().format('YYYY-MM-DD HH:mm:ss')
this.$emit('videoTimeChange',date) this.$emit('videoTimeChange',moment(date).format('YYYY-MM-DD HH:mm:ss'))
}, },
changeDate(date, status) { changeDate(date, status) {
// console.log("选择时间：" + date + " 播放状态：" + status); // console.log("选择时间：" + date + " 播放状态：" + status);
...@@ -322,7 +322,7 @@ export default { ...@@ -322,7 +322,7 @@ export default {
this.$forceUpdate() this.$forceUpdate()
} }
// console.log(this.nowPlayTime) // console.log(this.nowPlayTime)
this.$emit('videoTimeSync',date) this.$emit('videoTimeSync',moment(date).format('YYYY-MM-DD HH:mm:ss'))
if (moment(date).format('YYYY-MM-DD') == moment().format('YYYY-MM-DD')) { if (moment(date).format('YYYY-MM-DD') == moment().format('YYYY-MM-DD')) {
this.markTime = [{ this.markTime = [{
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!