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 278 additions and 17 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 @@ ...@@ -7,8 +7,14 @@
<!-- <eventList></eventList> --> <!-- <eventList></eventList> -->
<devInfo></devInfo> <devInfo></devInfo>
</div> </div>
<!-- <div class="video-box"> <div class="video-box">
</div> --> <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>
<div style="clear: both;"></div> <div style="clear: both;"></div>
</el-col> </el-col>
...@@ -98,6 +104,9 @@ ...@@ -98,6 +104,9 @@
</template> </template>
<script> <script>
// import mPlayvideo from "../public/mapvideo"
import videoPlay from "../public/mapvideo";
import videoPlay2 from "../public/mapvideo2";
import showmap from "./map"; import showmap from "./map";
import illegaltrend from "./illegaltrend"; import illegaltrend from "./illegaltrend";
import eventTypedis from "./eventTypedis"; import eventTypedis from "./eventTypedis";
...@@ -115,7 +124,8 @@ export default { ...@@ -115,7 +124,8 @@ export default {
setShow: false, setShow: false,
archiveUnid: 0, archiveUnid: 0,
snap_num: 0, snap_num: 0,
playurl: "", playurl: {},
playurl2:{},
audit_num: 0, audit_num: 0,
snapData: { snapData: {
illega_total_snap_num: 0, illega_total_snap_num: 0,
...@@ -126,14 +136,38 @@ export default { ...@@ -126,14 +136,38 @@ export default {
}; };
}, },
components: { components: {
showmap, showmap,
// mPlayvideo,
videoPlay,
videoPlay2,
illegaltrend, illegaltrend,
eventTypedis, eventTypedis,
alarmEvent, alarmEvent,
devInfo, devInfo,
eventList 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: { methods: {
alarmevent(data) { alarmevent(data) {
//移动地图 //移动地图
...@@ -381,7 +415,7 @@ export default { ...@@ -381,7 +415,7 @@ export default {
height: 46.5vh; height: 46.5vh;
width: 30vw; width: 30vw;
margin-bottom: 1vh; margin-bottom: 1vh;
background: #444444; background: #f0f0f0;
left: 0; left: 0;
right: 0; right: 0;
top: 0; top: 0;
...@@ -389,4 +423,20 @@ export default { ...@@ -389,4 +423,20 @@ export default {
margin: auto; margin: auto;
z-index: 1000; 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> </style>
src/views/trafficShow/map.vue
<template> <template>
<div> <div>
<div id="map" class="maps"></div> <div id="map" class="maps"></div>
<div id="popup" class="ol-popup"> <div id="popup" class="ol-popup">
<a <a
href="#" href="#"
id="popup-closer" id="popup-closer"
class="ol-popup-closer" class="ol-popup-closer"
@click="closepopup" @click="closepopup"
></a> ></a>
<div id="t-popup-content"></div> <div class="" id="t-popup-content">
</div>
</div> </div>
<div id="videopopup" class="ol-popup"> <div id="videopopup" class="ol-popup">
<a <a
...@@ -17,8 +18,8 @@ ...@@ -17,8 +18,8 @@
class="ol-popup-closer" class="ol-popup-closer"
@click="closevideopopup" @click="closevideopopup"
></a> ></a>
<div id=""> <div class="mapvideo">
<videoPlay ref="ocx" :playurl="playurl"></videoPlay> <videoPlay ref="mapvideo" :playurl="playurl"></videoPlay>
</div> </div>
</div> </div>
</div> </div>
...@@ -73,7 +74,8 @@ var overlay = ""; ...@@ -73,7 +74,8 @@ var overlay = "";
export default { export default {
data() { data() {
return { return {
devList: [] devList: [],
playurl:{}
}; };
}, },
components: { components: {
...@@ -292,23 +294,23 @@ export default { ...@@ -292,23 +294,23 @@ export default {
autoPan: true, autoPan: true,
position: pos, position: pos,
autoPanAnimation: { autoPanAnimation: {
duration: 500 duration: 50
} }
}); });
map.addOverlay(overlay); map.addOverlay(overlay);
let obj = {}; let obj = {};
if (data.vchan_name == "视频1") { if (data.vchan_name == "视频1") {
obj.rtsp_url = 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") { } else if (data.vchan_name == "视频2") {
obj.rtsp_url = 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.playurl = obj;
// this.$store.commit('setocxstate', 1)
setTimeout(() => { setTimeout(() => {
this.$refs.ocx.videoPlay(); this.$refs.mapvideo.videoPlay();
}, 0); }, 100);
//获取视频流 //获取视频流
// this.$api.device.getFxStream(this.dev_unid, data.vchan_refid).then(res => { // this.$api.device.getFxStream(this.dev_unid, data.vchan_refid).then(res => {
// debugger // debugger
...@@ -447,4 +449,8 @@ export default { ...@@ -447,4 +449,8 @@ export default {
color: red color: red
} }
} }
.mapvideo{
height 100%;
width 100%;
}
</style> </style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!