安康市城乡建设规划局 网站青岛公司网站建设

最近项目有个新需求，需要实时直播工厂监控，与后端沟通交流也查询资料确定了fiv方案，优点在于相较于flash插件系列方案更独立（何况flash都被众大浏览器抛弃了），相较于hls延迟更低。

首先第一步

npm i flv.js

第二步 在自己的页面引入fiv.js

import flvjs from 'flv.js'

接下来就是在页面写代码 上完整代码
template部分：

    <el-dialog :title="title" :visible.sync="videoDialog" width="60%" @close="videoDialogClose"><div class="flex-f"><video width="70%" height="70%" id="myVideo" preload="auto" muted type="rtmp/flv"></video></div></el-dialog>

script部分：

import flvjs from 'flv.js'
export default {// 打开dialog弹出框videoDialogFn(item) {this.videoDialog = truethis.title = item.title// 传入后端提供的fiv地址this.createdPlay(item.src)},createdPlay(src) {this.$nextTick(() => {if (flvjs.isSupported()) {var videoDom = document.getElementById('myVideo')// 创建一个播放器实例this.player = flvjs.createPlayer({type: 'flv', // 媒体类型，默认是 flv,isLive: true, // 是否是直播流hasAudio: true, // 是否有音频hanVideo: true, // 是否有视频url: src, // 流地址}, {enableWorker: false, //不启用分离线程enableStashBuffer: false, //关闭IO隐藏缓冲区autoCleanupSourceBuffer: true, //自动清除缓存lazyLoad: false,})this.player.attachMediaElement(videoDom)this.player.load()this.player.play()// flv自带检测错误apithis.player.on(flvjs.Events.ERROR, (errType, errDetail) => {if (errType = 'NETWORK_ERROR') return this.$message.error('网络错误')if (errType = 'MEDIA_ERROR') return this.$message.error('媒体错误')if (errType = 'OTHER_ERROR') return this.$message.error('其他')})}});},// 关闭弹出框的时候销毁videoDialogClose() {if (!this.player) returnthis.player.pause()this.player.unload()this.player.detachMediaElement()this.player.destroy()this.player = null}
}

遇到解决的问题也蛮多的，比如cors跨域问题，视频空白问题，视频卡顿问题，欢迎交流