vue实现.flv播放

Vue 中实现 FLV 播放

在 Vue 中实现 FLV 格式视频的播放，通常需要借助第三方库，例如 flv.js。以下是具体实现方法：

安装 flv.js

通过 npm 或 yarn 安装 flv.js 依赖：

npm install flv.js
# 或
yarn add flv.js

引入并使用 flv.js

在 Vue 组件中引入 flv.js，并创建一个播放器实例：

import flvjs from 'flv.js';

export default {
  data() {
    return {
      player: null
    };
  },
  mounted() {
    if (flvjs.isSupported()) {
      this.player = flvjs.createPlayer({
        type: 'flv',
        url: 'http://example.com/video.flv' // 替换为实际的 FLV 视频地址
      });
      this.player.attachMediaElement(this.$refs.videoElement);
      this.player.load();
      this.player.play();
    }
  },
  beforeDestroy() {
    if (this.player) {
      this.player.destroy();
    }
  }
};

添加视频元素

在模板中添加 <video> 元素，并绑定 ref：

<template>
  <div>
    <video ref="videoElement" controls width="600"></video>
  </div>
</template>

注意事项

确保视频地址支持跨域访问，否则可能因 CORS 策略导致无法播放。如果视频流需要鉴权，需在请求头中添加相应参数。

flv.js 依赖浏览器的 Media Source Extensions (MSE) 功能，部分老旧浏览器可能不支持。可以通过 flvjs.isSupported() 检测兼容性。

其他实现方式

如果项目需要兼容更多格式或更复杂的播放需求，可以考虑使用现成的播放器库，如 Video.js 配合 flv.js 插件，或 DPlayer 等支持 FLV 的播放器。