本文介绍了如何使用HTML和JavaScript在网页中截取视频的第一帧作为封面，通过创建canvas元素并监听视频的loadeddata事件实现视频预览和截图保存为dataURL。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>截取视频首帧作为封面</title>
</head>
<style>
body{
margin: 0;
padding: 0;
}
</style>
<body>
<video
id="video"
controls="controls"
src="http://cloud.ruiboyun.net/mp4/vod/9npkladw/mp4/index.mp4"
></video>
<script>
(function(){
var videoEle
var canvas = document.createElement('canvas')
var img = document.createElement("img");
videoEle = document.getElementById('video')
videoEle.setAttribute('crossOrigin', 'anonymous')
videoEle.currentTime = 1
const scale = 10; // 压缩系数
canvas.width = videoEle.clientWidth * scale;
canvas.height = videoEle.clientHeight * scale;
videoEle.onloadeddata = (() => {
canvas.getContext('2d').drawImage(videoEle, 0, 0, canvas.width, canvas.height)
let dataURL = canvas.toDataURL('image/png',1)
img.src = dataURL;
console.dir(videoEle);
img.style.width = videoEle.offsetWidth + 'px'
img.style.height = videoEle.offsetHeight + 'px'
img.style.position = "absolute";
img.style.left = "0";
img.style.top = "0";
img.style.objectFit = "fill";
videoEle.parentNode && videoEle.parentNode.appendChild(img);
})
})();
</script>
</body>
</html>
561
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
