How to get thumbnail image from video file when uploading it using jquery

See more:

Javascript

jQuery

I want to extract a thumbnail image from a video file when i upload it using jquery. I tried below code but it gives a black image.

What I have tried:

document.getElementById("fld").addEventListener('change', function (e) {

url = window.URL.createObjectURL(e.target.files[0]);
var video = document.createElement('video');

video.src = url;

var canvas = document.createElement('canvas');
canvas.width = 360;
canvas.height = 240;
var context = canvas.getContext('2d');

context.drawImage(video, 0, 0, canvas.width, canvas.height);
var dataURI = canvas.toDataURL('image/jpeg');
$('#imgpath').attr('src',dataURI);

}, false);