Я работаю над браузерным инструментом для медиа-дистрибьюторов, которые требуют некоторых манипуляций с видео.

У меня есть видеоплеер HTML5 с видео, загруженным из другого домена (например,http://video.com). Домен возвращает следующие заголовки для видео (пытается...-Origin с * и с конкретным доменным именем):

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

video тег выглядит так:

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

JS я запускаю следующее:

        // 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'

Код работает во всех браузерах, кроме семейства IE. Я пробовал это в IE 11.

Я понимаю, что в этом случае холст становится испорченным, а не должен.

Кто-нибудь знает способ заставить это работать? Я видел некоторые обходные пути для изображений, но это не работает в моем случае сvideo.

PS: я видел ответCanvas.toDataURL () работает во всех браузерах, кроме IE10 но он довольно старый и связан с изображениями. Я надеюсь, что все изменилось с тех пор.