5

videoタグで動画を再生しています。ビデオ ファイルは、index.html と同じディレクトリにあります。次に、ビデオ ピクセルを に置き、canvasいくつかのロジックを実行し、それらを読み取り、別の に置きcanvasます。これはすべて、firefox と chrome では正常に機能しますが、IE9 では機能しません。キャンバスからピクセルを読み取ろうとすると、IE でセキュリティ エラーが発生します。ビデオが他のドメインから発信されたものである場合、これは理解できますが、そうではありません. さらに興味深いことに、関連するコードを setTimeout に入れるか、コンソールからトリガーするとエラーが発生しますが、スクリプトで直接呼び出された場合は発生しません。関連する 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();                  // <--- this one works
var wurst = setTimeout(fun,50);     // <--- this one doesn't
});

ここで何が起きていて、それを回避するために何ができるでしょうか?

4

1 に答える 1

0

うーん..それは奇妙に思えます! setTimeout の代わりに requestAnimationFrame を使用してみましたか?

// Polyfill for HTML5's requestAnimationFrame API.
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame    || 
          window.oRequestAnimationFrame      || 
          window.msRequestAnimationFrame     || 
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

requestAnimFrame(fun);
于 2012-08-03T00:19:07.230 に答える