Javascript 如何从外部视频使用画布？_Javascript_Html_Video_Canvas

Javascript 如何从外部视频使用画布？

javascript html video canvas

Javascript 如何从外部视频使用画布？,javascript,html,video,canvas,Javascript,Html,Video,Canvas,我有以下代码： <!DOCTYPE html> <title>Video/Canvas Gray Effect</title> <script> document.addEventListener('DOMContentLoaded', function(){ var v = document.getElementById('v'); var canvas = document.getElementById('c');

我有以下代码：

<!DOCTYPE html> 
<title>Video/Canvas Gray Effect</title> 
<script> 
document.addEventListener('DOMContentLoaded', function(){
    var v = document.getElementById('v');
    var canvas = document.getElementById('c');
    var context = canvas.getContext('2d');
    var back = document.createElement('canvas');
    var backcontext = back.getContext('2d');

    var cw,ch;

    v.addEventListener('play', function(){
        cw = v.clientWidth;
        ch = v.clientHeight;
        canvas.width = cw;
        canvas.height = ch;
        back.width = cw;
        back.height = ch;
        draw(v,context,backcontext,cw,ch);
    },false);

},false);

function draw(v,c,bc,w,h) {
    if(v.paused || v.ended) return false;
    // First, draw it into the backing canvas
    bc.drawImage(v,0,0,w,h);
    // Grab the pixel data from the backing canvas
    var idata = bc.getImageData(0,0,w,h);
    var data = idata.data;
    // Loop through the pixels, turning them grayscale
    for(var i = 0; i < data.length; i+=4) {
        var r = data[i];
        var g = data[i+1];
        var b = data[i+2];
        var brightness = (3*r+4*g+b)>>>3;
        data[i] = brightness;
        data[i+1] = brightness;
        data[i+2] = brightness;
    }
    idata.data = data;
    // Draw the pixels onto the visible canvas
    c.putImageData(idata,0,0);
    // Start over!
    setTimeout(draw,20,v,c,bc,w,h);
}
</script> 



<video id=v controls loop> 
    <source src=video.webm type=video/webm> 
</video> 
<canvas id=c></canvas> 

<style> 
#c {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -180px 0 0 20px;
}

#v {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -180px 0 0 -500px;
}
</style>

仅当视频托管在我的站点中时，画布才起作用，但如果是外部视频，则画布不起作用，仅当使用同一域制作代理时，画布才起作用，例如：

在我的网站上托管视频时工作：

   <video id=v controls loop> 
        <source src=video.webm type=video/webm> 
    </video>

如果使用代理，则工作，但我不会使用代理：

<video id=v controls loop> 
        <source src=./proxy.php?url_toexternal_video=http://host.com/video.webm type=video/webm> 
    </video>

如果使用视频的直接链接，则不工作：

<video id=v controls loop> 
        <source src=http://host.com/video.webm type=video/webm> 
</video>

如果它来自外部视频，有什么方法可以让它工作吗？谢谢

不，没有办法在被跨源内容污染的画布上使用getImageData