캔버스 비디오는 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이 교차 출처 데이터에 만족하지 않습니다.

나는 이미 적절한 CORS 헤더를 설정했지만 (CDN에는 체크리스트가 있습니다) 이러한 코드에 대한 제안 된 변경 사항을 구현하는 방법을 모릅니다. http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html

이 문제에 대한 조언을 보내 주시면 감사하겠습니다.

감사합니다. 이 버그 보고서 파이어 폭스 12 +에 따르면

는

Answer 1

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

다른 적용해야 최신 브라우저도 있지만, 어떤 브라우저를 테스트 해 보시기 바랍니다. 현대적이다.