Angular中无API图片时，如何为HTML5视频设置预览缩略图？

我懂你现在的麻烦——API没提供视频缩略图，直接把视频URL塞到poster里根本不管用，浏览器根本不认视频文件当海报图。给你几个不用额外图片资源就能搞定的方案，都是实战里验证过的：

这个方法利用浏览器的Canvas API，在视频加载完元数据后，把第一帧画出来转成图片URL，再赋值给poster属性，适合大多数场景，不需要额外配置。

步骤&代码示例（Angular环境） #

先给video元素加个模板引用变量：

<video #videoElement style="object-fit: contain;" width="100%" height="100%" controls preload="metadata" loop>
  <source [src]="indexOfSelectedExercise.exercise?.fullVideoUrl" type="video/mp4" />
</video>

然后在组件的TypeScript代码里实现截图逻辑：

import { ViewChild, ElementRef, AfterViewInit } from '@angular/core';

export class YourExerciseComponent implements AfterViewInit {
  @ViewChild('videoElement') videoElement!: ElementRef<HTMLVideoElement>;

  ngAfterViewInit() {
    const video = this.videoElement.nativeElement;
    // 监听视频元数据加载完成事件
    video.addEventListener('loadedmetadata', () => {
      // 创建Canvas元素
      const canvas = document.createElement('canvas');
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      // 把视频第一帧画到Canvas上
      const ctx = canvas.getContext('2d');
      ctx?.drawImage(video, 0, 0, canvas.width, canvas.height);
      // 转成DataURL，赋值给video的poster属性
      video.poster = canvas.toDataURL('image/png');
    });
  }
}

如果视频第一帧是黑屏/空白，可以指定时间点截取帧，只需要在元数据加载后设置视频播放位置，再监听跳转完成事件：

修改后的TypeScript代码 #

ngAfterViewInit() {
  const video = this.videoElement.nativeElement;
  video.addEventListener('loadedmetadata', () => {
    // 设置要截取的时间点（单位：秒）
    video.currentTime = 3;
    // 监听视频跳转到指定位置完成的事件，只执行一次
    video.addEventListener('seeked', () => {
      const canvas = document.createElement('canvas');
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      const ctx = canvas.getContext('2d');
      ctx?.drawImage(video, 0, 0, canvas.width, canvas.height);
      video.poster = canvas.toDataURL('image/png');
    }, { once: true });
  });
}

如果多个组件都需要这个功能，可以封装成指令，避免重复写代码：

创建指令文件 video-poster.directive.ts #

import { Directive, ElementRef, Input, OnInit } from '@angular/core';

@Directive({
  selector: '[appVideoPoster]'
})
export class VideoPosterDirective implements OnInit {
  @Input() posterTime = 0; // 默认截取第一帧，可传入指定秒数

  constructor(private el: ElementRef<HTMLVideoElement>) {}

  ngOnInit() {
    const video = this.el.nativeElement;
    video.addEventListener('loadedmetadata', () => {
      if (this.posterTime > 0) {
        video.currentTime = this.posterTime;
        video.addEventListener('seeked', () => this.generatePoster(video), { once: true });
      } else {
        this.generatePoster(video);
      }
    });
  }

  private generatePoster(video: HTMLVideoElement) {
    const canvas = document.createElement('canvas');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    const ctx = canvas.getContext('2d');
    ctx?.drawImage(video, 0, 0, canvas.width, canvas.height);
    video.poster = canvas.toDataURL('image/png');
  }
}

在模板里使用指令 #

<video appVideoPoster [posterTime]="3" style="object-fit: contain;" width="100%" height="100%" controls preload="metadata" loop>
  <source [src]="indexOfSelectedExercise.exercise?.fullVideoUrl" type="video/mp4" />
</video>

补充说明 #

你之前的代码失效的原因很简单：poster属性要求的是图片资源的URL（比如.jpg、.png），而你传入的是视频文件的URL，浏览器无法解析视频文件作为海报图，所以会显示默认的空白占位符。上面的方案都是通过浏览器自身渲染视频帧，转成图片URL来解决问题，完全不需要额外的API图片资源。

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