Gfycat Video in Safari

Question

Ich bin gfycat Video auf einer Seite ohne iframe eingebettet.

Gfycat speichert Videos an drei verschiedenen Orten, je nach Größe: zippy für kleine, fat für größere und giant für die größte. Ich kenne nur Video ID und weiß nicht, wo es gespeichert ist.
Also, ich füge nur Quellen für jeden Laden hinzu.

Hier ist Code, um die innere Struktur von iframe embed wiederholen:

<video preload="none" loop> 
    <source src="//zippy.gfycat.com/{{ID}}.mp4" type="video/mp4"> 
    <source src="//fat.gfycat.com/{{ID}}.mp4" type="video/mp4"> 
    <source src="//giant.gfycat.com/{{ID}}.mp4" type="video/mp4"> 
</video> 

Nachdem ich play Methode aufrufen, hier beispielhaft JS:

video_element.play(); 

Zum Beispiel this video speichert bei giant speichern. Also, die ersten zwei Quellen antworten mit 403 Code, aber die letzte Quelle ist gültig und das Video wird abgespielt.

Ich verstehe, dass dies nicht wirklich schöne Lösung ist, aber es funktioniert gut in Chrome, Firefox und Opera. Aber nicht in Safari.

Safari verwendet die erste Quelle, es antwortet 403 und dann andere zwei Quellen nicht automatisch, wie es in anderen Browsern geschieht.
Also, kann ich dieses Problem lösen? Da ich nur JS verwenden kann, kenne ich den Speicher nicht und kann Iframe nicht verwenden.

Hier ist jsfiddle zu testen.

Answer 1

Es ist nicht gut, URLs auf diese Weise zu formulieren, da sie sich jederzeit ändern können. Tatsächlich sieht es so aus, als ob die URLs für zippy und fat subdomain nicht mehr von Gfycat verwendet werden.

Sie sollten stattdessen ihre API verwenden, um die Daten im JSON-Format abzurufen und Javascript zu verwenden, um die Quell-URLs des Videoelements zu aktualisieren.

Möglicherweise möchten Sie dies überprüfen: https://github.com/gfycat/gfycat.js