|
|
|
|
@ -9,46 +9,42 @@
|
|
|
|
|
<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-item" v-for="i in item.cameras" :key="i.id">
|
|
|
|
|
<!-- <canvas :class="['video',i.id?'video'+i.id:'']">-->
|
|
|
|
|
|
|
|
|
|
<!-- </canvas>-->
|
|
|
|
|
<div class="vxgplayer" :id="'video'+i.id"
|
|
|
|
|
:url="i.rtsp"
|
|
|
|
|
autostart
|
|
|
|
|
avsync
|
|
|
|
|
nmf-src="/video_play_plugins/pnacl/Release/media_player.nmf"
|
|
|
|
|
nmf-path="media_player.nmf"
|
|
|
|
|
width="390" height="219"
|
|
|
|
|
latency="0"
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<object style="width:390px;height:219px" class="video-obj" :id="'video'+i.id"
|
|
|
|
|
type='application/x-vlc-plugin' events='True' width="100%" height="100%"
|
|
|
|
|
pluginspage="http://www.videolan.org"
|
|
|
|
|
codebase="http://downloads.videolan.org/pub/videolan/vlc-webplugins/2.0.6/npapi-vlc-2.0.6.tar.xz">
|
|
|
|
|
<param name='controls' value='false'/>
|
|
|
|
|
<param name='text' value='正在加载视频中...'/>
|
|
|
|
|
<param name='branding' value='false'/>
|
|
|
|
|
<param name="windowless" value="true">
|
|
|
|
|
<param name='fullscreen' value='false'/>
|
|
|
|
|
<param name='mrl' :value='i.rtsp'/>
|
|
|
|
|
<param name='autoplay' value='true'/>
|
|
|
|
|
<embed type="application/x-google-vlc-plugin"/>
|
|
|
|
|
</object>
|
|
|
|
|
<div class="video-name">
|
|
|
|
|
<iframe class="vlcIframe"
|
|
|
|
|
style=" position:absolute;visibility:inherit; top:0px;left:0px;height:100%;width:100%; z-Index:-1; ">
|
|
|
|
|
</iframe>
|
|
|
|
|
{{item.streetName}} {{i.name}}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="video-model" @click="showModel(i)">
|
|
|
|
|
<div class="video-model">
|
|
|
|
|
<iframe class="vlcIframe"
|
|
|
|
|
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>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<Model
|
|
|
|
|
:visible.sync="visible"
|
|
|
|
|
:modelData.sync="modelData"
|
|
|
|
|
@close="closeModel"
|
|
|
|
|
/>
|
|
|
|
|
<!-- <div class="vxgplayer" id="video"-->
|
|
|
|
|
<!-- url="rtsp://admin:admin123@192.168.66.108:554/cam/realmonitor?channel=1&subtype=0"-->
|
|
|
|
|
<!-- autostart-->
|
|
|
|
|
<!-- controls-->
|
|
|
|
|
<!-- avsync-->
|
|
|
|
|
<!-- nmf-src="video_play_plugins/pnacl/Release/media_player.nmf"-->
|
|
|
|
|
<!-- nmf-path="media_player.nmf"-->
|
|
|
|
|
<!-- width="400" height="227"-->
|
|
|
|
|
<!-- latency="0"-->
|
|
|
|
|
<!-- >-->
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
@ -65,30 +61,31 @@ export default {
|
|
|
|
|
player:"",
|
|
|
|
|
visible:false,
|
|
|
|
|
modelData:[],
|
|
|
|
|
vlcz: null
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
inject: ['reload'],
|
|
|
|
|
mounted() {
|
|
|
|
|
console.log('index mounted执行了')
|
|
|
|
|
this.getRealTimeList()
|
|
|
|
|
// this.getSdVideos()
|
|
|
|
|
},
|
|
|
|
|
destroyed(){
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
beforeRouteLeave(to,form,next){
|
|
|
|
|
if(window.vxgplayer){
|
|
|
|
|
this.realTimeListData.forEach(function (item) {
|
|
|
|
|
console.log(item)
|
|
|
|
|
item.cameras.forEach(function (item) {
|
|
|
|
|
window.vxgplayer('video'+item.id).dispose();
|
|
|
|
|
})
|
|
|
|
|
next(true)
|
|
|
|
|
})
|
|
|
|
|
}else {
|
|
|
|
|
next(true)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
beforeRouteLeave(to,form,next) {
|
|
|
|
|
// if(this.vlcz){
|
|
|
|
|
// var that = this
|
|
|
|
|
// this.realTimeListData.forEach(function (item) {
|
|
|
|
|
// console.log(item)
|
|
|
|
|
// var $that = that
|
|
|
|
|
// item.cameras.forEach(function (item) {
|
|
|
|
|
// $that.vlcz.playlist.stop();
|
|
|
|
|
// })
|
|
|
|
|
// next(true)
|
|
|
|
|
// })
|
|
|
|
|
// }else{
|
|
|
|
|
// next(true)
|
|
|
|
|
// }
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
getRealTimeList(){
|
|
|
|
|
@ -99,44 +96,50 @@ export default {
|
|
|
|
|
console.log(res.data)
|
|
|
|
|
if(res.code == 200) {
|
|
|
|
|
this.realTimeListData = res.data
|
|
|
|
|
console.log('首页getRealTimeList方法执行了')
|
|
|
|
|
res.data.forEach(function (item) {
|
|
|
|
|
// console.log(item.cameras)
|
|
|
|
|
var $that = that
|
|
|
|
|
console.log('进来第一层循环了')
|
|
|
|
|
item.cameras.forEach(function (item) {
|
|
|
|
|
// console.log(item.rtsp)
|
|
|
|
|
console.log('进来第二层循环了')
|
|
|
|
|
$that.playVideo('video'+item.id,item.rtsp)
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
// res.data.forEach(function (item) {
|
|
|
|
|
// // console.log(item.cameras)
|
|
|
|
|
// var $that = that
|
|
|
|
|
// item.cameras.forEach(function (item) {
|
|
|
|
|
// // console.log(item.rtsp)
|
|
|
|
|
// $that.playVideo('video'+item.id,item.rtsp)
|
|
|
|
|
// })
|
|
|
|
|
// })
|
|
|
|
|
}
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
console.log(err)
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
playVideo(id,rtsp){
|
|
|
|
|
// 设置url 播放 ---添加到事件队列在下一个tick执行，避免 TypeError: t.module.postMessage is not a function
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
// window.vxgplayer('vxg_media_player1').stop();
|
|
|
|
|
window.vxgplayer(id).src(rtsp);
|
|
|
|
|
window.vxgplayer(id).play();
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
tabsChange(key){
|
|
|
|
|
// playVideo(id,rtsp){
|
|
|
|
|
// // 设置url 播放 ---添加到事件队列在下一个tick执行，避免 TypeError: t.module.postMessage is not a function
|
|
|
|
|
// this.$nextTick(() => {
|
|
|
|
|
// var vlc = document.getElementById(`${id}`);
|
|
|
|
|
// var options = new Array(":network-caching=100");//减少延迟
|
|
|
|
|
// var vlcItem = vlc.playlist.add(`${rtsp}`, `${id}`, options);
|
|
|
|
|
// // vlc.playlist.play()
|
|
|
|
|
// vlc.playlist.playItem(vlcItem);
|
|
|
|
|
// console.log('切换大屏前')
|
|
|
|
|
// })
|
|
|
|
|
// },
|
|
|
|
|
tabsChange(key) {
|
|
|
|
|
console.log(key)
|
|
|
|
|
},
|
|
|
|
|
showModel(item){
|
|
|
|
|
showModel(item) {
|
|
|
|
|
console.log(item)
|
|
|
|
|
this.visible = true
|
|
|
|
|
this.modelData=item
|
|
|
|
|
console.log(vxgplayer('video'+item.id))
|
|
|
|
|
// vxgplayer('video'+item.id).fullscreen()
|
|
|
|
|
this.modelData = item
|
|
|
|
|
// this.vlcz.playlist.stop()
|
|
|
|
|
},
|
|
|
|
|
closeModel(visible,data){
|
|
|
|
|
closeModel(visible, data) {
|
|
|
|
|
this.visible = visible
|
|
|
|
|
this.modelData=data
|
|
|
|
|
// vxgplayer('video'+data.id).changedFullscreen()
|
|
|
|
|
this.modelData = data
|
|
|
|
|
this.reload()
|
|
|
|
|
this.tabsChange()
|
|
|
|
|
console.log(this.realTimeListData)
|
|
|
|
|
console.log('切换大屏后')
|
|
|
|
|
// console.log(this.vlcz.playlist.currentItem)
|
|
|
|
|
// console.log(this.vlcz.playlist.isPlaying)
|
|
|
|
|
// this.vlcz.playlist.play()
|
|
|
|
|
// console.log(this.vlcz.playlist.isPlaying)
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
components:{
|
|
|
|
|
@ -173,34 +176,42 @@ export default {
|
|
|
|
|
transform-origin: center;
|
|
|
|
|
transition: all 0.2s linear;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.anticon-rotate {
|
|
|
|
|
transform: rotate(180deg);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
#video-cav{
|
|
|
|
|
position: fixed;
|
|
|
|
|
z-index: 999;
|
|
|
|
|
border: solid 1px skyblue;
|
|
|
|
|
width: 390px;
|
|
|
|
|
height: 219px;
|
|
|
|
|
}
|
|
|
|
|
.flex-layouts{
|
|
|
|
|
|
|
|
|
|
/*#video-cav{*/
|
|
|
|
|
/* position: fixed;*/
|
|
|
|
|
/* z-index: 999;*/
|
|
|
|
|
/* border: solid 1px skyblue;*/
|
|
|
|
|
/* width: 390px;*/
|
|
|
|
|
/* height: 219px;*/
|
|
|
|
|
/*}*/
|
|
|
|
|
.flex-layouts {
|
|
|
|
|
display: flex;
|
|
|
|
|
width: 1630px;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
}
|
|
|
|
|
.video-list{
|
|
|
|
|
|
|
|
|
|
.video-list {
|
|
|
|
|
display: flex;
|
|
|
|
|
.video-item{
|
|
|
|
|
|
|
|
|
|
.video-item {
|
|
|
|
|
display: flex;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 219px;
|
|
|
|
|
position: relative;
|
|
|
|
|
margin: 3px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
z-index: 10;
|
|
|
|
|
.video-name{
|
|
|
|
|
/*.video-obj{*/
|
|
|
|
|
|
|
|
|
|
/*}*/
|
|
|
|
|
.video-name {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 15px;
|
|
|
|
|
left: 15px;
|
|
|
|
|
@ -209,24 +220,14 @@ export default {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
z-index: 10;
|
|
|
|
|
}
|
|
|
|
|
.video-model{
|
|
|
|
|
|
|
|
|
|
.video-model {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
z-index: 10;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*.video{*/
|
|
|
|
|
/* border: solid 1px #000000;*/
|
|
|
|
|
/* background: #001529;*/
|
|
|
|
|
/* width: 400px;*/
|
|
|
|
|
/* height: 225px;*/
|
|
|
|
|
/*}*/
|
|
|
|
|
.vxgplayer {
|
|
|
|
|
border: none;
|
|
|
|
|
margin: 0;
|
|
|
|
|
z-index: 20;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
张鑫
5 years ago