Question

我在一条线上有3个画布，每个我想放一个图像（截图形式是一个视频，在不同的时间）。问题是所有3个屏幕截图都在同一时间（指定的最后一次）。贝娄是我的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);
    }
}

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

不同时间的视频截图

1 个答案: