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

【问题标题】：Show video thumbnail without loading the video显示视频缩略图而不加载视频
【发布时间】：2019-02-11 15:37:39
【问题描述】：

是否可以在不加载视频的情况下显示视频的缩略图？我不需要播放视频，只想显示缩略图。

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

全部在本地主机上。

谢谢

【问题讨论】：

您尝试过什么并查找过什么？你打算在哪里使用这个？视频来自哪里？您需要更详细地描述您的问题。
如果视频流网站没有给你现成的缩略图 - 你不能在不抓取视频的情况下显示缩略图......你需要自己创建小图片......并连接, 到右边的 IMG 标签
就在本地主机上——我读到的只是关于使用海报，但这需要加载视频。我打算在使用 fileupload 上传视频后显示缩略图。

标签： javascript php jquery html

【解决方案1】：

是的。

您可以使用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>

【讨论】：

我实际上没有缩略图的图片 - 我需要缩略图来自我使用 fileupload 上传的视频。
那么不要使用海报标签。海报（您称之为缩略图）将在使用尽可能少的数据时自动加载。
问题是当我将预加载设置为“无”时，它不会加载任何内容作为海报（缩略图）-imgur.com/a/wF8n6q5
这解决了我的问题，但我将视频加载到 iframe 中，并使用 youtube 链接作为来源。如果您有很多视频添加到您的页面，这是一个很好的解决方案，因为它大大降低了页面的加载时间。谢谢@NinoFiliu！

【解决方案2】：

你可以安装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

【讨论】：