使用 oembed 嵌入 YouTube 视频
我想使用 oembed 通过 jQuery 从 youtube 链接获取嵌入代码:
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);
});
好吧,我没有得到任何数据。
有趣的是,如果我浏览到该 url,我会得到正确的响应:
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 选项,即使请求成功也是如此。
我真的很期待一些想法......
I want to use oembed to get the embed code from youtube links with 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);
});
Well I don't get any data.
Funny thing is, that if I browse to the url I get the right response:
http://www.youtube.com/oembed?url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DiwGFalTRHDA&format=json`
leads me to
{
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
}
I also used the jquery oembed plugin, but the onError option is always thrown, also if the request was successful.
I'm really looking forward for some ideas...
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
实际上,问题是您使用跨域 ajax 请求违反了浏览器同源策略。有一些潜在的解决方法 - 不幸的是,最好的 JSONP 尚未实现由 YouTube 提供。次佳方案是使用 Flash 进行传输。这是由YUI-IO 实用程序使用的。您还可以在此处查看 Jquery 建议。
Actually the problem is you're violating the browser same origin policy with a cross domain ajax request. There a few work potential work arounds -- unfortunately the best JSONP, isn't implemented by YouTube. The next best is using Flash for transport. This is used by YUI-IO utility. Also you can see Jquery suggestions here.
如果我将原始 trololo url 嵌入到 oembed url 中,我就能很好地获取 json 数据。我猜测通过在地址栏中输入编码版本无论如何都会进行一层解码,所以尝试只发送原始版本:
I get the json data just fine if I embed the raw trololo url in the oembed url. I'm guessing that by typing in the encoded version into the address bar does a layer of decoding anyways, so try just sending the raw one:
我遇到了类似的问题,结果是
url
查询字符串参数使用www.youtube.com
域,而我对 oembed 端点的调用使用youtube.com/oembed
。使用www.youtube.com/oembed
解决了该问题。I had a similar problem, turns out that the
url
query string parameter was using thewww.youtube.com
domain, whereas my call to the oembed endpoint was usingyoutube.com/oembed
. Usingwww.youtube.com/oembed
fixed the problem.遇到同样的问题。我通过在服务器中使用 URL 下载 JSON 然后将其发送给客户端来“解决”了这个问题。
Got the same problem. I have "solved" this by having a url in my server download the JSON and then send it the client.
使用 json-c 版本:https://developers.google.com/youtube/2.0/developers_guide_jsonc< /a>
Use the json-c version: https://developers.google.com/youtube/2.0/developers_guide_jsonc