CODEWITHSUNDEEP
djangovue.jsamazon-s3thumbnailsvideo-thumbnails
Aaqib
Aaqib

Reputation: 59

What is the best way to generate video thumbnails?

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.

Upvotes: 2

Views: 1225

Answers (2)

Nigidoz
Nigidoz

Reputation: 478

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>

Upvotes: 1

Balu Vyamajala
Balu Vyamajala

Reputation: 10393

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>

Upvotes: 3

Related Questions