gfycat.com 提供了使用 JS Embed 选项在我的网站上嵌入 GIF 的选项。
我得到这样的代码:
<img class='gfyitem' data-id='HighMelodicDairycow' />
问题是我无法在站点上找到有关运行它所需的 Javascipt 代码的任何信息。有什么想法吗?
最佳答案
我也无法在他们的网站上找到它,但这是他们用于嵌入第 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
)
我知道这可能为时已晚,无法为您提供帮助,但希望这对遇到此问题的其他人有所帮助。
关于javascript - JS 在我的网站上嵌入 gfycat,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37833132/