Safari中的Gfycat視頻

Question

我將gfycat視頻嵌入沒有iframe的頁面上。

在三個不同的地方Gfycat門店的視頻，這取決於它的大小： zippy為小， fat做大giant為最大。 我只知道視頻ID ，不知道它存儲在哪里。
因此，我只是為每個商店添加源。

以下代碼重復了iframe embed的內部結構：

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

之后，我調用play方法，下面是示例JS：

video_element.play();

例如， 此視頻存儲在giant商店中。 因此，前兩個來源使用403代碼進行響應，但最后一個來源有效且正在播放視頻。

我了解這並不是一個非常漂亮的解決方案 ，但是它在Chrome，Firefox和Opera中都能很好地工作。 但不是在Safari中。

Safari首先應用源，它會響應403，然后其他兩個源不會自動應用，因為它發生在其他瀏覽器中。
那么，我該如何解決這個問題呢？ 鑒於我只能使用JS，所以不知道商店，也不能使用iframe。

這是要測試的jsfiddle 。

Answer 1

以這種方式制定網址不是一種好習慣，因為它們隨時可能更改。 實際上，看起來Gfycat不再使用zippy和fat子域url。

相反，您應該使用其api檢索JSON格式的數據，並使用javascript更新視頻元素的源網址。

您可能需要檢查一下： https : //github.com/gfycat/gfycat.js