fiv.js实现flv文件blob流实时播放的项目实践
作者：地霊殿__三無
一、前言
最近遇到个需求，有个监控视频需要在网页实时播放，后台提供了flv流、m3u8流和rtmp流。
我一听，这不是小事一桩，前两年才做过的需求，就随口应了下来。
二、 过程
1、开端
说到实时播放，一般都是想到rtmp流，随便一搜帖子（忘记看帖子时间了），就能看到以下两个插件。
cnpm install video-js -S cnpm install videojs-flash -S
跟我印象中之前用的一模一样。
简单浏览了下帖子的使用过程，我就打算动手敲了。
2、出师不利
video-js还是能正常下载的，但到了video-js-flash就一直下载失败了。
这时我突然想起2020年12月，谷歌就不再支持flash插件了，这导致许多基于flash实现的视频流播放插件都失效，vue-video-player和vue-flash首当其冲。
3、峰回路转--参考旧项目
由于项目后台给我们提供了三种视频流，所以我们的选择也比较多。
同时因为是jsp旧项目改造成vue项目，我就想看看之前用的是什么插件，原来是flv.js。
这不就是小破站用的技术吗，纯js开发，没用到flash，这兼容性肯定更好吧。
4、flv.js
确定了所用插件，接下来的步骤就比较简单了，无非就是下载，引入，看例子写法照着抄就可以了。
cnpm i flv.js
下面提供一下demo，demo里是多个flv流多窗口播放的方式，如果只有一个flv需求播放，就简化一下就可以了，其他大家随便看看吧。
<template>
<div>
<div id="video-container">
<div class="video-box" v-for="(video,index) in videoList" :key="index">
<video :id="'video'+index" ref="videoElement" controls autoplay muted ></video>
</div>
</div>
</div>
</template>
<script>
import flvjs from 'flv.js'
export default {
data() {
return {
videoPlayer: null,
videoList: [
{
src: 'flv视频流地址'
}
]
};
},
mounted() {
this.playVideo()
},
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;
})
},
},
};
</script>
<style lang="scss" scoped>
#video-container {
}
</style>5、hls.js
业务是完成了，后续我也看了一下m3u8视频流的播放。
1.M3U8文件是指UTF-8编码格式的M3U文件。M3U文件是记录了一个索引纯文本文件,打开它时播放软件并不是播放 它,而是根据它的索引找到对应的音视频文件的网络地址进行在线播放。
2.HLS 与 M3U8 HLS(全称:Http Live Streaming)是由Apple公司定义的用于实时流传输的协议
3.vue项目可采用的hls.js插件+video标签的形式。
原生video标签播放不了，但是我们可以借助hls.js的帮助，实现这个功能。
cnpm i -s hls.js
过程也是比较简单的，video标签提供一个ref，可供绑定选择元素就可以了，其他无所谓，hls.js会出手。
下面是源码，挑着用就行了
<template>
<section>
<video class="full-height full-width" ref="video" controls></video>
</section>
</template>
<script>
let Hls = require('hls.js');
export default {
data() {
return {
hls: '',
src: 'm3u8视频流地址'
};
},
mounted() {
this.getStream(src)
},
methods: {
videoPause() {
if (this.hls) {
this.$refs.video.pause();
this.hls.destroy();
this.hls = null;
}
},
getStream(source) {
if (Hls.isSupported()) {
this.hls = new Hls();
this.hls.loadSource(source);
this.hls.attachMedia(this.$refs.video);
this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
console.log('加载成功');
this.$refs.video.play();
});
this.hls.on(Hls.Events.ERROR, (event, data) => {
// console.log(event, data);
// 监听出错事件
console.log('加载失败');
});
}
},
beforeDestroy() {
this.videoPause();
}
}
};
</script>6、rtmp流
基本上rtmp流都是需要flash环境才能播放了，目前市面上的插件可能有部分插件还支持，但是一般都是需要指定浏览器，兼容性极差。
也有一种方案是自行搭建服务器，服务器转码变成图片，一帧一帧传给网页端，缺点是没有声音。
可能还有其他方案吧，暂时没太深究就不得而知了，欢迎讨论。
最后
到此这篇关于fiv.js实现flv文件blob流实时播放的项目实践的文章就介绍到这了,更多相关flv文件blob流实时播放内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！