title: javascript generate video thumbnail from video url
body: <p>I'm going to generate video thumbnail from video url in javascript.
  I need this done via ajax. 
  So I followed this approach.</p>
  
  <pre><code>var src = thumbnail; ///video url not youtube or vimeo,just video on server
  var video = document.createElement('video');
  
  video.src = src;
  
  video.width = 360;
  video.height = 240;
  
  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');
  html += '&lt;figure&gt;';
  html += '&lt;img src="' + dataURI + '' + '" alt="' + item.description + '" /&gt;';
  html += '&lt;figurecaption&gt;'+item.description+'&lt;/figurecaption&gt;'
  html += '&lt;/figure&gt;';
  </code></pre>
  
  <p>But what I get is just black image. 
  I guess it's because load problem but can't find a solution.
  Looking forward to hearing from you.</p>
  
  <p>Regards.</p>