Question

是否可以显示视频的缩略图而不必加载视频？我不需要播放视频，只想显示一个缩略图。

我想在使用fileupload上传视频后显示缩略图。缩略图需要来自视频。

全部在本地主机上。

谢谢

Answer 1

您可以安装npm：video-metadata-thumbnails，然后像这样使用它：

import { getMetadata, getThumbnails } from 'video-metadata-thumbnails';

const thumbnails = await getThumbnails(blob, {
  interval: 1,
  start: 0,
  end: 0
});
console.log('Preview: ', thumbnails[0]);

示例：https://www.ellow.cn/examples/video-metadata-thumbnails/index.html

Answer 2

是的

您可以指定不使用preload="none"预加载视频。您可以使用poster="<url of image>"指定缩略图。 the docs of <video>

上的更多选项

<h1>Default</h1>
<video controls width="200">
  <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
</video>

<h1>With poster + preload="none"</h1>
<video controls width="200" preload="none" poster="https://upload.wikimedia.org/wikipedia/commons/4/46/Bear_Alaska_%283%29.jpg">
  <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
</video>

显示视频缩略图而不加载视频

2 个答案: