title: Javascript how to extract frame from video?
body: <p>Hello I have the following JS code that creates a video from a file input:</p>
  
  <pre><code>&lt;canvas  id="prevImgCanvas"&gt;Your browser does not support the HTML5 canvas tag.&lt;/canvas&gt; 
  
  &lt;input id="videoage" type="file" name="video" class="chooseNail" accept="video/*" style="display:none;" onchange="loadSnippetThumb(event)"&gt;
  &lt;label for="videoage" id="labelvideo" &gt;Choose Video&lt;/label&gt;
  
  var loadSnippetThumb = function(event) {                
      var c = document.getElementById("prevImgCanvas");
      var context = c.getContext('2d');
      var url = URL.createObjectURL(event.target.files[0]);
      var video = document.getElementById('video222');
      video.src = url;
      video.autoPlay = true;
  
  }
  </code></pre>
  
  <p>This creates a video that plays on screen that the user has chosen to upload using the file input. I don't want the video to display on screen I just want to be able to pick out a random frame of the video and displays it on the canvas. How can I do this?
  Thanks.</p>