javascript - Show video thumbnail without loading the video

Question

Is it possible to show thumbnail from a video without having to load the video? I don't need the video to play, just want to show a thumbnail.

I want to show the thumbnail after uploading the video using fileupload. And the thumbnail needs to come from the video.

All on localhost.

Thanks

Answer 1

Yes.

You can specify not to preload the video with preload="none". You can specify the thumbnail with poster="<url of image>". More options on 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>