环境准备
在index.html引入flv.js依赖
<script type='text/javascript' src="https://cdn.bootcss.com/flv.js/1.5.0/flv.js"></script>数据准备好后播放视频
先取到接口数据，后播放。使用async await关键字实现顺序加载视频 伪代码
在mounted生命周期内渲染视频
async getData() {
await api(this.param).then(res => {
....
....
});
this.videoPlay();
},多路视频播放与销毁，切换地址
flv.js在播放前需要检查是否已创建实例，如果已有实例，则销毁，在重新创建播放器实例。
<video
style="width:28vw;height:24vw;"
id="videoElement"
muted autoplay
>{{unsupportedMsg}}</video>
data() {
return {
unsupportedMsg:"您的浏览器不支持Video标签",
flvPlayer: Object,
flvPlayer2: Object,
flvPlayer3: Object,
flvPlayer4: Object,
flvPlayer5: Object,
flvPlayer6: Object,
flvPlayer7: Object,
flvPlayer8: Object
};
},
methods: {
destoryAll(){
this.destory(this.flvPlayer);
this.destory(this.flvPlayer2);
this.destory(this.flvPlayer3);
this.destory(this.flvPlayer4);
this.destory(this.flvPlayer5);
this.destory(this.flvPlayer6);
this.destory(this.flvPlayer7);
this.destory(this.flvPlayer8);
},
destory(flvplayer) {
if (flvplayer && flvplayer._emitter && flvplayer.destroy) {
flvplayer.destroy();
flvplayer = null;
}
},
play() {
if (flvjs.isSupported()) {
//if video source exists,play;otherwise destory it
this.destory(this.flvPlayer);
this.destory(this.flvPlayer2);
if (this.videoSource.source1) {
var play = document.getElementById("videoElement1");
this.flvPlayer = flvjs.createPlayer({
type: "flv",
url: this.videoSource.source1,
enableWorker: true,
enableStashBuffer: false,
stashInitialSize: 128,
isLive: true,
isAutoPlay: true,
isContinue: true,
lazyLoad: true
});
this.flvPlayer.attachMediaElement(videoElement1);
this.flvPlayer.load();
this.flvPlayer.on("error",(err)=>{
console.error(err);
});
play.play();
var play2 = document.getElementById("videoElement2");
this.flvPlayer2 = flvjs.createPlayer({
type: "flv",
url: this.videoSource.source1,
enableWorker: true,
enableStashBuffer: false,
stashInitialSize: 128,
isLive: true
});
this.flvPlayer2.attachMediaElement(videoElement2);
this.flvPlayer2.load();
this.flvPlayer2.on("error",(err)=>{
console.error(err);
});
play2.play();
}
this.destory(this.flvPlayer3);
if (this.videoSource.source2) {
var play3 = document.getElementById("videoElement3");
this.flvPlayer3 = flvjs.createPlayer({
type: "flv",
url: this.videoSource.source2,
enableWorker: true,
enableStashBuffer: false,
stashInitialSize: 128,
isLive: true
});
this.flvPlayer3.attachMediaElement(videoElement3);
this.flvPlayer3.load();
this.flvPlayer3.on("error",(err)=>{
console.error(err);
});
play3.play();
}
this.destory(this.flvPlayer4);
if (this.videoSource.source3) {
var play4 = document.getElementById("videoElement4");
this.flvPlayer4 = flvjs.createPlayer({
type: "flv",
url: this.videoSource.source3,
enableWorker: true,
enableStashBuffer: false,
stashInitialSize: 128,
isLive: true
});
this.flvPlayer4.attachMediaElement(videoElement4);
this.flvPlayer4.load();
this.flvPlayer4.on("error",(err)=>{
console.error(err);
});
play4.play();
}
this.destory(this.flvPlayer5);
if (this.videoSource.source4) {
var play5 = document.getElementById("videoElement5");
this.flvPlayer5 = flvjs.createPlayer({
type: "flv",
url: this.videoSource.source4,
enableWorker: true,
enableStashBuffer: false,
stashInitialSize: 128,
isLive: true,
cors:true
});
this.flvPlayer5.attachMediaElement(videoElement5);
this.flvPlayer5.load();
this.flvPlayer5.on("error",(err)=>{
console.error(err);
});
play5.play();
}
this.destory(this.flvPlayer6);
if (this.videoSource.source5) {
var play6 = document.getElementById("videoElement6");
this.flvPlayer6 = flvjs.createPlayer({
type: "flv",
url: this.videoSource.source5,
enableWorker: true,
enableStashBuffer: false,
stashInitialSize: 128,
isLive: true
});
this.flvPlayer6.attachMediaElement(videoElement6);
this.flvPlayer6.load();
this.flvPlayer6.on("error",(err)=>{
console.error(err);
});
play6.play();
}
this.destory(this.flvPlayer7);
if (this.videoSource.source6) {
var play7 = document.getElementById("videoElement7");
this.flvPlayer7 = flvjs.createPlayer({
type: "flv",
url: this.videoSource.source6,
enableWorker: true,
enableStashBuffer: false,
stashInitialSize: 128,
isLive: true
});
this.flvPlayer7.attachMediaElement(videoElement7);
this.flvPlayer7.load();
this.flvPlayer7.on("error",(err)=>{
console.error(err);
});
play7.play();
}
this.destory(this.flvPlayer8);
if (this.videoSource.source7) {
var play8 = document.getElementById("videoElement8");
this.flvPlayer8 = flvjs.createPlayer({
type: "flv",
url: this.videoSource.source7,
enableWorker: true,
enableStashBuffer: false,
stashInitialSize: 128,
isLive: true
});
this.flvPlayer8.attachMediaElement(videoElement8);
this.flvPlayer8.load();
this.flvPlayer8.on("error",(err)=>{
console.error(err);
});
play8.play();
}
}
},
changeVideo(url) {
this.destory(this.flvPlayer);
//切换第一个视频地址
var player = document.getElementById("videoElement1");
this.flvPlayer = flvjs.createPlayer({
type: "flv",
url: url,
enableWorker: true,
enableStashBuffer: false,
stashInitialSize: 128,
isLive: true,
isAutoPlay: true,
isContinue: true,
lazyLoad: true
});
this.flvPlayer.attachMediaElement(videoElement1);
this.flvPlayer.load();
player.play();
}
}注意问题
1.父组件数据源变化后，子组件视频需要刷新方式
- 使用watch监听器
- 父组件内，在子组件上增加ref引用，使用this.$refs['v'].play()调用子组件的play方法，此方法更直观，更好！
2.浏览器最多加载6路视频限制
浏览器对于同源视频地址最多加载6路视频，可以对多出的2路视频使用域名代理解决，也可以使用其他单独的域名处理
3.跨域问题
服务器增加access-control-allow-origin:*，允许任意客户端访问。 flv.js实例默认cors:true启用cors，如果设置成false，则必须是客户端和视频域名地址必须同源才能播放
b站flv.js使用_由原生js开发、实现在html5播放flv格式视频的js库
Flv.js 就是由 bilibili 网站开源的 HTML5 Flash 视频（FLV）播放器，纯原生 JavaScript 开发（ECMAScript 6 编写） ，没有用到 Flash。它的工作原理是 Flv.js 在 JavaScript 中流式解析 flv 文件流
flv.js实战_使用flv.js做直播
为什么要在这个时候探索flv.js做直播呢？原因在于各大浏览器厂商已经默认禁用Flash，之前常见的Flash直播方案需要用户同意使用Flash后才可以正常使用直播功能，这样的用户体验很致命。
flv.js的追帧、断流重连及实时更新的直播优化方案
最近在处理前端直播的业务，根据业务需要，使用 flv.js 的方案播放实时的flv视频流。不得不承认，flv.js 是一个伟大的库。在使用flv.js开发的过程中，遇到了一些问题，也无外乎是视频延迟，视频卡顿等问题
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!