<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取视频封面</title>
</head>
<body>
<img src="" id="poster" alt="" />
<script type="text/javascript" src="jquery1.9.1.min.js">
</script>
<script>
function getVideoCover(src) {
const videoElement = document.createElement('VIDEO');
videoElement.preload = true;
videoElement.autoplay = true;
videoElement.muted = true;
videoElement.currentTime = 3; //视频时长，一定要设置，不然大概率白屏
const callBack = () => {
const { videoWidth, videoHeight } = videoElement; // 获取video的宽高
const canvas = document.createElement('canvas');
canvas.width = videoWidth ;
canvas.height = videoHeight;
const ctx = canvas.getContext('2d');
ctx.drawImage(videoElement, 0, 0, videoWidth, videoHeight);
const dataBase64 = canvas.toDataURL('image/png'); // 完成base64图片的创建
$('#poster').attr('src',dataBase64);
};
//当视频加载完
videoElement.onloadeddata = setTimeout(() => {
callBack();
}, 1000);
videoElement.src = src;
}
getVideoCover('video.mp4');
</script>
</body>
</html>
