生成视频缩略图的最佳方法是什么？

Question

我正在使用 Vue.js 和 Django 创建一个应用程序。 我从 AWS S3 获取视频列表，并将其显示在前端。现在我需要为这些视频创建缩略图吗？ 我想知道生成缩略图的最佳做法是什么？ 我应该：

1. 是否应该在前端每次接收视频时生成缩略图？
2. 是否应该在每次请求视频时在后端生成缩略图？
3. 我是否应该在后端生成缩略图并将其保存在存储中，然后在请求视频时发送它们？

目前，我正在寻找有关如何在前端生成缩略图或如何保存它们的解决方案，但没有人讨论哪种方法是最好的。

Answer 1

preload= metadata 在浏览器中自动显示缩略图，除非需要，否则我会避免将缩略图存储在一起的复杂性。

<video
    src="preSignedUrlCanGoHere"
    preload="metadata"
    controls
    controlsList="nodownload">
</video>

Answer 2

对于某些平台/浏览器（例如，iOs Safari）

preload="metadata"

不会显示缩略图。 您可以通过添加到 src 时间戳 (#t=0.001) 来解决它：

<video
    src="preSignedUrlCanGoHere#t=0.001"
    preload="metadata"
    controls
    controlsList="nodownload">
</video>