帶有動態縮略圖的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代碼相同的域中加載視頻，然后查看是否可行