Show Video Thumbnail Without Loading The Video

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 up

Solution 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>

Solution 2:

You can install the npm: video-metadata-thumbnails, then use it like this:

import { getMetadata, getThumbnails } from 'video-metadata-thumbnails';

const thumbnails = await getThumbnails(blob, {
  interval: 1,
  start: 0,
  end: 0
});
console.log('Preview: ', thumbnails[0]);

Example: https://www.ellow.cn/examples/video-metadata-thumbnails/index.html