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

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

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

1. <template>
2.   <div>
3.     <el-dialog :visible.sync="innerVisibleFlv" :close-on-press-escape="false" :close-on-click-modal="false"
4.             append-to-body width="800px" top="15vh" title="" class="modify" :before-close="handleClose">
5.         <video ref="videoPlayer" class="video-js vjs-default-skin" controls preload="auto" width="100%" height="99%">
6.                         <!-- 这里不需要添加 source 标签，因为 flv.js 会动态处理 -->
8.         </video>
9.     </el-dialog>
10.   </div>
11. </template>
13. <script>
14. import flvjs from 'flv.js';
16. export default {
17.   name: 'FlvPlayer',
18.   props: {
19.     innerVisibleFlv: {
20.         type: Boolean,
21.         default: true
22.     },
23.     flvPath: {
24.         type: String
25.     }
26.   },
27.   data() {
28.     return {
29.       flvPlayer: null,
30.       videoUrl: null,
31.     };
32.   },
33.   watch: {
34.       flvPath: {
35.           deep: true,
36.           immediate: true,
37.           handler (n, o) {
38.               if (n) {
39.                   this.videoUrl = n;
40.               }
41.           }
42.       }
43.   },
44.   mounted() {
45.     this.$nextTick(() => {
46.         this.initFlvPlayer();
47.     })
48.   },
49.   beforeDestroy() {
50.     if (this.flvPlayer) {
51.       this.flvPlayer.destroy();
52.     }
53.   },
54.   methods: {
55.     initFlvPlayer() {
56.       if (flvjs.isSupported()) {
57.         const videoElement = this.$refs.videoPlayer;
58.         this.flvPlayer = flvjs.createPlayer({
59.           type: 'flv',
60.           // url: this.videoUrl,  # http://localhost:8080/aaa/flv/25012001.flv
61.           url: '/flv/aaa/flv/25012001.flv', # 本地测试这么写，跨域问题，修改proxyConfig.js
62.         });
63.         this.flvPlayer.attachMediaElement(videoElement);
64.         this.flvPlayer.load();
65.         this.flvPlayer.play();
66.       } else {
67.         console.error('Your browser does not support FLV playback.');
68.       }
69.     },
70.        
71.     handleClose () {
72.         this.$emit('handleClose');
73.     },
74.   }
75. };
76. </script>
78. <style scoped>
80. </style>

复制代码

遇到题目
1、本地开辟跨域

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

1. module.exports = {
2.         ....
3.         proxyTable: {
4.                 '/flv': {
5.                   target: 'http://localhost:8080',
6.                   changeOrigin: true,
7.                   pathRewrite: {
8.                         '^/flv': ''  
9.                   }
10.                 }
11.         }
12. }

复制代码

ps：遇到过这个题目，还部署到tomcat中测试了，也是无法正常播放，现在想想当时是由于文件的编码不对造成的。
2、文件照旧无法播放，原因是flv文件的编码不对

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

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。