|
flv.js使用前注意 flvjs只能播放HTTPFLV協(xié)議的的視頻流 <template>
<!-- <data-box title="重點區(qū)域視頻聯(lián)動" 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}`);
//！注意：如果播放直播流（監(jiān)控視頻）必須將參數(shù)isLive:true加上，不然會導(dǎo)致短時間內(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>
<template>
<!-- <data-box title="重點區(qū)域視頻聯(lián)動" 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>
|
|
|
