HTML5动态缩略图视频

创建缩略图时遇到问题。我在html2canvas PHP代理的帮助下解决了跨域问题。

控制台中没有错误消息。但不幸的是，Thumnbnail是不可见的、透明的或白色的。

源代码中的输出剪切：

<img src="data:image/png;base64,iVBORw0KGgoAAAA.......Output cut in the source code:NSUhEUgAABN8AAAS4=" width="120">

脚本：

  <script>
var video = document.getElementById("thumb");
video.addEventListener("loadedmetadata", initScreenshot);
video.addEventListener("playing", startScreenshot);
video.addEventListener("pause", stopScreenshot);
video.addEventListener("ended", stopScreenshot);
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ssContainer = document.getElementById("screenShots");
var videoHeight, videoWidth;
var drawTimer = null;
function initScreenshot() {
  videoHeight = video.videoHeight; 
  videoWidth = video.videoWidth;
}
function startScreenshot() {
  if (drawTimer == null) {
    drawTimer = setInterval(grabScreenshot, 1000);
  }
}
function stopScreenshot() {
  if (drawTimer) {
    clearInterval(drawTimer);
    drawTimer = null;
  }
}
function grabScreenshot() {
  ctx.drawImage(video, 0, 0, videoWidth, videoHeight);
  convert(document.getElementById("thumb-parent"));
}
function convert(target) {
        html2canvas(target, {
            "proxy": "../html2canvasproxy.php",
            "logging": true, //Enable log (use Web Console for get Errors and Warnings)
            "onrendered": function(canvas) {
                var img = new Image();
                    img.onload = function () {
                        img.onload = null;
                        img.width = 120;
                        document.getElementById("screenShots").appendChild(img);                            
                    };
                    img.src = canvas.toDataURL("image/png");
            }
        });
    }