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

回答

相关问题