使用js写个方法截取视频的第一帧 - Riesenzahn - 沸点 - 掘金

1年前

使用js写个方法截取视频的第一帧
"```javascript
function captureFirstFrame(videoUrl, callback) {
// 创建一个视频元素
const video = document.createElement('video');
video.src = videoUrl;

// 设置视频的预加载方式为“metadata”
video.preload = 'metadata';

// 当视频元数据加载完成时触发
video.addEventListener('loadedmetadata', function () {
// 设置视频的当前时间为0秒
video.currentTime = 0;
});

// 当视频时间更新时触发
video.addEventListener('seeked', function () {
// 创建一个画布元素用于绘制视频帧
const canvas = document.createElement('canvas');
canvas.width = video.videoWidth; // 设置画布宽度为视频宽度
canvas.height = video.videoHeight; // 设置画布高度为视频高度

// 获取画布的上下文
const context = canvas.getContext('2d');
// 在画布上绘制视频的当前帧
context.drawImage(video, 0, 0, canvas.width, canvas.height);

// 将画布转换为数据URL格式
const frameDataUrl = canvas.toDataURL('image/png');
// 调用回调函数，并传入帧数据URL
callback(frameDataUrl);

// 释放资源

展开

今天学到了

赞过