flv.js使用前注意
flvjs只能播放HTTPFLV協議的的視頻流
<template> <!-- <data-box title="重點區域視頻聯動" block> --> <!-- <div > --> <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="https://www.cnblogs.com/wybs/archive/2020/12/04/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 > --> <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="https://www.cnblogs.com/wybs/archive/2020/12/04/video/jpk-1.mp4" type="video/mp4"> --> </video> </div> <div class="video-name">{{video.camera_name}}</div> </div> </div>
</div> <!-- </div> --> <!-- </data-box> --> </template>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/230242.html
標籤：其他