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

Question

我目前正在学习网络开发，我和一个在 YouTube 上相当大的人成为朋友，所以我提出免费为他创建一个网站，以便在我学习的同时建立我的作品集。我希望能够嵌入他的 8 个最新视频，但我不确定该怎么做。

我在 SO 上找到了下面的代码，但它适用于 YouTube 数据 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>

Answer 1

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

首先，要获取最后 8 个视频，您需要在 'query url' 中包含该数字，如 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);
        }
    }
}

Answer 2

这将嵌入您的 "uploads" 播放列表。如果您想要播放最近的视频，只需转到您的频道并按最近的顺序对上传的内容进行排序。这是代码：

<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，您只需要找到它们即可。您也可以通过使用 "Play All" 按钮播放完整的播放列表来查找播放列表 ID。这将播放 Youtube 上的整个播放列表，您可以将 id 复制到页面外 url。

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

Embed most recent YouTube videos on website?

html

javascript

youtube