title: Trying to show frame of video selected by user in img element using canvas
body: <p>Trying to create an img element with a frame from a video that user selects with a html input. The file enters in the "if" but only shows a black square in the table and the name of the file and not a frame from the video.</p>
  
  <p>VIDEOS</p>
  
  <pre><code> if(fileList[i].type === "video/"+Video[j]){  
  
          var video = document.createElement('video');
          video.src=(window.URL.createObjectURL(fileList[i]).replace('blob:',''));
          video.pause();
          video.muted = true;
          video.playsInline = true;
          video.play();
  
          var canvas = document.createElement('canvas');
              canvas.width = 50;
              canvas.height = 50;
              canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
  </code></pre>
  
  <p>convert to desired file format</p>
  
  <pre><code>var dataURI = canvas.toDataURL('image/png');
  </code></pre>
  
  <p>Table for Videos</p>
  
  <pre><code>for( var lV=0; lV&lt;100; lV++ ){  
              // if for name
          if(fileList[i].name===NameFile[lV]){    
  
      var Vx = document.createElement("Table");
      Vx.setAttribute("id", "galeriaV" + (i));
      document.body.appendChild(Vx);
  </code></pre>
  
  <p>imagens of videos</p>
  
  <pre><code>var VImg = document.createElement("tr");
      VImg.setAttribute("id", "VTr" +(i));
      document.getElementById("galeriaV" +(i)).appendChild(VImg);
  var ImgV = document.createElement("td");
  var imagV =document.createElement("img");
  imagV.setAttribute("id", "imageID" +(i));
  imagV.setAttribute("className", "bordered");
  imagV.setAttribute("src","http://placehold.it/200/200/pink/black");
  imagV.setAttribute("onclick","imgClick(this)"); 
  
    imagV.src = dataURI;
    imagV.height = 50;
    imagV.with = 50; 
  
  ImgV.appendChild(imagV);
  document.getElementById("VTr" + (i)).appendChild(ImgV);
  </code></pre>
  
  <p>files names</p>
  
  <pre><code>var yV = document.createElement("tr");
      yV.setAttribute("id", "VNTr" + (i));
      document.getElementById("galeriaV" +(i)).appendChild(yV);
  
      var Vz = document.createElement("td");
      var Vt = document.createTextNode(NameFile[lV]);
      Vz.appendChild(Vt);
      document.getElementById("VNTr" + (i)).appendChild(Vz);
  }
          }   
      }       
  </code></pre>