vue2使用flv.js在浏览器打开flv格式视频

组件地址：GitHub - bilibili/flv.js: HTML5 FLV Player

flv.js 仅支持 H.264 和 AAC/MP3 编码的 FLV 文件。如果视频文件使用了其他编码格式就打不开。

 flv.vue

<template><div><el-dialog :visible.sync="innerVisibleFlv" :close-on-press-escape="false" :close-on-click-modal="false"append-to-body width="800px" top="15vh" title="" class="modify" :before-close="handleClose"><video ref="videoPlayer" class="video-js vjs-default-skin" controls preload="auto" width="100%" height="99%"><!-- 这里不需要添加 source 标签，因为 flv.js 会动态处理 --></video></el-dialog></div>
</template><script>
import flvjs from 'flv.js';export default {name: 'FlvPlayer',props: {innerVisibleFlv: {type: Boolean,default: true},flvPath: {type: String}},data() {return {flvPlayer: null,videoUrl: null,};},watch: {flvPath: {deep: true,immediate: true,handler (n, o) {if (n) {this.videoUrl = n;}}}},mounted() {this.$nextTick(() => {this.initFlvPlayer();})},beforeDestroy() {if (this.flvPlayer) {this.flvPlayer.destroy();}},methods: {initFlvPlayer() {if (flvjs.isSupported()) {const videoElement = this.$refs.videoPlayer;this.flvPlayer = flvjs.createPlayer({type: 'flv',// url: this.videoUrl,  # http://localhost:8080/aaa/flv/25012001.flvurl: '/flv/aaa/flv/25012001.flv', # 本地测试这么写，跨域问题，修改proxyConfig.js});this.flvPlayer.attachMediaElement(videoElement);this.flvPlayer.load();this.flvPlayer.play();} else {console.error('Your browser does not support FLV playback.');}},handleClose () {this.$emit('handleClose');},}
};
</script><style scoped></style>

碰到问题

1、本地开发跨域

修改proxyConfig.js文件，添加下面的内容；修改组件中的url地址为 /flv/xxx

module.exports = {....proxyTable: {'/flv': {target: 'http://localhost:8080', changeOrigin: true, pathRewrite: { '^/flv': ''  }}}
}

ps：碰到过这个问题，还部署到tomcat中测试了，也是无法正常播放，现在想想当时是因为文件的编码不对造成的。

2、文件还是无法播放，原因是flv文件的编码不对

转换工具：在线 & 免费地将 MP4 转换成 FLV — Convertio

 到此，在浏览器可以正常打开。