vue3videoPlay 播放avi格式

Vue3VideoPlay 是一个基于 Vue.js 的轻量级视频播放组件，但它本身并不直接支持avi格式的文件播放，因为浏览器内置的HTML5 Video API对某些特定的视频格式的支持可能存在差异。在 Vue 中处理 AVI 格式的视频播放，通常需要借助一些外部库如 ffmpeg、hls.js 等来进行转码或封装成现代浏览器支持的格式（如 mp4、webm 等）。

以下是实现步骤的一个简述：

1. **安装依赖**：如果要用到 ffmpeg，可以使用 `@ffmpeg-installer/ffmpeg` 这样的包，对于 hls.js 可能会用到 `videojs-contrib-hls` 或者 `hls.js`。

npm install @ffmpeg-installer/ffmpeg videojs-contrib-hls hls.js

2. **创建转换函数**：使用 ffmpeg 转换AVI为MP4或其他兼容格式。

import FFmpeg from '@ffmpeg-installer/ffmpeg';

const convertToMp4 = async (srcPath, destPath) => {
  const { stdout } = await FFmpeg().exec(`-i ${srcPath} -c:v libx264 -preset slow ${destPath}`);
};

3. **设置视频源**：在 Vue 组件中，当需要播放 AVI 时，先转换为支持格式，再设置视频元素的 src。

<template>
  <div>
    <button @click="convertAndPlay('path/to/your.avi', 'path/to/output.mp4')">播放</button>
    <video ref="myVideo" :src="convertedSrc"></video>
  </div>
</template>

<script>
export default {
  methods: {
    convertAndPlay(src, dest) {
      this.convertVideo(src).then(() => {
        this.$refs.myVideo.src = dest;
      });
    },
    convertVideo(src) {
      return new Promise((resolve, reject) => {
        convertToMp4(src, dest)
          .then(() => resolve())
          .catch(reject);
      });
    },
  },
  data() {
    return {
      convertedSrc: '',
    };
  },
};
</script>