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

news2025/1/24 23:02:07

组件地址：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.flv
          url: '/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中测试了，也是无法正常播放，现在想想当时是因为文件的编码不对造成的。