title: Creating a table dynamically with img element from video inserted by user
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>
  
  <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);
  
      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.src = dataURI;
        imagV.height = 50;
        imagV.with = 50;
  
      imagV.setAttribute("src","http://placehold.it/200/200/pink/black");
      imagV.setAttribute("onclick","imgClick(this)");
  
  
      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);
  }// fim if name
          }   
      }   
  </code></pre>