Question

我在没有iframe的网页上嵌入gfycat视频。

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

例如，this video存储在giant商店。所以，前两个源代码响应403代码，但最后一个源是有效的，视频正在播放。

我知道这不是很漂亮的解决方案，但它运作良好在Chrome，Firefox和Opera中。但不是在Safari中。

Safari应用第一个源，它响应403，然后其他两个源不会自动应用，就像在其他浏览器中一样那么，我能解决这个问题吗？鉴于我只能使用JS，不知道商店，也不能使用iframe。

这是jsfiddle来测试。

Answer 1

以这种方式制定网址并不是一种好的做法，因为它们随时都可能发生变化。事实上，看起来Gfycat不再使用zippy和fat子域名网址了。

您应该使用他们的api来检索JSON格式的数据，并使用javascript来更新视频元素的源URL。

您可能需要查看此内容：https://github.com/gfycat/gfycat.js

Safari中的Gfycat视频

1 个答案: