1
npm install vue flv.js --save

1
<template>
2
  <div>
3
    <video ref="videoPlayer" controls width="640" height="360"></video>
4
  </div>
5
</template>
6

7
<script>
8
import flvjs from 'flv.js';
9

10
export default {
11
  data() {
12
    return {
13
      flvPlayer: null,
14
      videoSource: 'http://58.215.18.181:26088/flv?port=26935&app=gblive&stream=32021368001310543292' // 替换为你的 HTTP-FLV 视频流地址
15
    };
16
  },
17
  mounted() {
18
    this.initFlvPlayer();
19
  },
20
  beforeDestroy() {
21
    this.destroyFlvPlayer();
22
  },
23
  methods: {
24
    initFlvPlayer() {
25
      if (flvjs.isSupported()) {
26
        const videoPlayer = this.$refs.videoPlayer;
27
        const flvPlayer = flvjs.createPlayer({
28
          type: 'flv',
29
          url: this.videoSource
30
        });
31

32
        flvPlayer.attachMediaElement(videoPlayer);
33
        flvPlayer.load();
34
        flvPlayer.play();
35

36
        this.flvPlayer = flvPlayer;
37
      } else {
38
        console.error('FLV.js is not supported in this browser.');
39
      }
40
    },
41
    destroyFlvPlayer() {
42
      if (this.flvPlayer) {
43
        this.flvPlayer.destroy();
44
      }
45
    }
46
  }
47
};
48
</script>
49

50
<style scoped>
51
/* 可以在这里添加一些样式 */
52
</style>