点击刷新
flv.js使用前注意
flvjs只能播放HTTPFLV协议的的视频流
<template>
<!-- <data-box title="重点区域视频联动" block> -->
<!-- <div class="video-box"> -->
<div class="video-list">
<div
v-for="(video, idx) in videoList"
:key="idx"
class="video-item">
<div class="video-con">
<div class="video-info">
<video
:id="video.index + '_' + idx"
width="540"
height="300"
autoplay
muted
>
<!-- <source src="video/jpk-1.mp4" type="video/mp4"> -->
</video>
</div>
<div class="video-name">{{video.camera_name}}</div>
</div>
</div>
</div>
<!-- </div> -->
<!-- </data-box> -->
</template>
<script>
import flvjs from 'flv.js'
import { getData } from '@/assets/api/app'
// let players = [];
export default {
name: 'video-list',
props: {},
data () {
return {
videoList: [
// {
// camId: '99809b42-70a0-11e9-8592-fa163e4635ff',
// camName: '十候一检票口'
// }
],
players:[]
}
},
computed: {},
methods: {
fetch () {
getData('getCameraList_RTMP').then(data => {
data = data.data;
this.videoList = [
...data[0].camera_list,
...data[1].camera_list,
]
console.log(this.videoList)
this.$nextTick(()=>{
this.videoList.forEach( (camInfo , idx) => {
let videoEle = document.getElementById(`${camInfo.index}_${idx}`);
//！注意：如果播放直播流（监控视频）必须将参数isLive:true加上，不然会导致短时间内断流会造成视频页面卡顿
let player = flvjs.createPlayer({
type: 'flv',
url: camInfo.camera_url_flv,
isLive: true //直播流
});
player.attachMediaElement(videoEle);
player.load();
player.play();
this.players.push(player);
})
})
})
}
},
//调用组件
created () {
this.fetch()
},
//在销毁生命周期内销毁组件
destroyed () {
this.players.forEach(player => {
player.pause();
player.unload();
player.detachMediaElement();
player.destroy();
player = null;
})
}
}
</script>
<template>
<!-- <data-box title="重点区域视频联动" block> -->
<!-- <div class="video-box"> -->
<div class="video-list">
<div
v-for="(video, idx) in videoList"
:key="idx"
class="video-item">
<div class="video-con">
<div class="video-info">
<video
:id="video.index + '_' + idx"
width="540"
height="300"
autoplay
muted
>
<!-- <source src="video/jpk-1.mp4" type="video/mp4"> -->
</video>
</div>
<div class="video-name">{{video.camera_name}}</div>
</div>
</div>
</div>
<!-- </div> -->
<!-- </data-box> -->
</template>
© 著作权归作者所有
举报
相关热门文章
发表评论
0/200
