从视频 js 中获取缩略图 - Javascript

介绍

在网页设计中，有时候需要展示视频缩略图。如果手动截取视频帧来实现，工作量较大，而且不会自动生成。因此，我们可以使用 Javascript 来从视频中获取缩略图，实现自动化。

实现方法

要从视频中获取缩略图，我们需要使用 HTML5 中提供的 Canvas 和 Video 元素。视频元素可以在内部的绘图上下文上绘制当前播放的帧。我们可以利用这个特性，来截取视频当前播放帧的快照，然后在 Canvas 上绘制出来，以获取所需的缩略图。

首先，我们需要在 HTML 中添加 Video 和 Canvas 元素：

<video id="video" src="example.mp4" controls></video>
<canvas id="canvas" style="display: none;"></canvas>

其中，Video 的 src 属性表示要播放的视频文件路径，controls 属性用于显示控制条。Canvas 的 display 属性设置为 none，用于隐藏 Canvas。

接着，在 Javascript 中，我们需要获取到 Video 和 Canvas 元素的 DOM 对象，并为 Video 元素添加 onloadedmetadata 事件和 ontimeupdate 事件。前者是在取得视频的元数据后（如视频的长度和尺寸）触发的事件，后者则是当视频播放进度改变时触发的事件。

const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');

video.addEventListener('loadedmetadata', () => {
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
});

context.drawImage(video, 0, 0, canvas.width, canvas.height);

video.addEventListener('timeupdate', () => {
  context.drawImage(video, 0, 0, canvas.width, canvas.height);
  const thumbnail = canvas.toDataURL();
  console.log(thumbnail);
});

在 loadedmetadata 事件中，我们可以获取到视频的宽度和高度，并将 Canvas 的宽度和高度设置为相同的值，以保证绘制出来的缩略图具有正确的比例。

在 timeupdate 事件中，我们使用 drawImage 将当前播放帧绘制到 Canvas 上，然后使用 toDataURL 方法将 Canvas 转换为 data URL 字符串。这个字符串可以被直接赋值给 img 元素的 src 属性，或者使用 ajax 上传到服务器。

总结

使用 Javascript 从视频中获取缩略图，是一种自动化的实现方式。本文介绍了使用 HTML5 中的 Video 和 Canvas 元素来实现这个功能的方法。需要注意的是，由于视频的加载需要时间，因此需要在加载完成后再去获取缩略图。此外，视频的尺寸信息也需要考虑到，以保证生成的缩略图具有正确的比例和尺寸。