使用 JS 从视频中获取帧

Posted 2023-05-07

【中文标题】使用 JS 从视频中获取帧

【英文标题】：Get frame from Video using JS

【发布时间】：2022-01-06 18:19:33

【问题描述】：

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

【问题讨论】：

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

【参考方案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;