帆布视频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

应适用于其他现代浏览器，但我建议你测试哪些浏览器是现代的。