种地 发表于 2025-1-22 02:09:53

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

组件地址：GitHub - bilibili/flv.js: HTML5 FLV Player
https://i-blog.csdnimg.cn/direct/17c7b4aefdca42b8bd5e1b8c76a10962.png
   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、本地开辟跨域

https://i-blog.csdnimg.cn/direct/1176d358ba604ef78308e1bb15c3fde8.png
修改proxyConfig.js文件，添加下面的内容；修改组件中的url地址为 /flv/xxx
module.exports = {
        ....
        proxyTable: {
                '/flv': {
                  target: 'http://localhost:8080',
                  changeOrigin: true,
                  pathRewrite: {
                        '^/flv': ''
                  }
                }
        }
} ps：遇到过这个题目，还部署到tomcat中测试了，也是无法正常播放，现在想想当时是由于文件的编码不对造成的。
2、文件照旧无法播放，原因是flv文件的编码不对

https://i-blog.csdnimg.cn/direct/1e948d422eae442089f4358c0e066385.png
转换工具：在线 & 免费地将 MP4 转换成 FLV — Convertio
https://i-blog.csdnimg.cn/direct/eba02857e60d41fa8633c166e276877a.png
https://i-blog.csdnimg.cn/direct/06644ebec2b4457e958886df971f7ff1.png
 到此，在浏览器可以正常打开。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页: [1]
查看完整版本: vue2利用flv.js在浏览器打开flv格式视频