*.avi文件视频预览功能失效问题求助（附相关代码）

嘿，我来帮你搞定AVI视频预览的问题！你的现有代码对大部分格式有效，但AVI出问题，核心原因是AVI只是一个容器格式，里面的视频编码可能不在浏览器原生支持的范围内。比如很多AVI文件用的是DivX、XviD这类旧编码，而浏览器原生只支持H.264、VP9、AV1这些主流编码的视频。

下面给你几个可行的解决方案：

一、先确认AVI的编码类型 #

首先你可以用FFmpeg工具检查一下你的AVI文件用的是什么编码，执行这个命令：

ffmpeg -i your-video.avi

输出里找Video:那一行，比如如果是Video: mpeg4 (DX50 / 0x30355844)，那就是DivX编码，浏览器确实不原生支持。

二、前端转码方案（用FFmpeg.wasm） #

如果想在前端直接处理AVI预览，可以用FFmpeg.wasm把AVI转成浏览器支持的MP4格式，再生成预览视频。修改你的JavaScript代码如下：

// 先在HTML里引入FFmpeg.wasm脚本
// <script src="https://unpkg.com/@ffmpeg/ffmpeg@0.10.1/dist/ffmpeg.min.js"></script>

const { createFFmpeg, fetchFile } = FFmpeg;
const ffmpeg = createFFmpeg({ log: true });

$("#videoSubmit").click(async function() {
  const fileInput = document.querySelector('input[id=file_v]');
  const file = fileInput.files[0];
  
  // 判断是否是AVI文件
  if (file.type === 'video/avi' || file.name.endsWith('.avi')) {
    // 加载FFmpeg核心
    if (!ffmpeg.isLoaded()) {
      await ffmpeg.load();
    }
    
    // 将文件写入FFmpeg内存空间
    ffmpeg.FS('writeFile', file.name, await fetchFile(file));
    
    // 转码成浏览器支持的MP4（H.264编码）
    await ffmpeg.run('-i', file.name, '-c:v', 'libx264', '-crf', '23', '-preset', 'fast', 'output.mp4');
    
    // 读取转码后的文件并生成预览URL
    const data = ffmpeg.FS('readFile', 'output.mp4');
    const url = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
    
    // 创建并插入预览视频
    const video = document.createElement("video");
    video.setAttribute("controls", "");
    const source = document.createElement("source");
    source.src = url;
    $(video).append(source);
    $("#post").append(video);
    $("#vid").hide();
    
    // 清理FFmpeg内存中的临时文件
    ffmpeg.FS('unlink', file.name);
    ffmpeg.FS('unlink', 'output.mp4');
  } else {
    // 原有的处理逻辑，针对其他浏览器原生支持的格式
    const video = document.createElement("video");
    video.setAttribute("controls", "");
    const source = document.createElement("source");
    source.src = URL.createObjectURL(file);
    $(video).append(source);
    $("#post").append(video);
    $("#vid").hide();
  }
});

$("#video").click(function() {
  $("#vid").show();
});

三、后端Java转码方案（更稳定） #

既然你后续要用Java处理视频，建议在后端先把AVI转成浏览器支持的格式（比如MP4），再返回给前端预览。Java里可以直接调用FFmpeg命令行工具，或者用封装库（比如Xuggler），这里给你一个调用命令行的简单示例：

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;

public class VideoConverter {
    public static void convertAviToMp4(String inputPath, String outputPath) throws IOException, InterruptedException {
        // 假设FFmpeg已配置在系统环境变量中
        String command = String.format("ffmpeg -i \"%s\" -c:v libx264 -crf 23 -preset fast \"%s\"", inputPath, outputPath);
        Process process = Runtime.getRuntime().exec(command);
        
        // 处理进程输出流和错误流，避免阻塞
        BufferedReader inputReader = new BufferedReader(new InputStreamReader(process.getInputStream()));
        BufferedReader errorReader = new BufferedReader(new InputStreamReader(process.getErrorStream()));
        
        String line;
        while ((line = inputReader.readLine()) != null) {
            System.out.println(line);
        }
        while ((line = errorReader.readLine()) != null) {
            System.err.println(line);
        }
        
        process.waitFor();
    }
}

前端上传AVI文件后，先调用后端转码接口，拿到MP4文件的访问URL后，再生成前端预览。

四、额外提示 #

• 浏览器原生支持的视频编码范围有限，优先选择H.264编码的MP4格式做预览兼容性最好
• 前端转码适合小体积AVI文件，大文件建议用后端转码，避免占用用户浏览器资源

内容的提问来源于stack exchange，提问作者MBJH