Ich arbeite an dem browserbasierten Tool für Mediendistributoren, die einige Manipulationen mit Videos erfordern.

Ich habe einen HTML5-Videoplayer mit Video, das von einer anderen Domain geladen wurde (z. B.http: //video.co). Domain gibt die folgenden Header für das Video zurück (Versuche...-Origin mit * und mit spezifischem Domainnamen):

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

Dasvideo tag ist wie folgt:

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

JS Ich laufe wie folgt:

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

Der Code funktioniert in allen Browsern mit Ausnahme der IE-Familie. Ich habe es auf IE 11 versucht.

Ich verstehe, dass in diesem Fall Leinwand befleckt wird, während es nicht sollte.

Weiß jemand, wie es funktioniert? Ich habe einige Problemumgehungen für Bilder gesehen, aber in meinem Fall mit @ funktioniert dies nichvideo.

PS: Ich habe die Antwort gesehen Canvas.toDataURL () funktioniert in allen Browsern außer IE10 aber es ist ziemlich alt und hängt mit Bildern zusammen. Ich hoffe, die Dinge haben sich seitdem geändert.