使用 JS 从视频中获取帧答案

【问题标题】：Get frame from Video using JS使用 JS 从视频中获取帧
【发布时间】：2022-01-06 18:19:33
【问题描述】：

我正在制作一个视频播放器，我想插入一个部分，将视频中的图像呈现给用户。我痛苦地尝试在网上搜索，但只有播放视频的画布，在播放视频之前，我应该先预览一些，例如 3，显示视频中内容的照片，而不是视频播放时在繁殖中。

【问题讨论】：

请提供足够的代码，以便其他人更好地理解或重现问题。

标签： javascript html html5-video video-player

【解决方案1】：

使用事件seeked并在第一次触发时设置video.currentTime为0，之后在事件操作结束时可以继续设置一个新的当前时间。毕竟删除事件并将 currentTime 设置为 0 以重置视频。

<script>
const maxDeltas = 5; // 5 thumbnails
let index = 1;
let video = document.getElementById("mainVideo");
let thumbNailsOffset = 0;

function SpawnCanvas(i) {
    let previewDiv = document.getElementById("preview");
    let canvas = document.createElement("canvas");
    canvas.id = i;
    previewDiv.appendChild(canvas);
    return canvas;
}

function OnSeeked(event) {
    console.log('Video found the playback position it was looking for.');
    let canvas = SpawnCanvas(index);
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
    video.currentTime = thumbNailsOffset * index;
    index++;
    if (index > maxDeltas) {
        video.removeEventListener('seeked', OnSeeked);
        video.currentTime = 0;
    }
}

function Test() {
   video = document.getElementById("mainVideo");
   thumbNailsOffset = Math.trunc(video.duration) / maxDeltas;
   video.addEventListener('seeked', OnSeeked);
   video.currentTime = 0;
}

【讨论】：