视频截图 - 将视频第一帧转换为JPEG图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>WebCat</title>
<style>
#video{
width:100%;
}
</style>
</head>
<body>
<video id="video" src="https://txmov2.a.kwimgs.com/upic/2023/08/03/12/BMjAyMzA4MDMxMjI4MDlfMjg1NTM0Nzk3Ml8xMDk1NjU0MDM1ODNfMV8z_b_Be9faad5980cbfed0301c32845ff52b39.mp4?clientCacheKey=3xtqu59a5w5bp9q_b.mp4&tt=b&di=2f6342ca&bp=10000" crossorigin="anonymous" controls=""></video>
<canvas id="canvas" width="100%" height="360"></canvas>
<script>
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
<p>video.addEventListener('loadeddata', function() {
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
var dataURL = canvas.toDataURL('image/jpeg');
console.log(dataURL);
});</p>
<p>video.crossOrigin = 'anonymous';
video.load();
</script></p>
</body>
</html>这段HTML代码是用来显示一个视频，并且在视频加载完成后，将视频的第一帧画面转换为JPEG格式的图片并打印出来。其中，视频的URL是"https://txmov2.a.kwimgs.com/upic/2023/08/03/12/BMjAyMzA4MDMxMjI4MDlfMjg1NTM0Nzk3Ml8xMDk1NjU0MDM1ODNfMV8z_b_Be9faad5980cbfed0301c32845ff52b39.mp4"，可以在浏览器中通过这个URL来查看视频。
原文地址: https://www.cveoy.top/t/topic/p98q 著作权归作者所有。请勿转载和采集!