因项目需求,而flash又不受欢迎,故借助 flvjs 来实现flv格式视频流在线播放,具体解决方案如下:
1、安装 flvjs :npm install –save flv.js
2、引用:import flvjs from ‘flv.js’
3、HTML代码:
<div class="video-box" v-for="(video,index) in videoList" :key="index">
<video :id="'video'+index"
ref="videoElement"
controls autoplay muted ></video>
</div>
4、data中定义:
videoList:[
{
src:'http://115.29.112.47:8000/live/XXXXX.flv'
},
{
src:'http://47.105.176.124:8000/live/XXXXX.flv'
},
],
5、methods中方法调用:
playVideo(){
this.vloading = true;
this.videoList.forEach((item,index) => {
if (flvjs.isSupported()) {
let player = null;
let videoElement = document.getElementById("video" + index);
player = flvjs.createPlayer({
type: "flv", //=> 媒体类型 flv 或 mp4
isLive: true, //=> 是否为直播流
hasAudio: false, //=> 是否开启声音
url: item.src, //=> 视频流地址
});
player.attachMediaElement(videoElement); //=> 绑DOM
player.load();
player.play();
} else {
this.$message.error('不支持flv格式视频')
}
this.vloading = false;
})
},
6、created或mounted中调用:
this.playVideo(); //视频加载
转自:https://www.cnblogs.com/trampeagle/p/15724275.html
