使用JS从视频中获取帧

Question

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

Answer 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;
}

使用JS从视频中获取帧

Get frame from Video using JS

html

javascript

html5-video

video-player