我加载在一阿贾克斯与引导旋转木马,其中每个幻灯片(而不是像在约延迟加载很多问题),但透过oEmbed来自不同社交网络的iframe莫代尔/人口信息网(Facebook的,Instagram的,叽叽喳喳,...) .
问题是,当我点击提示模式的按钮时,所有幻灯片内容都会被加载,也就是说15到20个oembeds(每个都加载内容文本,图像和javascript ......).
我想要聪明一点,只有"懒加载"滑动幻灯片,甚至更聪明的3张幻灯片3张幻灯片.
我只是为了提供信息而提到我正在使用scrollMonitor和Hubspot Messenger.但我宁愿使用Bootstrap幻灯片事件来触发每张幻灯片的幻影/加载或任何你想要的建议.
我在rails上使用ruby作为后端语言
oEmbed的url以编程方式更改,因为它们是从Admin Backoffice输入并在每个Article/page上更改,但您将在下面找到一个示例:
page.html中
//button to click to make modal appear
<a class="btn btn-primary" onclick="loadModal()" id="socialStoryModal">
load modal
</a>
在page.js中使用Hubspot Messenger加载模态
function loadModal() {
var msg;
msg = Messenger().post({
message: 'modal.html.erb',/see below the carousel
showCloseButton: true,
hideAfter: false
});
}
modal.html.erb =带有轮播和社交嵌入的模态(这里最多可以有50个)
<div id="embeds-carousel" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner" role="listbox">
<div class="item active" id="item1" >
<script>
var url = « https://api.instagram.com/oembed?url=https://www.instagram.com/p/5456544654565/";
embed_request …我试图找出那里的所有oEmbed提供商.我去了oEmbed spec网站,他们有一些,但我发现了一些未指定的,如5分钟视频:
Provider: 5min
URL scheme: http://www.5min.com/video/*
API Endpoint: http://api.5min.com/oembed.{format}
Docs: http://www.5min.com/APIDocs/Embed.aspx
没有比在StackOverflow中询问开发人员社区更好的了.
我有一些文本,包括GitHub Gists的URL.我想查找这些URL并将Gist内联到内容客户端.我试过的一些事情:
因为https://gist.github.com/733951,这意味着我进行JSON-P查找
https://github.com/api/oembed?format=json&url=https%3A%2F%2Fgist.github.com%2F733951,提取html对象的属性,并添加到我的页面.这里的问题是GitHub的OEmbed API只返回Gist的前三行.
调用
jQuery('a.something').embedly({allowscripts: true})
有效,但Embedly从Gist中删除格式.将其包装在<pre>标记中无济于事,因为没有换行符.
.js版本的要点.https://gist.github.com/733951.js使用document.write,所以当我动态地需要它时,我无法控制页面中的位置.(如果我可以将它写入HTML源代码,它会显示在正确的位置,但这都是在客户端完成的.)
任何人都知道Facebook是否支持oEmbed在共享链接时嵌入视频(或其他媒体).我用谷歌搜索,但无法得到一个确定的答案.
我的问题Facebook开发者论坛没有答案.http://forum.developers.facebook.net/viewtopic.php?pid=334549
似乎大多数(如果不是全部)oEmbed提供者端点没有启用CORS.这意味着我必须使用JSONP(对于那些支持它的人)或通过服务器代理只是为了使用oEmbed.
有一个公司政策反对使用来自第三方提供商的JSONP,但我仍然希望以纯粹的客户端方式利用oEmbed(对于我们信任的某些提供商).我理解oEmbed消费者的安全隐患以及为什么他们可能不希望将第三方标记直接放入他们的页面,但为什么提供商会限制这一点呢？如果我构建了一个服务器代理并且没有过滤结果,我可能很容易出现XSS漏洞.
我们正在开发一个网站，让用户可以禁用广告 cookie，Vimeo Player 是否可以拒绝设置任何 cookie？
我们想要一个像 youtube-nocookie 这样的功能，它允许包含 YT iFrame 而不让它设置广告 cookie。
谢谢。
鉴于以下情况html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
<h2>Header</h2>
<figure>
<oembed url="https://www.youtube.com/watch?v=7km4EHgkQiw&list=RDQK-Z1K67uaA&index=9"></oembed>
</figure>
</body>
</html>
为什么页面不显示 youtube 视频？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
<h2>Header</h2>
<figure>
<oembed url="https://www.youtube.com/watch?v=7km4EHgkQiw&list=RDQK-Z1K67uaA&index=9"></oembed>
</figure>
</body>
</html>
正文代码是由CKEditor（我刚刚从标签中删除了“媒体”类figure）生成的。您可以在此处查看我的原始帖子链接
我想使用oembed从youtube链接获取jQuery的嵌入代码:
var url = "http://www.youtube.com/watch?v=iwGFalTRHDA";
url = encodeURIComponent(url);
$.getJSON('http://youtube.com/oembed?url='+url+'&format=json', function(data) {
console.log(data);
});
好吧,我没有得到任何数据.
有趣的是,如果我浏览到网址,我会得到正确的回复:
http://www.youtube.com/oembed?url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DiwGFalTRHDA&format=json`
引导我
{
provider_url: "http://www.youtube.com/"
title: "Trololo"
html: "<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/iwGFalTRHDA?version=3"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/iwGFalTRHDA?version=3" type="application/x-shockwave-flash" width="425" height="344" allowscriptaccess="always" allowfullscreen="true"></embed></object>"
author_name: "KamoKatt"
height: 344
thumbnail_width: 480
width: 425
version: "1.0"
author_url: "http://www.youtube.com/user/KamoKatt"
provider_name: "YouTube"
thumbnail_url: "http://i2.ytimg.com/vi/iwGFalTRHDA/hqdefault.jpg"
type: "video"
thumbnail_height: 360
}
我还使用了jquery oembed插件,但是如果请求成功,也会抛出onError选项.
我真的很期待一些想法......
我有一个javascript函数,可以加载Instagram帖子的HTML嵌入代码.帖子出现了,但照片被灰色背景和Instagram徽标取代.帖子确实包含其他信息,如主题标签,发布时间和用户名.我相信问题是Instagram embeds.js JavaScript库没有正确加载.我知道我可以手动执行此操作,但在我的代码中在语法和位置方面如何执行此操作时遇到困难.以下是我的代码.
<script type="text/javascript">
var auto_refresh = setInterval(
(function () {
$("#latestData").load("displayPost.php");//displayPost.php "echo" html embed code
}), 10000);
</script>
<div id="latestData"></div>
<script src="https://platform.instagram.com/en_US/embeds.js"></script>
<script>if ( typeof window.instgrm !== 'undefined' ) {
window.instgrm.Embeds.process();
}</script>
我用这些来试图解决这个问题.