|
|
|
@ -7,35 +7,39 @@
|
|
|
|
</a-tab-pane>
|
|
|
|
</a-tab-pane>
|
|
|
|
</a-tabs>
|
|
|
|
</a-tabs>
|
|
|
|
<div class="flex-layouts">
|
|
|
|
<div class="flex-layouts">
|
|
|
|
<div class="video-list" v-for="(item,index) in realTimeListData" :key="(index+1).toString()" v-show="tabKey==0? tabKey==0 : tabKey==(index+1).toString()">
|
|
|
|
<div class="video-list" v-for="(item,index) in realTimeListData" :key="(index+1).toString()">
|
|
|
|
<div class="video-item" v-for="i in item.cameras" :key="i.id">
|
|
|
|
<div class="video-item" v-for="i in item.cameras" :key="i.id">
|
|
|
|
<object style="width:390px;height:219px" class="video-obj" :id="'video'+i.id"
|
|
|
|
<template v-if="tabKey==0? tabKey==0 : tabKey==(index+1).toString()">
|
|
|
|
type='application/x-vlc-plugin' events='True' width="100%" height="100%"
|
|
|
|
<object style="width:390px;height:219px" class="video-obj" :id="'video'+i.id"
|
|
|
|
pluginspage="http://www.videolan.org"
|
|
|
|
type='application/x-vlc-plugin' events='True' width="100%" height="100%"
|
|
|
|
codebase="http://downloads.videolan.org/pub/videolan/vlc-webplugins/2.0.6/npapi-vlc-2.0.6.tar.xz">
|
|
|
|
ref="vlc"
|
|
|
|
<param name='controls' value='false'/>
|
|
|
|
pluginspage="http://www.videolan.org"
|
|
|
|
<param name='text' value='正在加载视频中...'/>
|
|
|
|
codebase="http://downloads.videolan.org/pub/videolan/vlc-webplugins/2.0.6/npapi-vlc-2.0.6.tar.xz">
|
|
|
|
<param name='branding' value='false'/>
|
|
|
|
<param name='controls' value='false'/>
|
|
|
|
<param name="windowless" value="true">
|
|
|
|
<param name='text' value='正在加载视频中...'/>
|
|
|
|
<param name='fullscreen' value='false'/>
|
|
|
|
<param name='branding' value='false'/>
|
|
|
|
<param name='mrl' :value='i.rtsp'/>
|
|
|
|
<param name="windowless" value="true">
|
|
|
|
<param name='autoplay' value='yes'/>
|
|
|
|
<param name='fullscreen' value='false'/>
|
|
|
|
<embed type="application/x-google-vlc-plugin"/>
|
|
|
|
<param name='mrl' :value='i.rtsp'/>
|
|
|
|
</object>
|
|
|
|
<param name='autoplay' value='yes'/>
|
|
|
|
<div class="video-name">
|
|
|
|
<embed type="application/x-google-vlc-plugin"/>
|
|
|
|
<iframe class="vlcIframe"
|
|
|
|
</object>
|
|
|
|
style=" position:absolute;visibility:inherit; top:0px;left:0px;height:100%;width:100%; z-Index:-1; ">
|
|
|
|
<div class="video-name">
|
|
|
|
</iframe>
|
|
|
|
<iframe class="vlcIframe"
|
|
|
|
{{item.streetName}} {{i.name}}
|
|
|
|
style=" position:absolute;visibility:inherit; top:0px;left:0px;height:100%;width:100%; z-Index:-1; ">
|
|
|
|
</div>
|
|
|
|
</iframe>
|
|
|
|
<div class="video-model">
|
|
|
|
{{item.streetName}} {{i.name}}
|
|
|
|
<iframe class="vlcIframe"
|
|
|
|
</div>
|
|
|
|
style=" position:absolute;visibility:inherit; top:0px;left:0px;height:100%;width:100%; z-Index:-1; ">
|
|
|
|
<div class="video-model">
|
|
|
|
</iframe>
|
|
|
|
<iframe class="vlcIframe"
|
|
|
|
<div style="width: 100%;height: 100%" @click="showModel(i)">
|
|
|
|
style=" position:absolute;visibility:inherit; top:0px;left:0px;height:100%;width:100%; z-Index:-1; ">
|
|
|
|
|
|
|
|
</iframe>
|
|
|
|
|
|
|
|
<div style="width: 100%;height: 100%" @click="showModel(i)">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@ -54,25 +58,38 @@ export default {
|
|
|
|
path: [],
|
|
|
|
path: [],
|
|
|
|
player: "",
|
|
|
|
player: "",
|
|
|
|
visible: false,
|
|
|
|
visible: false,
|
|
|
|
modelData: [],
|
|
|
|
modelData: []
|
|
|
|
vlcz: null
|
|
|
|
|
|
|
|
};
|
|
|
|
};
|
|
|
|
},
|
|
|
|
},
|
|
|
|
inject: ['reload'],
|
|
|
|
inject: ['reload'],
|
|
|
|
mounted() {
|
|
|
|
mounted() {
|
|
|
|
console.log('index mounted执行了')
|
|
|
|
console.log('index mounted执行了')
|
|
|
|
this.getRealTimeList()
|
|
|
|
this.getRealTimeList()
|
|
|
|
|
|
|
|
if (sessionStorage.getItem('tabKey') == null) {
|
|
|
|
|
|
|
|
sessionStorage.setItem('tabKey', 0)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
this.tabKey = sessionStorage.getItem('tabKey')
|
|
|
|
},
|
|
|
|
},
|
|
|
|
destroyed(){
|
|
|
|
destroyed(){
|
|
|
|
|
|
|
|
if (this.$refs.vlc) {
|
|
|
|
|
|
|
|
for (var i = 0; i < this.$refs.vlc.length; i++) {
|
|
|
|
|
|
|
|
this.$refs.vlc[i].playlist.stop();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
beforeRouteLeave(to,form,next) {
|
|
|
|
beforeRouteLeave(to,form,next) {
|
|
|
|
if (this.vlcz.playlist) {
|
|
|
|
// console.log(11111111111111)
|
|
|
|
this.vlcz.playlist.stop();
|
|
|
|
console.log(this.$refs.vlc)
|
|
|
|
next(true)
|
|
|
|
this.$nextTick(() => {
|
|
|
|
} else {
|
|
|
|
if (this.$refs.vlc) {
|
|
|
|
next(true)
|
|
|
|
for (var i = 0; i < this.$refs.vlc.length; i++) {
|
|
|
|
}
|
|
|
|
this.$refs.vlc[i].playlist.stop();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
next(true)
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
next(true)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
})
|
|
|
|
console.log('beforeRouteLeave')
|
|
|
|
console.log('beforeRouteLeave')
|
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
methods: {
|
|
|
|
@ -100,20 +117,28 @@ export default {
|
|
|
|
playVideo(id, rtsp) {
|
|
|
|
playVideo(id, rtsp) {
|
|
|
|
// 设置url 播放 ---添加到事件队列在下一个tick执行，避免 TypeError: t.module.postMessage is not a function
|
|
|
|
// 设置url 播放 ---添加到事件队列在下一个tick执行，避免 TypeError: t.module.postMessage is not a function
|
|
|
|
this.$nextTick(() => {
|
|
|
|
this.$nextTick(() => {
|
|
|
|
var vlc = document.getElementById(`${id}`);
|
|
|
|
setTimeout(function () {
|
|
|
|
var options = new Array(":network-caching=100");//减少延迟
|
|
|
|
var vlc = document.getElementById(`${id}`);
|
|
|
|
var vlcItem = vlc.playlist.add(`${rtsp}`, `${id}`, options);
|
|
|
|
var options = new Array(":network-caching=100");//减少延迟
|
|
|
|
// vlc.playlist.play()
|
|
|
|
var vlcItem = vlc.playlist.add(`${rtsp}`, `${id}`, options);
|
|
|
|
vlc.playlist.playItem(vlcItem);
|
|
|
|
// vlc.playlist.play()
|
|
|
|
return this.vlcz = vlc
|
|
|
|
vlc.playlist.playItem(vlcItem);
|
|
|
|
|
|
|
|
console.log(22222222222222)
|
|
|
|
|
|
|
|
console.log(vlc)
|
|
|
|
|
|
|
|
}, 500)
|
|
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
})
|
|
|
|
},
|
|
|
|
},
|
|
|
|
tabsChange(key) {
|
|
|
|
tabsChange(key) {
|
|
|
|
console.log(key)
|
|
|
|
console.log(key)
|
|
|
|
|
|
|
|
sessionStorage.setItem('tabKey', key)
|
|
|
|
|
|
|
|
this.reload()
|
|
|
|
},
|
|
|
|
},
|
|
|
|
showModel(item) {
|
|
|
|
showModel(item) {
|
|
|
|
console.log(item)
|
|
|
|
console.log(item)
|
|
|
|
this.$router.push({name: "realTimeMonitoringModel", query: {modelData: item}});
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
|
|
|
this.$router.push({name: "realTimeMonitoringModel", query: {modelData: item}});
|
|
|
|
|
|
|
|
})
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
张鑫
5 years ago