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

Question

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

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

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

Answer 1

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

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

Answer 2

对于某些 platforms/browsers（例如，iOs Safari）

preload="metadata"

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

来解决它

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