Cross-Origin-Video in Safari

Weiß jemand, ob Safari crossorigin Attribut auf dem HTML5-Tag <video> unterstützt? Ich serviere Video von einem Server, der mit allen benötigten CORS-Headern antwortet, und ich verwende das Markup unten, um das Video in meine Seite einzubetten. Die Seite wird von einer anderen Domain geliefert. Cross-Origin-Video in Safari

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

Ich zeichne dann das Video auf eine Leinwand und bekomme das Bild von der Leinwand mit toDataURL API. Dies funktioniert in Chrome und Firefox, aber Safari löst den Sicherheitsfehler aus, als gäbe es kein crossorigin Attribut auf dem Video.

Irgendwelche Ideen?

Quelle

2012-08-10 akonsu

funktioniert in Safari auf OS X, aber nicht auf iOS –

Ich bin gespannt, wie Sie es in Fx/Chrome, CORS-Header und crossorigin = anonym zu tun scheint nicht genug, um Canvas nicht zu verschmutzen. – NoBugs

@NoBugs Ich erinnere mich nicht genau, wie ich es in FF/Chrome arbeiten ließ, es war lange her, ich erinnere mich vage daran, dass ich mit CORS-Headern spielte, die der Server zurückgab. Hier ist der Code, der alles hat: https://github.com/akonsu/copla – akonsu

Es scheint, dass Safari das CrossOrgin-Attribut nicht unterstützt, aber ich kann nichts offizielles finden. Es gibt diesen Tweet https://twitter.com/sonnypiers/status/187513545397776384 mit einem Work-Around für Bilder, aber ich denke nicht, dass es für Video hilft.

Quelle

2012-12-24 07:58:51

Es gibt auch einen Verweis auf das Problem hier: http://flowplayer.electroteque.org/snapshot/fp5 –

-2

Benötigen Sie zuerst CORS? Die direkte Verknüpfung scheint in Safari zu funktionieren. Ich versuche es htmlinstant.com

<video src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" controls />

mit dem Wenn Sie CORS benötigen, dann ist die folgende Seite sagt, dass die Unterstützung für die es im Mai 2011 hat es allerdings nicht getestet wurde zugegeben. https://developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes

Ein Beispiel mit Video auf Leinwand, Abschnitt 5.4 unter diesem Link sehen: http://www.html5rocks.com/en/tutorials/video/basics/ I getestet und es läuft in meiner Safari.

Quelle

2012-08-12 06:49:23 shauvik

danke. Das Sample von html5rocks scheint kein Video aus einer anderen Domain zu verwenden. Ich muss Videos aufnehmen, die aus einer anderen Domäne stammen, und ich kann dies in Safari nicht tun, da die Zeichenfläche beim Zeichnen auf die Zeichenfläche als fehlerhaft gekennzeichnet wird und beim Aufrufen von DataURL ein Sicherheitsfehler auftritt. Beachten Sie, dass gemäß der CORS-Spezifikation der Canvas nicht beschädigt wird, wenn der Film von einer Site stammt, die CORS unterstützt und die Site entsprechende CORS-Header sendet. Safari scheint dies jedoch nicht zu unterstützen. – akonsu

danke.Das Zeichnen von Video zu Leinwand funktioniert, ja. Das Abrufen von Daten aus der Arbeitsfläche funktioniert nicht. – akonsu

Von unseren Tests haben wir Safari Crossdomain nicht unterstützt. Wir fügen Crossorigin-Attribut hinzu, um CORs in Audio-Anfragen zu verwenden (wird berichten, wie das geht).

Lustig, wie crossdomain schien gut unter http aber nicht unter https. Wenn Sie die w3-Spezifikation für Audio-/Video-Tags lesen (sogenannte Media-Tags), wird angenommen, dass sie domainübergreifenden Einschränkungen unterliegen.

Unterstützung von CORS in Audio-Tag: https://developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes

nun weitere interessante Tatsache ist, dass Safari die myme Art der Dateierweiterung beruht die Wahl (was?). Eine Datei mit * .mp4 als Erweiterung spielte gut. Gleiche Datei umbenannt in etwas anderes nicht.

Quelle

2013-07-22 18:01:15 nurieta

Hier ist die Abhilfe für Video:

      $.ajax({ 
          type: 'get', 
          url : videoUrlFromAnotherDomain, 
          crossDomain: 'true', 
          success: function(data) { 
           // get a base64 version of the video! 
           var base64 = window.btoa(data); 
           // get a new url! 
           var newURL = 'data:video/mp4' + ';base64,' + base64; 
           // set the src on the video source element to the new url 
           video.find("source").attr("src", newURL); 
          }

Stellvertreter unabhängig von der Art von Video, um es für "video/mp4" in newURL ist.

Quelle

2014-07-25 19:08:46 kpoz

Das Abrufen eines gesamten Videos und das Encoding auf base64 klingt sehr ressourcenintensiv. Irgendeine Möglichkeit, dies zu tun, ohne das Video als ein riesiges base64-Objekt im Speicher zu behalten? – NoBugs

OMG was für ein Workaround :) – jujule

Hero Einheit Hintergrund Schleife: 4-10 MB vor base64. 10 Minuten Video: 200-400MB vor base64. Stundenvideo: 1-2GB oder so. Diese Lösung ist leider schlechter als das Problem. Mein Telefon weint darüber nachdenken. – amcgregor

Antwort

Verwandte Themen