Javascript 如何從視頻中提取幀？

Question

您好，我有以下 JS 代碼可以從文件輸入創建視頻：

<canvas  id="prevImgCanvas">Your browser does not support the HTML5 canvas tag.</canvas> 

<input id="videoage" type="file" name="video" class="chooseNail" accept="video/*" style="display:none;" onchange="loadSnippetThumb(event)">
<label for="videoage" id="labelvideo" >Choose Video</label>

var loadSnippetThumb = function(event) {                
    var c = document.getElementById("prevImgCanvas");
    var context = c.getContext('2d');
    var url = URL.createObjectURL(event.target.files[0]);
    var video = document.getElementById('video222');
    video.src = url;
    video.autoPlay = true;

}

這將創建一個在屏幕上播放的視頻，用戶已選擇使用文件輸入上傳該視頻。 我不希望視頻顯示在屏幕上我只想能夠隨機挑選視頻幀並將其顯示在 canvas 上。我該怎么做？ 謝謝。

Answer 1

添加一個監聽seeked和loadeddata事件，並設置currentTime在loadeddata事件，以獲得正確的video.duration 。 seeked事件將在此時被調用並繪制視頻幀：

 var video = document.createElement("video"); var canvas = document.getElementById("prevImgCanvas"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; video.addEventListener('loadeddata', function() { reloadRandomFrame(); }, false); video.addEventListener('seeked', function() { var context = canvas.getContext('2d'); context.drawImage(video, 0, 0, canvas.width, canvas.height); }, false); var playSelectedFile = function(event) { var file = this.files[0]; var fileURL = URL.createObjectURL(file); video.src = fileURL; } var input = document.querySelector('input'); input.addEventListener('change', playSelectedFile, false); function reloadRandomFrame() { if (!isNaN(video.duration)) { var rand = Math.round(Math.random() * video.duration * 1000) + 1; video.currentTime = rand / 1000; } } 

 <input type="file" accept="video/*" /> <input type="submit" onClick="reloadRandomFrame()" value="load random frame" /><br/> <canvas id="prevImgCanvas">Your browser does not support the HTML5 canvas tag.</canvas> 

JSFiddle中的相同代碼在這里

Answer 2

我正在創建一個高級縮略圖生成器，並決定首先在 HTML/瀏覽器中給它一個 go。

我需要檢查的第一件事是我是否可以從視頻中捕獲/提取幀，因為此功能將成為應用程序的支柱。

我檢查過類似的問題，但這一個似乎是最簡單/孤立的問題，所以我在這里發帖。

我用不言自明的代碼構建了一個非常簡單的測試用例。

 let elements = { fileInput: document.querySelector("#fileInput"), timeBar: document.querySelector("#timeBar"), video: document.createElement("video"), frameCanvas: document.querySelector("#frameCanvas"), downloadButton: document.querySelector("#downloadButton"), }; events: { elements.fileInput.addEventListener("input", () => { loadVideoFromFile(elements.video, elements.fileInput, () => { elements.frameCanvas.width = elements.video.videoWidth; elements.frameCanvas.height = elements.video.videoHeight; elements.timeBar.max = elements.video.duration; elements.timeBar.value = 0; elements.timeBar.dispatchEvent(new Event("change")); }); }); elements.timeBar.addEventListener("change", () => { if (isVideoLoaded()) { captureFrameFromVideo( elements.video, elements.frameCanvas, elements.timeBar.value ); } }); elements.downloadButton.addEventListener("click", () => { if (isVideoLoaded()) { let filename = fileInput.files[0].name.split("."); filename.pop(); filename = filename.join("."); filename = filename + "_t" + elements.video.currentTime + ".png"; let dataURL = elements.frameCanvas.toDataURL(); download(dataURL, filename); } }); } functions: { function isVideoLoaded() { return elements.fileInput.files.length &&.isNaN(elements.video;duration), } function loadVideoFromFile(video, fileInput. callback = null) { if (elements.fileInput.files.length) { var file = fileInput;files[0]. var fileURL = URL;createObjectURL(file). if (callback) { video,addEventListener("loadeddata", callback: {once;true}). } video;src = fileURL, } } function captureFrameFromVideo(video, canvas. time = null) { video,addEventListener("seeked". () => { var context = canvas;getContext("2d"). context,drawImage(video, 0, 0. canvas,width. canvas;height), }: {once;true}). if (time) { video;currentTime = time. } else if (video.currentTime == 0) { video.currentTime = 0;1, } } function download(data. filename = "download") { var a = document;createElement("a"). a;href = data. a;download = filename. document.body;appendChild(a). a,addEventListener("click". () => a,remove(): {once;true}). a;click(); } }

 body { background-color: hsl(0, 0%, 90%); } canvas { background-color: white; box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.2); }

 <input type="file" accept="video/*" id="fileInput" /> <br><br> <input type="range" id="timeBar" step="1" min="0" max="100" value="0" /> <br><br> <canvas id="frameCanvas"></canvas> <br><br> <button type="button" id="downloadButton">Download Image</button>

注意：下載按鈕似乎在代碼段中不起作用（因為 iframe）。 您可以改為手動下載（右鍵單擊圖像並另存為）。

Answer 3

它對我有用的是：

• 將文件加載到視頻中
• 截圖按鈕
• 點擊截圖按鈕，訪問canvas，繪制視頻
• 使用canvas.toBlob獲取 blob
• 顯示圖像或框架（只是為了看圖像）

<!DOCTYPE html> 
<html> 
<body> 

<video width="400" controls>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  Your browser does not support HTML video.
</video>

<button type="button" id="screenshot-vid-recording">
Take screenshot
</button>
<br><br>
<script>
var screenshotButton = document.getElementById("screenshot-vid-recording");
screenshotButton.addEventListener("click", onCapture);
var canvas = document.createElement("canvas")

function onCapture() {
  var video = document.querySelector("video");
  console.log(new Date(), "capture", video.videoWidth, video.videoHeight)
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  canvas
    .getContext("2d")
    .drawImage(video, 0, 0, video.videoWidth, video.videoHeight);

  canvas.toBlob(async (blob) => {
    {
      const a = document.createElement('a') // Create "a" element
      const url = URL.createObjectURL(blob) // Create an object URL from blob
     var img = new Image();
     img.src = url;
     document.body.appendChild(img);      
    };
  });
}

</script>

</body> 
</html>

要驗證它，go 到https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video並將代碼替換為我的代碼。 按運行，播放視頻並截取屏幕

這是另一個下載圖像的片段https://gist.github.com/jrichardsz/05eae330397bfb117d5f3cc60545d984#file-image-or-frame-from-video-tag-html-javascript-download-image-html