在网站上嵌入最新的YouTube视频？

我目前正在学习网络开发，并且我是YouTube上相当大的人的朋友，所以我提出为他创建一个免费的网站，以便在我学习时构建我的投资组合。我期待能够嵌入他最近的8个视频，但不知道如何去做。在网站上嵌入最新的YouTube视频？

我在SO上发现了下面的代码，但它适用于YouTube Data API V2，因此不再有效。我似乎无法找到与API v3类似的方式。欢呼声，

奥利。

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

来源

2015-03-08 Perceptic

如果您进行一些调整，则您的代码正常工作。

第一，得到最后的8个视频，你需要包括这个数字在你的“查询网址”为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()替换整个内容：

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); 
     } 
    } 
}

来源

2015-03-08 20:10:11 blex

谢谢。我试图将每个视频添加到ID为'＃static_video_0'，'＃static_video_1'等的单独的div中。我添加了'var divid ='#static_video_'+ item;'并将ID更改为'$（divid ）'。这是我能想到做到这一点的唯一方式，但它不起作用。有另一种方法吗？ – Perceptic 2015-03-08 20:28:15

对不起，我当时很蠢。应该是''#static_video_'+ i;'。 – Perceptic 2015-03-08 20:31:32

@Perceptic你得到它:) **编辑**：如果你有独立的容器，你可以坚持'.html（）'，因为你不会覆盖任何现有的iframe。但'.append（）'也可以正常工作。 – blex 2015-03-08 20:32:45

这将嵌入您的“上传”播放列表。如果您想要播放最新的视频，只需转到您的频道，然后按最近的时间对您的上传进行排序。下面的代码：

<iframe src="https://www.youtube.com/embed/videoseries?list=UUB8OUG89o0QWqmJ2lfzdyIg" seamless allowfullscreen></iframe>

UUB8OUG89o0QWqmJ2lfzdyIg是我个人的上传播放列表的唯一ID。要获取播放列表的唯一ID，请携带唯一的频道ID，然后将C更改为U。

UCB8OUG89o0QWqmJ2lfzdyIg // channel id 
UUB8OUG89o0QWqmJ2lfzdyIg // uploads playlist id

所有的Youtube播放列表都有ID，你只需要找到它们。您也可以通过使用“全部播放”按钮播放完整播放列表来查找播放列表ID。这将播放Youtube上的整个播放列表，并且您可以将该ID从网页网址中复制出来。

来源

2017-05-09 14:51:39 Frank

在网站上嵌入最新的YouTube视频？

回答

相关问题