带有动态缩略图的HTML5视频

Question

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

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

输出切入源代码：

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

Answer 1

从外观上看，这是因为浏览器认为您的画布“受污”-使用上面提供的示例，我让视频运行了一点，然后尝试记录toDataURL输出：

console.log（canvas.toDataURL（））; VM1344：2未捕获的DOMException：无法在“ HTMLCanvasElement”上执行“ toDataURL”：可能无法导出污染的画布。

我怀疑这是因为视频是从第三方URL加载的。

尝试从与HTML代码相同的域中加载视频，然后查看是否可行