Personal opinion: it is better to put this kind of processing on the server side as far as possible. If the video is relatively large, the front-end loading takes half a day, which greatly affects the page operation experience. Of course, if you can’t convince the server boss to handle it, try the following solutions

The principle of

In fact, the principle is easy to understand. It is to generate a DOM to load the video, set the video to stop at a certain frame, and then use canvas to generate pictures.

implementation

/** * Get video cover *@param {*} VideoUrl Video link *@param {*} Frames frames * /
const getVideoFrame = (videoUrl, frames) = > {
  const video = document.createElement('video');
  video.width = 200;
  video.height = 200;
  video.src = videoUrl;
  video.currentTime = 1/60 * frames;
  video.setAttribute('crossOrigin'.'anonymous');
  video.oncanplay = () = > {
    const oCanvas = document.createElement('canvas');
    oCanvas.width = video.width;
    oCanvas.height = video.width;
    oCanvas.getContext("2d").drawImage(video, 0.0, video.width, oCanvas.height);
    const base64 = oCanvas.toDataURL("image/png");
    console.log(base64, 'Picture address'); }};Copy the code

call

getVideoFrame(3);
Copy the code