帶動態縮略圖的HTML5視頻

創建縮略圖時出現問題。我在html2canvas PHP代理的幫助下解決了跨域問題。帶動態縮略圖的HTML5視頻

控制檯中沒有錯誤消息。但不幸的是，Thumnbnails不可見，透明或白色。

切斷輸出的源代碼：

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

來源

2015-11-16 Tobias

嗨@Tobias，你有一個測試網址，其中我們可以看到在行動呢？很難直觀地看到什麼是不通過API /代理 –

Hi @Liam是的，我有... http://meinemusikschule.net/MMS/Skripte/html2canvas-php-proxy-master/examples/thumbnail-video。 html – Tobias

從事物的外表，這是因爲瀏覽器認爲你的畫布 '污點' - 使用您上面提供的示例中，我讓視頻運行一點，然後嘗試記錄toDataURL輸出：

console.log（canvas.toDataURL（））; VM1344：2未捕獲的DOMException：未能在'HTMLCanvasElement'上執行'toDataURL'：受感染的畫布可能無法導出。

我懷疑是因爲視頻是從第三方URL加載的。

嘗試從同一個域中的HTML代碼加載視頻，並看看是否能工程

來源

2015-11-16 23:51:21

謝謝你Liam！不幸的是，視頻現在處於相同的域。畫布現在隱藏。隨着谷歌地圖有云： http://meinemusikschule.net/MMS/Skripte/html2canvas-php-proxy-master/examples/google-maps.html 因此，它應該是這樣的： HTTP：// dab1nmslvvntp .cloudfront.net/wp-content/uploads/2014/12/html5-video-article-demos/thumbnails-demo.html – Tobias

沒有代理和視頻在同一個域名上:)感謝提示Liam！ – Tobias

帶動態縮略圖的HTML5視頻

回答

相關問題