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><videocontrolswidth="200"><sourcesrc="https://www.w3schools.com/tags/movie.mp4"type="video/mp4"></video><h1>With poster + preload="none"</h1><videocontrolswidth="200"preload="none"poster="https://upload.wikimedia.org/wikipedia/commons/4/46/Bear_Alaska_%283%29.jpg"><sourcesrc="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 = awaitgetThumbnails(blob, {
  interval: 1,
  start: 0,
  end: 0
});
console.log('Preview: ', thumbnails[0]);

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