自动以html显示youtube的最新5个视频

时间:2019-03-28 00:25:05

标签: html json youtube youtube-api youtube-data-api

1我正在尝试在一个HTML页面上显示来自YouTube频道的最新五个视频。我已成功使用此代码成功嵌入了一个youtube视频,但无法上传其他任何一个。我也尝试嵌入第二个最新视频,但是无论如何尝试,我都会收到无效ID的播放错误,如上所示。有谁知道如何将YouTube香奈儿的最新5部视频嵌入JSON / JavaScript中?

下面是我的代码

    var channelID = "MY-ID";
    var reqURL = "https://www.youtube.com/feeds/videos.xml?channel_id=";
    $.getJSON("https://api.rss2json.com/v1/api.json?rss_url=" + encodeURIComponent(reqURL)+channelID, function(data) {
       var link = data.items[0].link;
       var id = link.substr(link.indexOf("=")+1);
    $("#youtube_video").attr("src","https://youtube.com/embed/"+ id + "?controls=0&showinfo=0&rel=0");
    });
<iframe id="youtube_video" width="600" height="340" frameborder="0" allowfullscreen></iframe> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

1 个答案:

答案 0 :(得分:0)

我发现必须更改[]中的数字。

	  var channelID = "MY-ID";
    var reqURL = "https://www.youtube.com/feeds/videos.xml?channel_id=";
    $.getJSON("https://api.rss2json.com/v1/api.json?rss_url=" + encodeURIComponent(reqURL)+channelID, function(data) {
       var link = data.items[0].link;
       var id = link.substr(link.indexOf("=")+1);
    $("#youtube_video").attr("src","https://youtube.com/embed/"+ id + "?controls=0&showinfo=0&rel=0");
		var link = data.items[1].link;
       	var id = link.substr(link.indexOf("=")+1);
    $("#youtube_video2").attr("src","https://youtube.com/embed/"+ id + "?controls=0&showinfo=0&rel=0");
		var link = data.items[2].link;
     	var id = link.substr(link.indexOf("=")+1);
    $("#youtube_video3").attr("src","https://youtube.com/embed/"+ id + "?controls=0&showinfo=0&rel=0");
	
    });
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<iframe id="youtube_video" width="600" height="340" frameborder="0" allowfullscreen></iframe>
<iframe id="youtube_video2" width="600" height="340" frameborder="0" allowfullscreen></iframe>
<iframe id="youtube_video3" width="600" height="340" frameborder="0" allowfullscreen></iframe>