<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}`);
//！注意：如果播放直播流（監(jiān)控視頻）必須將參數(shù)isLive:true加上，不然會導致短時間內(nèi)斷流會造成視頻頁面卡頓
let player = flvjs.createPlayer({
type: 'flv',
url: camInfo.camera_url_flv,
isLive: true //直播流
});
player.attachMediaElement(videoEle);
player.load();
player.play();
this.players.push(player);
})
})
})
}
},
//調(diào)用組件
created () {
this.fetch()
},
//在銷毀生命周期內(nèi)銷毀組件
destroyed () {
this.players.forEach(player => {
player.pause();
player.unload();
player.detachMediaElement();
player.destroy();
player = null;
})
}
}
</script>
