播放FLV在线流

安装依赖

1
npm install vue flv.js --save

页面代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<template>
  <div>
    <video ref="videoPlayer" controls width="640" height="360"></video>
  </div>
</template>

<script>
import flvjs from 'flv.js';

export default {
  data() {
    return {
      flvPlayer: null,
      videoSource: 'http://58.215.18.181:26088/flv?port=26935&app=gblive&stream=32021368001310543292' // 替换为你的 HTTP-FLV 视频流地址
    };
  },
  mounted() {
    this.initFlvPlayer();
  },
  beforeDestroy() {
    this.destroyFlvPlayer();
  },
  methods: {
    initFlvPlayer() {
      if (flvjs.isSupported()) {
        const videoPlayer = this.$refs.videoPlayer;
        const flvPlayer = flvjs.createPlayer({
          type: 'flv',
          url: this.videoSource
        });

        flvPlayer.attachMediaElement(videoPlayer);
        flvPlayer.load();
        flvPlayer.play();

        this.flvPlayer = flvPlayer;
      } else {
        console.error('FLV.js is not supported in this browser.');
      }
    },
    destroyFlvPlayer() {
      if (this.flvPlayer) {
        this.flvPlayer.destroy();
      }
    }
  }
};
</script>

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