score:1

let say you have to get still image from the video below,

<video id="video" controls="controls">
      <source src=".mp4" />
</video> 
<button id="capture">capture</button> 
<div id="output"></div>

use the following function to get the image from the video before it loads:

(function() {
"use strict";

var video, $output;
var scale = 0.25;

var initialize = function() {
    $output = $("#output");
    video = $("#video").get(0);
    $("#capture").click(captureimage);                
};

var captureimage = function() {
    var canvas = document.createelement("canvas");
    canvas.width = video.videowidth * scale;
    canvas.height = video.videoheight * scale;
    canvas.getcontext('2d')
          .drawimage(video, 0, 0, canvas.width, canvas.height);

    var img = document.createelement("img");
    img.src = canvas.todataurl();
    $output.prepend(img);
};

$(initialize);    
}());

thanks to chris brandsma, i have used this on wordpress as custom code and made some changes according to my work, so you need to add some code to get random time based images. you can find this code on: tutorial code


Related Query

More Query from same tag