javascript - JS 在我的网站上嵌入 gfycat

Question

gfycat.com 提供了使用 JS Embed 选项在我的网站上嵌入 GIF 的选项。

我得到这样的代码:

<img class='gfyitem' data-id='HighMelodicDairycow' />

问题是我无法在站点上找到有关运行它所需的 Javascipt 代码的任何信息。有什么想法吗？

Answer 1

我也无法在他们的网站上找到它，但这是他们用于嵌入第 3 方网站的 GitHub 存储库:https://github.com/gfycat/gfycat.js/tree/master.

以下是自述文件中的重要部分:

---

脚本

要使 JS Embed 正常工作，您只需在开始的 body 标记之后添加:

<script>
  (function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "https://assets.gfycat.com/gfycat.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'gfycat-js'));
</script>

当此脚本运行时，任何具有 gfyitem 类的元素都将转换为 Gfycat 嵌入。

---

可用选项

如果您想更改嵌入的行为，您可以将这些作为数据属性添加到元素中。 (数据-)

• data-id:Gfycat id(必填)
• data-controls:包括暂停/速度等控件(默认:false)
• data-title:悬停时显示标题(默认:false)
• data-autoplay:在页面加载时自动开始播放(默认:true)
• data-expand(已弃用，请使用data-responsive):扩展视频元素以填充其容器的空间(默认:false)
• data-responsive:扩展视频元素以填充其容器的空间(默认:false)
• data-max-height(仅与 data-responsive=true 一起使用):设置响应式视频的高度上限
• data-optimize:在 50% 可见时播放视频，并延迟加载 gif(默认:true)
• data-gif:加载 .gif 文件而不是视频(默认:false)
• data-hd:加载高质量视频(默认:true)
• data-playback-speed:设置视频播放速度，取值区间[0.125, 8] (默认: 1)

我知道这可能为时已晚，无法为您提供帮助，但希望这对遇到此问题的其他人有所帮助。