用画布创建视频帧

Question

尝试使用用户使用html输入选择的视频中的帧创建img元素。该文件在“if”中输入，但只显示表格中的黑色方块和文件名称，而不是视频中的帧。

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);
convert to desired file format

var dataURI = canvas.toDataURL('image/png');
Table for Videos

for( var lV=0; lV<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);
imagens of videos

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);

文件名

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);
}
        }   
    }