vue3使用flv.js播放推流视频的示例代码

下面是关于“vue3使用flv.js播放推流视频的示例代码”的完整攻略：

1. 大体思路

首先，我们需要了解一下使用 FLV.js 播放推流视频的思路。

推流视频一般使用推送协议，如 RTMP，这种协议一般是使用 Flash 直播内核来推送。而 FLV.js 是一个基于浏览器的 FLV 视频播放器，可以使用它来播放推流视频。

具体来说，在 Vue 组件中，我们需要使用 video 标签来渲染 FLV.js 播放器，然后动态地创建 FLV.js 实例来解析推流数据，最后通过 FLV.js 实例来渲染视频。

2. 安装 flv.js

在 Vue 项目中使用 FLV.js，我们首先需要安装 flv.js。你可以使用 npm 来进行安装：

npm install flv.js --save

3. 引入 flv.js

在 Vue3 中，我们可以在 main.js 中全局引入 flv.js：

import Flv from 'flv.js';
Vue.prototype.$flv = Flv;

4. 在组件中使用 flv.js

在 Vue 组件中，我们可以通过以下代码来使用 FLV.js 播放推流视频：

<template>
  <div>
    <video 
      ref="videoPlayer"
      :autoplay="true" 
      :controls="false" 
      :preload="true" 
      :crossOrigin="crossOrigin"
    ></video>
  </div>
</template>

<script>
export default {
  name: 'FlvPlayer',
  props: {
    url: {
      type: String,
      required: true
    },
    type: {
      type: String,
      default: 'flv'
    }
  },
  data() {
    return {
      mediaSource: null,  // 定义 mediaSource 对象
      boxDuration: 0, // 定义视频长度
      flvPlayer: null // 定义 FLV 播放器实例
    };
  },
  computed: {
    crossOrigin() {
      if (this.url && this.url.indexOf('rtmp') !== -1) {
        return 'anonymous';  // 如果是 RTMP 协议，则设置跨域属性为 anonymous
      }
      return null;
    }
  },
  mounted() {
    if (Flv.isSupported() && this.$refs.videoPlayer) {  // 判断浏览器是否支持 flv.js
      const videoElement = this.$refs.videoPlayer;
      const mediaSource = new Flv.MediaSource();  // 创建 mediaSource 对象
      videoElement.src = URL.createObjectURL(mediaSource.mediaSource);  // 设置video的src属性
      mediaSource.on('sourceopen', () => {
        const flvPlayer = this.flvPlayer = Flv.createPlayer({
          type: this.type,
          url: this.url,
          isLive: true,
          hasAudio: true,
          config: {
            mediaDataSource: mediaSource.mediaSource,
            hasAudio: true,
            isLive: true,
            boxDuration: this.boxDuration
          }
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
        this.$emit('flv-playing'); 
      });
      mediaSource.on('sourceended', () => {
        console.log('mediaSource closed');
        this.$emit('flv-ended');
      });
      mediaSource.on('sourceclose', () => {
        console.log('mediaSource closed');
        this.flvPlayer.unload();
        this.flvPlayer.detachMediaElement();
        this.flvPlayer.destroy();
        this.flvPlayer = null;
        this.$emit('flv-closed');
      });
    }
  },
  destroyed() {
    if (this.flvPlayer) {
      this.flvPlayer.destroy();
      this.flvPlayer = null;
    }
  }
};
</script>

5. 在页面中使用组件

在页面中，我们可以像下面这样使用上述组件：

<template>
  <div>
    <FlvPlayer url="/api/live" />
  </div>
</template>

<script>
import FlvPlayer from './FlvPlayer.vue';

export default {
  name: 'LivePlayer',
  components: {
    FlvPlayer
  },
  data() {
    return {
      url: '/api/live'  // 推流地址
    };
  }
};
</script>

需要注意的是，示例代码中使用了 vuex 中的 mutations 来管理状态，你可以自行替换为使用 Vue3 的 ref 来管理 app 状态。

以上就是使用 FLV.js 播放推流视频的完整攻略，希望对你有所帮助。