使用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生成視頻縮略圖

回答

相關問題