Grab n-ten Rahmen aus Video für die Vorschau

Question

Wenn ich eine Videodatei in einem Javascript-Dokument habe, wie greife ich einen Rahmen aus der Mitte? Dies packt den aktuellen Frame, aber ich möchte einen Rahmen von der Mitte für ein Thumbnail. Ist das etwas, das leicht gemacht werden kann? Diese Art von Arbeiten, aber ich bin nicht in der Lage, den Rahmen an den Anfang zurückzusetzen, nachdem der Greifer fertig ist.

http://jsbin.com/betibe

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

ich für die vorherige Antwort entschuldigen,

video.seekTo({ frame: frameNum }); 

hat für mich den Trick. Passen Sie das frameNum beliebig an.

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'); 
    } 
}); 

als Referenz auf dem VideoFrame® Besuch: https://github.com/allensarkisyan/VideoFrame

Answer 2

Es kann mit einer Leinwand getan werden

DEMO

Beispiel von 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 />