Question

如果我在javascript文档中有视频文件，我该如何从中间抓取一个框架？这抓住了当前帧，但是我想要一个中间的框架用于缩略图。这可以轻松完成吗？这种方法很有效，但是在抓取完成后我无法将帧设置回到开头。

var v = document.getElementById('v');
var canvas = document.getElementById('c');
var context = canvas.getContext('2d');

var cw = canvas.width;
var ch = canvas.height;

draw(v,context,cw,ch);
v.currentTime = 5;

function draw(v,c,w,h) {
  c.drawImage(v,0,0,w,h);
  setTimeout(draw,20,v,c,w,h);
}

Answer 1

我为之前的回答道歉，

video.seekTo({ frame: frameNum });

为我做了诀窍。根据需要自定义frameNum。

Demo

HTML：

  <div class="frame">  
  <span id="currentFrame">0</span>
  </div>

<video height="180" width="100%" id="video"> 
  <source src="http://www.w3schools.com/html/mov_bbb.mp4"></source>
</video>

<div id="controls">
  <button id="play-pause">Play</button>
</div>

JS：

var currentFrame = $('#currentFrame');
var frameNum =100;

var video = VideoFrame({
    id : 'video',
    frameRate: 29.97,
    callback : function(frame) {
        currentFrame.html(frame);
    }
});

video.seekTo({ frame: frameNum });


$('#play-pause').click(function(){
    if(video.video.paused){
        video.video.play();
        video.listen('frame');
        $(this).html('Pause');
    }else{
        video.video.pause();
        video.stopListen();
        $(this).html('Play');
    }
});

有关videoframe的参考，请访问：https://github.com/allensarkisyan/VideoFrame

Answer 2

可以使用画布

完成

<强> DEMO

示例取自here

的Javascript

  window.onload = function() {

    var video = document.getElementById('my_video');
    var thecanvas = document.getElementById('thecanvas');
    var img = document.getElementById('thumbnail_img');


    video.addEventListener('pause', function() {

      draw(video, thecanvas, img);

    }, false);

  };


  function draw(video, thecanvas, img) {

    // get the canvas context for drawing
    var context = thecanvas.getContext('2d');

    // draw the video contents into the canvas x, y, width, height
    context.drawImage(video, 0, 0, thecanvas.width, thecanvas.height);

    // get the image data from the canvas object
    var dataURL = thecanvas.toDataURL();

    // set the source of the img tag
    img.setAttribute('src', dataURL);

  }

HTML

  The Video
  <br />
  <video id="my_video" controls>
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" />
  </video>
  <br /> The Canvas
  <br />
  <canvas id="thecanvas">
  </canvas>
  <br /> The Image
  <br />
  <img id="thumbnail_img" alt="Right click to save" />
  <br />

从视频中获取第n帧以供预览

2 个答案: