I play the video in the tag video. The video file is in the same directory as index.html. Then I put the pixels of the video on canvas, doing some logic for them, reading them and adding another one canvas. All this works fine in firefox and chrome, but not in IE9. IE gives a security error when I try to read pixels from the canvas. What would be understandable if the video came from some other domain, but this is not so. Even more curiously, the error occurs when I put the appropriate code in setTimeout or run it from the console, but not when it is called directly in the script. Here is the relevant javascript:
$(document).ready(function(){
fun = function(){
var main= $("#main");
var video = $('<video autoplay="autoplay">
<source src="orange.mp4" type="video/mp4" />
<source src="orange.ogv" type="video/ogg" /></video>');
video.css({"width" : 100, "height" : 200});
var canvas1 = $('<canvas></canvas>');
canvas1.css({"position" : "relative", "top" :0,
"width" : 100, "height" : 200, "background-color":"red"});
canvas1.attr({"width" : 100, "height" : 200});
var context1=canvas1[0].getContext("2d");
var canvas2 = $('<canvas></canvas>');
canvas2.css({"position" : "relative", "top" :0,
"width" : 100, "height" : 200, "background-color":"purple",
"margin" : "5px"});
canvas2.attr({"width" : 100, "height" : 200});
var context2=canvas2[0].getContext("2d");
main.append(video);
main.append(canvas1);
main.append(canvas2);
var drawFrame = function(){
context1.drawImage(video[0],0,0,100,200);
var data = context1.getImageData(0,0,100,200);
context2.putImageData(data, 0, 0);
setTimeout(drawFrame, 50);
}
drawFrame();
}
fun();
var wurst = setTimeout(fun,50);
});
What is going on here and what can be done to get around it?