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
>