Safari中的Gfycat視頻

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

Gfycat在三個不同的地方存儲視頻，具體取決於它的大小：zippy爲小，fat爲大，giant爲最大。我只知道視頻ID，不知道它存儲在哪裏。
所以，我只是爲每個商店添加資源。

這裏的代碼重複iframe embed內部結構：
Safari中的Gfycat視頻

<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();

例如，在商店giantthis video商店。因此，前兩個數據源使用403代碼進行響應，但最後一個數據源是有效的，並且視頻正在播放

據我所知，這不是很漂亮的解決方案，但它適用於Chrome，Firefox和Opera。但不是在Safari。

Safari應用第一個來源，它響應403，然後其他兩個來源不會自動應用，就像在其他瀏覽器中發生的那樣。
那麼，我能解決這個問題嗎？鑑於我只能使用JS，不知道商店並且不能使用iframe。

這裏的jsfiddle來測試。

來源

2017-08-11 Legotin

啊，Safari瀏覽器，新的Internet Explorer（是的，這再次評論，我知道）。 –

@JeremyThille（╯(╰） – Legotin

以這種方式制定網址並不是一個好習慣，因爲它們隨時都可能發生變化。事實上，它看起來像zippy和胖子域名的網址不再被Gfycat使用。

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

您可能要檢查了這一點：https://github.com/gfycat/gfycat.js

來源

2017-08-15 15:13:53 kngroo

Safari中的Gfycat視頻

回答

相關問題