不同时间的视频截图答案

【问题标题】：Screenshot from video at different time不同时间的视频截图
【发布时间】：2016-02-28 07:39:48
【问题描述】：

我有 3 个画布在一条线上，我想在每个画布上放一张图片（屏幕截图来自视频，在不同的时间）。问题是所有 3 个屏幕截图都是同时（最后指定的时间）。 Bellow 是我的 JavaScript 代码。

function getVideoScreenShot(videoFile, currentIncidentTime, idx) {
    var images = [];

    for(var canvas=1; canvas<=3; canvas++) {
        var canvasId = "#canvas"+ idx + canvas;

        var milisec = parseInt(currentIncidentTime)%1000;
        var secFromMilisec = milisec/1000;

        var sec = (parseInt(currentIncidentTime)/1000)%60;
        sec = "" + sec + "";
        sec = parseInt(sec.substring(0,2));

        var min = ((parseInt(currentIncidentTime)/1000)/60)%60;
        min = "" + min + "";
        min = parseInt(min.substring(0,2));
        var secFromMin = min * 60;

        var seconds = secFromMilisec+sec+secFromMin;

        if (canvas == 1) {
            seconds = seconds - 1;
        } else if (canvas == 3) {
            seconds = seconds + 1;
        } else {
            seconds = seconds;
        }

        images.push({canvas: canvasId, time: seconds});
    }

    console.log(images);
    var video = document.createElement('video');
    video.addEventListener('loadedmetadata', function ()
    {
        var ratio = video.videoWidth / video.videoHeight;
        var w = video.videoWidth;
        var h = w / ratio;

        for (var i = 0; i < images.length; i++) {
            images[i].canvas = document.querySelector(images[i].canvas);

            images[i].canvas.width = w;
            images[i].canvas.height = h;
        }
        draw(video, images);
    });

    video.src = videoFile;
}

function drawFrame(video, time, canvas) {
    var context = canvas.getContext("2d");
    video.addEventListener("seeked", function (e) {
        e.target.removeEventListener(e.type, arguments.callee);
        context.fillRect(0, 0, canvas.width, canvas.height);
        context.drawImage(video, 0, 0, canvas.width, canvas.height);
    });
    console.log(time, "time to draw frame");

    video.currentTime = time;
}

function draw(video, images) {
    for (var i = 0; i < images.length; i++) {
        drawFrame(video, images[i].time, images[i].canvas);
    }
}

【问题讨论】：

旁注：arguments.callee 已过时。你应该给你的监听函数一个名字，
如果我评论那行我有相同的结果

标签： javascript image html5-canvas html5-video addeventlistener

【解决方案1】：

这是一个让用户单击以选择何时将视频帧抓取到画布的示例。

最多可以从视频中抓取 4 帧并显示在一个画布上。

如果您需要定时帧捕获，您可以创建一个requestAnimationFrame 循环并在您想要的经过时间发生时触发#snap.click 代码。

JavaScript：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var position=0;

var v = document.getElementById('v');
v.addEventListener( "loadedmetadata", function(e){
  // resize canvas
  cw=canvas.width=v.videoWidth;
  ch=canvas.height=v.videoHeight;
  // play the video
  v.play();
}, false );   


$('#snap').click(function(){

  var x,y;
  if(position==0){ x=0;y=0; }
  if(position==1){ x=cw/2;y=0; }
  if(position==2){ x=0;y=ch/2; }
  if(position==3){ x=cw/2;y=ch/2; }

  ctx.clearRect(v,x,y,cw/2,ch/2);
  ctx.drawImage(v,x,y,cw/2,ch/2);

  position++;
  if(position>3){ position=0; }

});

HTML -- 您必须将视频源设置为您自己的 .mp4

<button id=snap>Capture</button>
<br>
<h4>Captured Snapshots -- 4 snapshots per canvas</h4>
<canvas id="canvas" width=300 height=300></canvas>
<h4>Video Element below</h4>
<video id=v controls loop>
    <source src=yourClip.mp4 type=video/mp4>
</video>

【讨论】：