What is the best way to generate video thumbnails?

user_11336202 0
Viewed 302

I am creating an application with Vue.js and Django. I am getting a list of videos from AWS S3 and I am displaying it in the frontend. Now I need to create thumbnails for these videos? I want to know what is the best practice to generate the thumbnails? Should I:

  1. Should I generate thumbnails on the frontend side each time it receives videos?
  2. Should I generate thumbnails on the backend side each time videos are requested?
  3. Should I generate thumbnails on the backend and save them in the storage and then send them when the videos are requested?

Currently, I am finding solutions on how to generate thumbnails on the frontend or how to save them but no one is discussing which is the best way to do it.

video-thumbnails vue.js thumbnails amazon-s3 django
2 Answers

preload= metadata shows a thumbnail automatically in browser, I would avoid complexity of storing the thumbnails all together, unless it is needed.

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

For some platforms/browsers (for example, iOs Safari)

preload="metadata"

won't show you a thumbnail. You can workaround it, by adding to src timestamp (#t=0.001):

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