使用javascript生成视频缩略图

我正在尝试使用javascript创建视频的缩略图。我需要在视频加载时从视频创建缩略图并将其显示在画布上。示例代码如下。任何帮助，将不胜感激。使用javascript生成视频缩略图

https://codepen.io/jeffin417/pen/vJxagb?editors=1010

var videoId = "video"; 
var scaleFactor = 0.25; 
var snapshots = []; 

document.getElementById(videoId).addEventListener(
    "loadeddata", 
    function() { 
    for (var jk = 0; jk < 60; jk++) { 
     document.getElementById(videoId).currentTime = jk; 
     var canvas = capture(document.getElementById(videoId), scaleFactor); 
     canvas.onclick = function() { 
     window.open(this.toDataURL()); 
     }; 
     snapshots.unshift(canvas); 
     output.innerHTML = ""; 
    } 
    output.appendChild(snapshots[0]); 
    }, 
    false 
); 

function capture(video, scaleFactor) { 
    if (scaleFactor === null) { 
    scaleFactor = 1; 
    } 
    var w = video.videoWidth * scaleFactor; 
    var h = video.videoHeight * scaleFactor; 
    var canvas = document.createElement("canvas"); 
    canvas.width = w; 
    canvas.height = h; 
    var ctx = canvas.getContext("2d"); 
    ctx.drawImage(video, 0, 0, w, h); 
    return canvas; 
} 

function shoot() { 
    var video = document.getElementById(videoId); 
    var output = document.getElementById("output"); 
    var canvas = capture(video, scaleFactor); 
    canvas.onclick = function() { 
    window.open(this.toDataURL()); 
    }; 
    snapshots.unshift(canvas); 
    output.innerHTML = ""; 
    for (var i = 0; i < 4; i++) { 
    output.appendChild(snapshots[i]); 
    } 
}

来源

2017-08-08 Jeffin

看看[这里]（https://stackoverflow.com/questions/19175174/capture-frames-from-video-with-html5-and-javascript）and this [fiddle]（https://jsfiddle.net/gdp00x2s/293/）。这是你在找什么？ –

你基本上拥有你需要的一切。问题是什么？ – pawel

嘿，谢谢哥们，这正是我正在寻找，可能是我应该搜索mroe关键字，请让你的答案我会接受， – Jeffin

产生竖起大拇指，你可以试用一下开源库的ffmpeg

这是光滑，产生拇指的最简单的方法。

样本命令

ffmpeg -i demo_dir/input.flv -ss 00:00:14.435 -vframes 1 demo_dir/out.png

也可以按照这个链接，更好地理解

https://trac.ffmpeg.org/wiki/Create%20a%20thumbnail%20image%20every%20X%20seconds%20of%20the%20video

来源

2017-08-08 13:24:08

嗨，我会用随机生成。所以我不认为我应该使用ffmpeg，我已经试过这个，它会减慢这个过程 – Jeffin

使用javascript生成视频缩略图

回答

相关问题