JS在我的网站上嵌入gfycat

Question

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

我得到了这样的代码：

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

，我无法找到运行它所需要的JavaScipt程式码网站上的任何信息的问题。有任何想法吗？

Answer 1

我无法在他们的网站上找到它，但这里是他们的GitHub回购嵌入第三方网站：https://github.com/gfycat/gfycat.js/tree/master 。

下面是自述文件中的重要组成部分：

---

脚本

为了让JS嵌入工作，你只需要打开身体标记后补充一点：

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

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

我知道你这是可能为时已晚，以帮助你，但希望这可以帮助其他人，运行到这个问题。