帆布視頻CORS

Question

我從http://jakearchibald.com/scratch/alphavid/

$("#video").append('<video id="movie" style="display:none" autobuffer><source id="srcMp4" src="https://host-away-from-host.com/file.mp4" type=\'video/mp4; codecs="avc1.42E01E"\' /></video>'+ 
'<canvas width="711" height="800" id="buffer" style="display:none"></canvas>'+ 
'<canvas width="711" height="400" id="output"></canvas>'); 

var outputCanvas = document.getElementById('output'), 
    output = outputCanvas.getContext('2d'), 
    bufferCanvas = document.getElementById('buffer'), 
    buffer = bufferCanvas.getContext('2d'), 
    video = document.getElementById('movie'), 
    width = outputCanvas.width, 
    height = outputCanvas.height, 
    interval; 


function processFrame() { 
    buffer.drawImage(video, 0, 0); 

    // this can be done without alphaData, except in Firefox which doesn't like it when image is bigger than the canvas 
    var image = buffer.getImageData(0, 0, width, height), 
     imageData = image.data, 
     alphaData = buffer.getImageData(0, height, width, height).data; 

    for (var i = 3, len = imageData.length; i < len; i = i + 4) { 
     imageData[i] = alphaData[i-1]; 
    } 

    output.putImageData(image, 0, 0, 0, 0, width, height); 
} 

video.addEventListener('play', function() { 
    clearInterval(interval); 
    interval = setInterval(processFrame, 40) 
}, false); 

獲得下面的代碼，它需要的視頻，並將其裝載到透明度的畫布。

但是，我爲我的視頻使用了CDN，而Chrome對這個跨源數據並不滿意。

我已經在我的CDN中設置了正確的CORS頭文件（但是很感謝覈對清單），但我不知道如何對這些代碼實施這些建議的更改; http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html

對此事的任何意見，將不勝感激！

謝謝！

Answer 1

根據這個錯誤報告的Firefox 12+支持CORS視頻：

https://bugzilla.mozilla.org/show_bug.cgi?id=682299

如何使資源CORS意識到：

https://developer.mozilla.org/en/CORS_Enabled_Image

https://developer.mozilla.org/en/WebGL/Cross-Domain_Textures

應適用於其他現代瀏覽器，但我建議你測試哪些瀏覽器是現代的。