Estoy trabajando en la herramienta basada en navegador para distribuidores de medios que requieren cierta manipulación con video.

Tengo un reproductor de video HTML5 con video cargado desde otro dominio (ej.http://video.com) El dominio devuelve los siguientes encabezados para el video (intenta...-Origin con * y con un nombre de dominio específico):

Access-Control-Allow-Methods: GET
Access-Control-Allow-Origin: *

losvideo la etiqueta es así:

<video crossorigin="anonymous" src="http://video.com/video.mp4"></video>

JS que ejecuto es el siguiente:

        // meida is a reference to <video> tag
        var
            imgData,
            width = media.videoWidth,
            height = media.videoHeight,
            canvas = document.createElement("canvas"),
            context = canvas.getContext('2d');

        canvas.width = width;
        canvas.height = height;

        context.fillRect(0, 0, width, height);
        context.drawImage(media, 0, 0, width, height);

        imgData = canvas.toDataURL('image/png'); // line where IE throws DOMException named 'Security error'

El código funciona en todos los navegadores, excepto en la familia IE. Lo he probado en IE 11.

Entiendo que en este caso el lienzo se contamina mientras no debería.

¿Alguien sabe alguna manera de hacerlo funcionar? Vi algunas soluciones para las imágenes, pero no funciona en mi caso convideo.

PD: he visto la respuestaCanvas.toDataURL () funciona en todos los navegadores excepto IE10 pero es bastante viejo y está relacionado con las imágenes. Espero que las cosas hayan cambiado desde entonces.