video自动获取封面的完整代码 js实现
以下是使用JavaScript实现自动获取视频封面的完整代码：
<!DOCTYPE html>
<html>
<head>
<title>自动获取视频封面</title>
</head>
<body>
<input type="file" id="videoInput" accept="video/*">
<img id="thumbnail" alt="视频封面">
<script>
document.getElementById('videoInput').addEventListener('change', function(e) {
var file = e.target.files[0];
var video = document.createElement('video');
var reader = new FileReader();
reader.onload = function(e) {
video.src = e.target.result;
video.addEventListener('loadedmetadata', function() {
var canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
var img = document.getElementById('thumbnail');
img.src = canvas.toDataURL();
});
};
reader.readAsDataURL(file);
});
</script>
</body>
</html>
此代码创建了一个包含一个文件输入框和一个图像元素的简单HTML页面。当用户选择一个视频文件后，通过JavaScript读取该文件，并将其作为视频源加载到一个新创建的视频元素中。一旦视频元数据加载完成，就会创建一个画布元素，并将视频帧绘制到画布上。最后，将画布内容作为图像数据URL设置到图像元素的src属性上，从而显示视频的封面图像
原文地址: https://www.cveoy.top/t/topic/ig9J 著作权归作者所有。请勿转载和采集!