title: HTML5 canvas (videothumbnail) gives SecurityError
body: <p>I have read lost of threads on this but wasnt able to find solution. This is the situation. I've loaded a video and created a thumbnail with HTML5 canvas. But when I try to save that canvas image with <code>=toDataUrl</code> then I get this error:</p>
  
  <blockquote>
    <p>Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.</p>
  </blockquote>
  
  <pre><code>&lt;video id="video" width="200"     
  src="https://sportsquare.s3.amazonaws.com/2012030311_big_1.mp4"   
  type="video/mp4" controls&gt;&lt;/video&gt;&lt;br/&gt;
  &lt;canvas id="canvas"&gt;&lt;/canvas&gt;&lt;br/&gt;
  
  &lt;script&gt;
      window.setInterval(function(){
          var canvas = document.getElementById('canvas');
          var video = document.getElementById('video');
          canvas.getContext('2d').drawImage(video, 0,0,175,125);
          var dataURL = canvas.toDataURL("image/png");
          dataURL = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
      }, 2000);
  &lt;/script&gt;
  </code></pre>