js如何截取视频的第一帧作为封面图

	<video id="video" src="您的视频地址" controls>video>
	// 截取视频第一帧作为封面
	const video = document.getElementById('video');
    video.addEventListener('loadedmetadata', () => {
      const canvas = document.createElement('canvas');
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      video.currentTime = 0.001; // 取0秒可能取到空白图片,所以最好设置大于0的数字
      video.addEventListener('loadeddata', () => {
        const ctx = canvas.getContext('2d');
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        const cover = canvas.toDataURL('image/png'); // cover即为视频的封面
        video.setAttribute('poster', cover); // 设置canvas转化后的图片为封面
      });
    });

最终效果:
js如何截取视频的第一帧作为封面图_第1张图片

你可能感兴趣的:(javascript,音视频,canvas,前端)