Javascript如何从视频中提取帧? [英] Javascript how to extract frame from video?

问题描述

您好，我有以下JS代码可通过文件输入创建视频:

Hello I have the following JS code that creates a video from a file input:

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

}

这将创建一个视频，该视频在用户选择使用文件输入上传的屏幕上播放.我不希望视频显示在屏幕上，我只想能够随机选择视频帧并将其显示在画布上.我怎样才能做到这一点? 谢谢.

This creates a video that plays on screen that the user has chosen to upload using the file input. I don't want the video to display on screen I just want to be able to pick out a random frame of the video and displays it on the canvas. How can I do this? Thanks.

推荐答案

在seeked和loadeddata事件上添加侦听器，并在loadeddata事件中设置currentTime以获得正确的video.duration. seeked事件将在此时被调用并绘制视频帧:

Add a listener on seeked and loadeddata events and set currentTime in the loadeddata event in order to get the correct video.duration. The seeked event will get called and draw your video frame at this moment :

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中的相同代码此处

The same code in a JSFiddle here

这篇关于Javascript如何从视频中提取帧?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！