Skip to content

platform / fanxing_new

Go to a project
Commit 188bc9f0 by 潘建波
Options

ocx setting

1 parent b7b9eada
Inline Side-by-side
Showing 4 changed files with 276 additions and 15 deletions
src/views/public/mapvideo.vue 0 → 100644
<template>
<div class="ocx-box" id="ocx-box" v-show="isShow">
<object id="VionVideo1" classid="clsid:93F960BB-5AF9-402B-A3DF-06112F14DC02" codebase="VionPlatformVideo.ocx" width="100%"
height="100%">
<!-- <param name="_Version" value="65536">
<param name="_ExtentX" value="2646">
<param name="_ExtentY" value="1323">
<param name="_StockProps" value="0"> -->
</object>
</div>
</template>
<script>
import {
mapState
} from 'vuex'
export default {
data() {
return {
urlFlag:false,
isShow:true
};
},
props: ['playurl', 'type'],
methods: {
videoPlay: function () {
this.urlFlag = false
if (!this.playurl.sip_serv_ip) {
let url = this.playurl.rtsp_url
let ocxPlayRes = document.getElementById('VionVideo1').StartPlay(url, 0);
console.log('video Ocx播放rtsp流返回值:', ocxPlayRes);
if (ocxPlayRes != 0) {
alert('播放失败!');
}
} else {
let OcxResponse = document.getElementById('VionVideo1').StartPlaySip(this.playurl.sip_serv_id, this.playurl.sip_serv_ip,
this.playurl.sip_serv_port, this.playurl.sip_unid, this.playurl.sip_password, this.playurl.devId, 0)
console.log('video Ocx播放sip流返回值:', OcxResponse);
if (OcxResponse != 0 && OcxResponse != 200) {
alert('播放失败!');
}
}
},
downOcx: function () {
if (this.fileUrl !== '' && !this.installOcx) {
location.href = this.fileUrl;
}
},
installOcxInfo: function () {
this.$confirm('为了正常使用,是否安装OCX控件?', '友情提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.installOcx = false;
this.downOcx();
}).catch(() => {
this.installOcxInfo();
});
},
initocx() {
VionVideo1.Init(0, 'Null', 4);
},
downloadOCx() {
// if (navigator.userAgent.indexOf('Trident') > -1) {
// this.axios.get(IP + "/api/v1/device/dlfile", {
// params: {
// file_type: "video_ocx"
// }
// })
// .then(response => {
// location.href = response.data.file_url;
// });
// } else {
// this.$message.error("视频控件加载失败请用IE10及以上版本打开！");
// }
},
checkIE() {
var agent = navigator.userAgent.toLowerCase();
if (/(msie\s|trident.*rv:)([\w.]+)/.test(agent) && document.documentMode < 10) {
this.$message.error("IE 版本过低请升级到IE10级以上版本！");
}
}
},
created() {
// this.checkIE();
},
computed: {
...mapState(['ocxstate'])
},
mounted() {
// VionVideo1.Init(0, 'Null', 4);
// try {
// if (document.getElementById("VionVideo1").GetVersion()) {
// }
// } catch (error) {
// this.downloadOCx();s
// }
},
watch: {
ocxstate(val) {
try {
if(val == 0){
this.isShow = false
document.getElementById("VionVideo1").StartPlay(1);
} else {
this.isShow = true
document.getElementById("VionVideo1").StartPlay(0);
}
} catch (error) {
console.log(error)
}
},
},
beforeDestroy: function () {
// if (this.videoplayer.techName_ == "Flash" && this.videoplayer.pause) {
// this.videoplayer.pause();
// }
}
};
</script>
<style lang="stylus" scoped>
.ocx-box{
height 100%
width 100%
}
</style>
src/views/public/mapvideo2.vue 0 → 100644
<template>
<div class="item">
<div class="player">
<div class="ocx-box">
<object id="VionVideo" classid="clsid:96DFBBAF-4220-4978-9681-4ABA534A7718"
width="98%" height="850" style="margin-left:.9%">
</object>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {};
},
props: ["playersrc", "vnum"],
methods: {
initocx(){
VionVideo.Init(0, 'Null', 4);
},
downloadOCx() {
if (navigator.userAgent.indexOf('Trident') > -1) {
this.axios.get(IP + "/api/v1/device/dlfile", {
params: {
file_type: "video_ocx"
}
})
.then(response => {
location.href = response.data.file_url;
});
} else {
this.$message.error("视频控件加载失败请用IE10及以上版本打开！");
}
},
checkIE() {
var agent = navigator.userAgent.toLowerCase();
if (/(msie\s|trident.*rv:)([\w.]+)/.test(agent) && document.documentMode < 10) {
this.$message.error("IE 版本过低请升级到IE10级以上版本！");
}
}
},
created() {
this.checkIE();
},
computed(){
this.initocx();
},
mounted() {
VionVideo.Init(0, 'Null', 4);
try {
if (document.getElementById("VionVideo").GetVersion()) {
}
} catch (error) {
this.downloadOCx();
}
},
watch: {
playersrc(val) {
alert(1)
document.getElementById("VionVideo").StartPlay(val, 0);
},
},
beforeDestroy: function () {
if (this.videoplayer.techName_ == "Flash" && this.videoplayer.pause) {
this.videoplayer.pause();
}
}
};
</script>
<style lang="stylus" scoped>
</style>
src/views/trafficShow/index.vue
......@@ -7,8 +7,14 @@
<!-- <eventList></eventList> -->
<devInfo></devInfo>
</div>
<!-- <div class="video-box">
</div> -->
<div class="video-box">
<div class="video-box-close"></div>
<!-- <mPlayvideo :playersrc="playurl"></mPlayvideo> -->
<!-- <videoPlay ref="mapvideo1" :playurl="playurl"></videoPlay> -->
<videoPlay2 ref="mapvideo2" :playurl="playurl2"></videoPlay2>
<!-- <videoPlay ref="mapvideo" :playurl="playurl"></videoPlay> -->
</div>
</div>
<div style="clear: both;"></div>
</el-col>
......@@ -98,6 +104,9 @@
</template>
<script>
// import mPlayvideo from "../public/mapvideo"
import videoPlay from "../public/mapvideo";
import videoPlay2 from "../public/mapvideo2";
import showmap from "./map";
import illegaltrend from "./illegaltrend";
import eventTypedis from "./eventTypedis";
......@@ -115,7 +124,8 @@ export default {
setShow: false,
archiveUnid: 0,
snap_num: 0,
playurl: "",
playurl: {},
playurl2:{},
audit_num: 0,
snapData: {
illega_total_snap_num: 0,
......@@ -127,13 +137,37 @@ export default {
},
components: {
showmap,
// mPlayvideo,
videoPlay,
videoPlay2,
illegaltrend,
eventTypedis,
alarmEvent,
devInfo,
eventList
},
mounted() {},
mounted() {
// let urlarr = ["rtsp://192.168.9.133:8554//opt/data/vedio/1579253441478.264","tsp://192.168.9.133:8554//opt/data/vedio/1577516797543.264"]
// urlarr.forEach((ele) => {
// let obj = {}
// obj.rtsp_url =ele;
// setTimeout(()=>{
// let obj = {}
// obj.rtsp_url = ele
// this.playurl = obj
// this.$refs.mapvideo.videoPlay();
// },100)
// })
let obj = {}
obj.rtsp_url = "rtsp://192.168.9.133:8554//opt/data/vedio/1579253441478.264";
this.playurl = obj
this.playurl2 = obj
setTimeout(() => {
this.$refs.mapvideo1.videoPlay();
this.$refs.mapvideo2.videoPlay();
}, 1000);
},
methods: {
alarmevent(data) {
//移动地图
......@@ -381,7 +415,7 @@ export default {
height: 46.5vh;
width: 30vw;
margin-bottom: 1vh;
background: #444444;
background: #f0f0f0;
left: 0;
right: 0;
top: 0;
......@@ -389,4 +423,20 @@ export default {
margin: auto;
z-index: 1000;
}
.video-box-close{
text-decoration: none;
position: absolute;
top: 2px;
right: 8px;
}
.video-box-close:after {
height:20px;
width:20px;
content: "✖";
color:#444444;
}
.play-item{
width:200px;
height:200px;
}
</style>
src/views/trafficShow/map.vue
......@@ -8,7 +8,8 @@
class="ol-popup-closer"
@click="closepopup"
></a>
<div id="t-popup-content"></div>
<div class="" id="t-popup-content">
</div>
</div>
<div id="videopopup" class="ol-popup">
<a
......@@ -17,8 +18,8 @@
class="ol-popup-closer"
@click="closevideopopup"
></a>
<div id="">
<videoPlay ref="ocx" :playurl="playurl"></videoPlay>
<div class="mapvideo">
<videoPlay ref="mapvideo" :playurl="playurl"></videoPlay>
</div>
</div>
</div>
......@@ -73,7 +74,8 @@ var overlay = "";
export default {
data() {
return {
devList: []
devList: [],
playurl:{}
};
},
components: {
......@@ -292,23 +294,23 @@ export default {
autoPan: true,
position: pos,
autoPanAnimation: {
duration: 500
duration: 50
}
});
map.addOverlay(overlay);
let obj = {};
if (data.vchan_name == "视频1") {
obj.rtsp_url =
"rtsp://192.168.9.133:20090/6af6f0f9a445463d8b07273fe538694d";
"rtsp://192.168.9.133:8554//opt/data/vedio/1579253441478.264";
} else if (data.vchan_name == "视频2") {
obj.rtsp_url =
"rtsp://192.168.9.133:20090/68504674201c4490bfe1a9d18c86b6ac";
"rtsp://192.168.9.133:8554//opt/data/vedio/1577516797543.264";
}
this.playurl = obj;
// this.$store.commit('setocxstate', 1)
setTimeout(() => {
this.$refs.ocx.videoPlay();
}, 0);
this.$refs.mapvideo.videoPlay();
}, 100);
//获取视频流
// this.$api.device.getFxStream(this.dev_unid, data.vchan_refid).then(res => {
// debugger
......@@ -447,4 +449,8 @@ export default {
color: red
}
}
.mapvideo{
height 100%;
width 100%;
}
</style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!