在单个页面上嵌入多个YouTube播放列表供稿? JQuery/YouTube API v3 [英] Embedding Multiple YouTube Playlist Feeds on a Single Page? JQuery/YouTube API v3
本文介绍了在单个页面上嵌入多个YouTube播放列表供稿? JQuery/YouTube API v3的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何在单个页面上实现多个YouTube视频播放列表供稿?到目前为止，我已经开发了一种功能，可以从单个播放列表提供最近上传的内容，但是我不确定如何将其应用于多个播放列表.
How can multiple YouTube video playlist feeds be implemented on a single page? So far I have developed a function to deliver recent uploads from a single playlist, but I am not sure how to apply this to multiple playlists.
在提供的代码段中，我只有一个播放列表，该列表返回视频列表数据.用于嵌入播放列表的HTML字符串为#youtube-playlist-feed_1，但理想情况下，我希望能够实现多个提要，例如:#youtube-playlist-feed_2，#youtube-playlist-feed_3等...有任何输入吗?
In the snippet provided, I only have a single playlist returning video list data. The HTML string for embedding the playlist is #youtube-playlist-feed_1, but ideally I would like the capability to implement more than one feed, for example: #youtube-playlist-feed_2, #youtube-playlist-feed_3, etc... Any input?
var htmlString = "";
var apiKey = 'AIzaSyDI4rWo_wVAxRZEIgF6_8sRZDj8OCOZZ38';
var playlistID = 'PLBhKKjnUR0XBVrHvtDOylN5XREHh9X1nt';
var maxResults = 7;
$.getJSON('https://www.googleapis.com/youtube/v3/playlistItems?key=' + apiKey + '&playlistId=' + playlistID + '&part=snippet&maxResults=' + (maxResults > 50 ? 50 : maxResults), function(data) {
$.each(data.items, function(i, item) {
var videoID = item['snippet']['resourceId']['videoId'];
var title = item['snippet']['title'];
var videoURL = 'https://www.youtube.com/watch?v=' + videoID + '&list=' + playlistID + '&index=1';
htmlString += '<div class="video-wrap"><div class="video"><a target="_blank" href="' + videoURL + '"><img src="https://i.ytimg.com/vi/' + videoID + '/mqdefault.jpg"></a></div>' + '<div class="title"><a target="_blank" href="' + videoURL + '">' + title + '</a></div></div>';
});
$('#youtube-playlist-feed_1').html(htmlString);
});
body {
margin: 0;
padding: 0;
font-family: arial;
font-size: 16px;
}
hr {
border-bottom: 1px solid grey;
margin: 20px 0;
display: block;
width: 100%;
float: left;
border-top: 0;
border-left: 0;
border-right: 0;
}
h1 {
font-weight: bold;
font-size: 18px;
display: block;
width: 100%;
line-height: normal;
}
.video-wrap:first-of-type {
width: 100%;
max-width: 100%;
display: block;
}
.video-wrap {
max-width: 33.333333%;
padding: 0;
border: 0;
box-sizing: border-box;
float: left;
}
.video {
width: 100%;
margin: 0;
line-height: 0;
}
.video a {
display: block;
}
.title {
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
line-height: normal;
padding: 5px;
}
.title a {
text-decoration: none;
color: #000000;
}
.video img {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>YouTube Playlist Feed #1:</h1>
<div id="youtube-playlist-feed_1"></div>
<hr>
<h1>YouTube Playlist Feed #2:</h1>
<!-- INSERT 2ND YOUTUBE PLAYLIST FEED -->
<div id="youtube-playlist-feed_2">
Playlist #2 ID: PLBhKKjnUR0XB8DwQwXqBsChb48E8jzfr-
</div>
<hr>
<h1>YouTube Playlist Feed #3:</h1>
<!-- INSERT 3RD YOUTUBE PLAYLIST FEED -->
<div id="youtube-playlist-feed_3">
Playlist #3 ID: PLBhKKjnUR0XAM2Wvi7JY5gLRpFLzIE-An
</div>
更新/解决方案:
哇，非常感谢 Dennis Rongo 帮助实现了
Wow, big thanks to Dennis Rongo for helping achieve this excellent solution!
现在可以在单个页面上嵌入多个播放列表供稿，如以下代码段所示:
Now multiple playlist feeds can be embedded on a single page, demonstrated in the following snippet:
var htmlString = "";
var apiKey = 'AIzaSyDI4rWo_wVAxRZEIgF6_8sRZDj8OCOZZ38';
var playlistID = 'PLBhKKjnUR0XBVrHvtDOylN5XREHh9X1nt';
var maxResults = 7;
var playlists = [{
playlistId: 'PLBhKKjnUR0XBVrHvtDOylN5XREHh9X1nt',
el: '#youtube-playlist-feed_1'
},
{
playlistId: 'PLBhKKjnUR0XB8DwQwXqBsChb48E8jzfr-',
el: '#youtube-playlist-feed_2'
},
{
playlistId: 'PLBhKKjnUR0XAM2Wvi7JY5gLRpFLzIE-An',
el: '#youtube-playlist-feed_3'
}
];
playlists.forEach(function(playlist) {
getVideoFeedByPlaylistId(playlist.playlistId, playlist.el);
})
function getVideoFeedByPlaylistId(playlistId, el) {
$.getJSON('https://www.googleapis.com/youtube/v3/playlistItems?key=' + apiKey + '&playlistId=' + playlistId + '&part=snippet&maxResults=' + (maxResults > 50 ? 50 : maxResults), function(data) {
$.each(data.items, function(i, item) {
var videoID = item['snippet']['resourceId']['videoId'];
var title = item['snippet']['title'];
var videoURL = 'https://www.youtube.com/watch?v=' + videoID + '&list=' + playlistID + '&index=1';
htmlString += '<div class="video-wrap"><div class="video"><a target="_blank" href="' + videoURL + '"><img src="https://i.ytimg.com/vi/' + videoID + '/mqdefault.jpg"></a></div>' + '<div class="title"><a target="_blank" href="' + videoURL + '">' + title + '</a></div></div>';
});
$(el).html(htmlString);
htmlString = '';
});
}
body {
margin: 0;
padding: 0;
font-family: arial;
}
hr {
border-bottom: 1px solid grey;
margin: 20px 0;
display: block;
width: 100%;
float: left;
border-top: 0;
border-left: 0;
border-right: 0;
}
h1 {
font-weight: bold;
font-size: 18px;
display: block;
width: 100%;
line-height: normal;
}
.video-wrap:first-of-type {
width: 100%;
max-width: 100%;
display: block;
}
.video-wrap {
max-width: 33.333333%;
padding: 0;
border: 0;
box-sizing: border-box;
float: left;
}
.video {
width: 100%;
margin: 0;
line-height: 0;
}
.video a {
display: block;
}
.title {
text-align: center;
font-size: 16px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
line-height: normal;
padding: 5px;
}
.title a {
text-decoration: none;
color: #000000;
}
.video img {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>YouTube Playlist Feed #1:</h1>
<div id="youtube-playlist-feed_1"></div>
<hr>
<h1>YouTube Playlist Feed #2:</h1>
<div id="youtube-playlist-feed_2"></div>
<hr>
<h1>YouTube Playlist Feed #3:</h1>
<div id="youtube-playlist-feed_3"></div>
推荐答案
类似的方法将起作用. Plunkr
Something like this would work. Plunkr
var htmlString = "";
var apiKey = 'AIzaSyDI4rWo_wVAxRZEIgF6_8sRZDj8OCOZZ38';
var playlistID = 'PLBhKKjnUR0XBVrHvtDOylN5XREHh9X1nt';
var maxResults = 7;
var playlists = [
{ playlistId: 'PLBhKKjnUR0XBVrHvtDOylN5XREHh9X1nt', el: '#youtube-playlist-feed_1' },
{ playlistId: 'PLBhKKjnUR0XB8DwQwXqBsChb48E8jzfr-', el: '#youtube-playlist-feed_2' },
{ playlistId: 'PLBhKKjnUR0XAM2Wvi7JY5gLRpFLzIE-An', el: '#youtube-playlist-feed_3' }
];
playlists.forEach(function(playlist){
getVideoFeedByPlaylistId(playlist.playlistId, playlist.el);
})
function getVideoFeedByPlaylistId(playlistId, el){
$.getJSON('https://www.googleapis.com/youtube/v3/playlistItems?key=' + apiKey + '&playlistId=' + playlistId + '&part=snippet&maxResults=' + (maxResults > 50 ? 50 : maxResults), function(data) {
$.each(data.items, function(i, item) {
var videoID = item['snippet']['resourceId']['videoId'];
var title = item['snippet']['title'];
var videoURL = 'https://www.youtube.com/watch?v=' + videoID + '&list=' + playlistID + '&index=1';
htmlString += '<div class="video-wrap"><div class="video"><a target="_blank" href="' + videoURL + '"><img src="https://i.ytimg.com/vi/' + videoID + '/mqdefault.jpg"></a></div>' + '<div class="title"><a target="_blank" href="' + videoURL + '">' + title + '</a></div></div>';
});
$(el).html(htmlString);
htmlString = '';
});
}
这篇关于在单个页面上嵌入多个YouTube播放列表供稿? JQuery/YouTube API v3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
