在网站上嵌入最新的 YouTube 视频? [英] Embed most recent YouTube videos on website?
问题描述
我目前正在学习网络开发，而且我和 YouTube 上相当大的人是朋友，所以我提出免费为他创建一个网站，以便在我学习的同时建立我的投资组合.我希望能够嵌入他最近的 8 个视频，但不知道该怎么做.
I am currently learning web development and I am friends with someone that is fairly large on YouTube, so I offered to create him a website for free in order to build my portfolio while I learn. I am looking to be able to embed his 8 most recent videos and am not sure how to do it.
我在 SO 上找到了以下代码，但它适用于 YouTube Data API V2，因此不再有效.我似乎找不到类似的方法来使用 API v3.干杯，
I found the code below on SO but it is for YouTube Data API V2 so no longer works. I can't seem to find a similar way to do it with API v3. Cheers,
奥利
<!DOCTYPE html>
<html>
<head>
<title>YouTube Recent Upload Thing</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
</head>
<body>
<div id="static_video"></div>
<script type="text/javascript">
function showVideo(response) {
if(response.data && response.data.items) {
var items = response.data.items;
if(items.length>0) {
var item = items[0];
var videoid = "http://www.youtube.com/embed/"+item.id;
console.log("Latest ID: '"+videoid+"'");
var video = "<iframe width='420' height='315' src='"+videoid+"' frameborder='0' allowfullscreen></iframe>";
$('#static_video').html(video);
}
}
}
</script>
<script type="text/javascript" src="https://gdata.youtube.com/feeds/api/users/urusernamehere/uploads?max-results=1&orderby=published&v=2&alt=jsonc&callback=showVideo"></script>
</body>
</html>
推荐答案
如果您进行一些调整，您的代码可以正常工作.
Your code works fine if you make some adjustments.
首先，要获取最后 8 个视频，您需要将该数字作为 max-results 包含在查询网址"中:
First, to get the last 8 videos, you need to include that number in your 'query url' as max-results:
here
▼
https://gdata.youtube.com/feeds/api/users/VEVO/uploads?max-results=8&orderby=published&v=2&alt=jsonc&callback=showVideo
然后，要显示每个视频，而不是 if 语句，您需要有一个循环(这里是 for 循环)，并且 .append() 每个视频，而不是每次都用 .html() 替换整个内容:
Then, to show every video, instead of an if statement, you need to have a loop (for loop here), and to .append() each video instead of replacing the entire content each time with .html():
function showVideo(response) {
if(response.data && response.data.items) {
var items = response.data.items;
// the loop i'm talking about
for(var i=0, l=items.length; i<l; i++){
var item = items[i];
var videoid = "http://www.youtube.com/embed/"+item.id;
console.log("Latest ID: '"+videoid+"'");
var video = "<iframe width='420' height='315' src='"+videoid+"' frameborder='0' allowfullscreen></iframe>";
// here, add the video to the container
$('#static_video').append(video);
}
}
}
这篇关于在网站上嵌入最新的 YouTube 视频?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
