Angular14中如何播放Blob格式的avi、mov视频？

核心原因 #

Chrome对AVI、MOV这类容器格式的支持取决于内部编码方式，原生仅支持H.264、VP8/VP9等视频编码，以及AAC、MP3等音频编码。如果你的AVI/MOV文件使用了MPEG-1、ProRes等非支持编码，直接通过Blob URL加载原生<video>标签会失败。

解决方案1：用FFmpeg.wasm转码为Chrome兼容格式 #

通过前端转码将视频转为MP4（H.264+AAC编码），这是最可靠的解决方式：

1. 安装依赖：

npm install @ffmpeg/ffmpeg @ffmpeg/core

2. 修改组件代码：

import { Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { FFmpeg } from '@ffmpeg/ffmpeg';
import { fetchFile } from '@ffmpeg/util';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  prev_url: any;
  private ffmpeg = new FFmpeg();

  constructor(private sanitizer: DomSanitizer) {}

  async onSelectedFile(ev: Event) {
    const file = (ev.target as HTMLInputElement).files?.[0];
    if (!file) return;

    // 初始化FFmpeg
    if (!this.ffmpeg.isLoaded()) {
      await this.ffmpeg.load();
    }

    // 将文件写入FFmpeg内存
    const fileExt = file.name.split('.').pop();
    await this.ffmpeg.writeFile(`input.${fileExt}`, await fetchFile(file));

    // 转码为MP4（H.264视频+AAC音频）
    await this.ffmpeg.exec([
      '-i', `input.${fileExt}`,
      '-c:v', 'libx264', '-crf', '23',
      '-c:a', 'aac',
      'output.mp4'
    ]);

    // 读取转码后的文件并生成Blob URL
    const outputData = await this.ffmpeg.readFile('output.mp4');
    const blob = new Blob([outputData], { type: 'video/mp4' });
    const url = URL.createObjectURL(blob);
    this.prev_url = this.sanitizer.bypassSecurityTrustUrl(url);
  }
}

HTML模板保持原代码即可：

<input type="file" accept="video/*" (change)="onSelectedFile($event)">

<video 
  *ngIf="prev_url" 
  [src]="prev_url" 
  style="width:300px; height:300px;" 
  controls></video>

解决方案2：检查视频编码格式 #

先用媒体信息工具查看AVI/MOV文件的编码细节，如果编码本身属于Chrome支持范围，可尝试以下调试步骤：

• 检查createObjectURL生成的Blob URL是否有效，可直接在新标签页打开验证
• 确保<video>标签的type属性正确设置（比如type="video/avi"或type="video/quicktime"）

解决方案3：使用兼容性更好的播放器库 #

尝试Video.js这类成熟的播放器库，它对不同容器格式的兼容性优于原生标签，但本质上仍受限于浏览器的编码支持，编码不兼容时仍需转码。

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