YouTube 播放列表在单个页面上嵌入多个播放列表的脚本 (jQuery/CSS/HTML + CodePen)
Posted
技术标签:
【中文标题】YouTube 播放列表在单个页面上嵌入多个播放列表的脚本 (jQuery/CSS/HTML + CodePen)【英文标题】：YouTube Playlist Embed Script for Multiple Playlists on a Single Page (jQuery/CSS/HTML + CodePen) 【发布时间】：2018-03-18 15:14:32 【问题描述】：我已经完成了一半。我正在使用一个脚本，它允许您使用 JQuery、CSS 和 html 将 YouTube 播放列表嵌入到任何网页。
代码运行良好，但唯一的问题是我不确定如何一次在一个网页上实现多个播放列表。
我开发了一个代码笔（如下），它提出了手头的主要问题。
目前有三个播放列表，但只显示第一个，而其他两个根本不显示。不确定这是否与 YouTube 的 API、脚本配置或其他有关。
谁能帮帮我？
参考：https://codepen.io/anon/pen/NaygEm
(function()
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0]; //Find the first script tag in the html
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); //Put this script tag before the first one
var player; //The Youtube API player
var playlistID = $('#ytpl-player').data('pl');
var $ul = $('#ytpl-thumbs');
var nowPlaying = "ytpl-playing";
var nowPlayingClass = "." + nowPlaying;
function getPlaylistData()
var apiKey = 'AIzaSyDI4rWo_wVAxRZEIgF6_8sRZDj8OCOZZ38';
var url = 'https://www.googleapis.com/youtube/v3/playlistItems?part=snippet';
var data =
'playlistId': playlistID,
'key': apiKey,
'maxResults': 4
$.get(url, data, function(e)
buildHTML(e.items)
)
function buildHTML(data)
var list_data = '';
data.forEach(function(e, i)
var item = e.snippet;
if (item.thumbnails)
list_data += '<li><button data-ytpl-index="'+ i +'" data-ytpl-title="' + item.title + '" data-ytpl-desc="' + item.description + '"><p>' + item.title + '</p><img src="'+ item.thumbnails.medium.url +'"/></button></li>';
)
$ul.html(list_data);
//
// $('.ytpl-flexslider').flexslider(
// animation: "slide",
// startAt: 0,
// slideshow: false,
// touch: true,
// prevText: "",
// itemWidth: "25%",
// nextText: "",
// pausePlay: !0,
// pauseText: "Pause",
// playText: "Play",
// pauseOnHover: !0,
// useCSS: true
// )
// generate playlist items once main player has loaded
function onPlayerReady(event)
getPlaylistData();
window.onYouTubeIframeAPIReady = function()
var player = new YT.Player('ytpl-player',
height: '360',
width: '640',
playerVars:
listType:'playlist',
list: playlistID
,
events:
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
);
function updateTitles($this)
$('#ytpl-title').text( $this.data('ytpl-title') )
$('#ytpl-desc').text( $this.data('ytpl-desc') )
function onPlayerStateChange(e)
var $buttons = $ul.find('button');
var currentIndex = player.getPlaylistIndex();
// remove existing active class, add to currently playing
if (e.data === YT.PlayerState.PLAYING)
$buttons.removeClass(nowPlaying);
$buttons.eq(currentIndex).addClass(nowPlaying);
// if last video has finished playing
if (e.data === YT.PlayerState.ENDED && currentIndex === $buttons.length - 1)
$buttons.removeClass(nowPlaying);
updateTitles($buttons.eq(currentIndex))
// handle playlist button click
$(document).on('click', '[data-ytpl-index]:not(".ytpl-playing")',function(e)
e.preventDefault();
var $this = $(this);
var index = $this.data('ytpl-index');
updateTitles($this);
if (navigator.userAgent.match(/(iPad|iPhone|iPod)/g))
player.cuePlaylist(
listType: 'playlist',
list: playlistID,
index: index,
suggestedQuality: 'hd720' //quality is required for cue to work, for now. https://code.google.com/p/gdata-issues/issues/detail?id=5411
);
else
player.playVideoAt(index); //Play the new video, does not work for ios 7
);
;
)();
【问题讨论】：
【参考方案1】：您对多个div 使用相同的id。您只能指定唯一的id。您可以使用class 而不是id 来代替ytpl-thumbs，并为每个玩家使用独特的id：
查看this fiddle
HTML
<div class="sidebar">
<h1>Playlist (1): Birds</h1>
<div class="container">
<div class="ypt_wrapper">
<div class="video embed-container">
<div id="ytpl-player1" data-pl="PLBhKKjnUR0XB8DwQwXqBsChb48E8jzfr-">
</div>
</div>
<div>
<h2 class="ytpl-title"></h2>
<div class="ytpl-desc"></div>
</div>
<div class="ytpl-flexslider">
<ul class="ytpl--thumbs slides"></ul>
</div>
</div>
</div>
</div>
<div class="sidebar">
<h1>Playlist (2): Owls</h1>
<div class="container">
<div class="ypt_wrapper">
<div class="video embed-container">
<div id="ytpl-player2" data-pl="PLBhKKjnUR0XAM2Wvi7JY5gLRpFLzIE-An">
</div>
</div>
<div>
<h2 class="ytpl-title"></h2>
<div class="ytpl-desc"></div>
</div>
<div class="ytpl-flexslider">
<ul class="ytpl--thumbs slides"></ul>
</div>
</div>
</div>
</div>
<div class="sidebar">
<h1>Playlist (3): Misc. Animals</h1>
<div class="container">
<div class="ypt_wrapper">
<div class="video embed-container">
<div id="ytpl-player3" data-pl="PLBhKKjnUR0XCGuLxsESq7WMlIwZIH9tIi">
</div>
</div>
<div>
<h2 class="ytpl-title"></h2>
<div class="ytpl-desc"></div>
</div>
<div class="ytpl-flexslider">
<ul class="ytpl--thumbs slides"></ul>
</div>
</div>
</div>
</div>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var players = new Array();
var players_list = ["ytpl-player1", "ytpl-player2", "ytpl-player3"];
var nowPlaying = "ytpl-playing";
var nowPlayingClass = "." + nowPlaying;
function getPlaylistData(playerName)
var apiKey = 'AIzaSyDI4rWo_wVAxRZEIgF6_8sRZDj8OCOZZ38';
var url = 'https://www.googleapis.com/youtube/v3/playlistItems?part=snippet';
var data =
'playlistId': $('#' + playerName).data('pl'),
'key': apiKey,
'maxResults': 4
;
$.get(url, data, function(e)
buildHTML(playerName, e.items)
)
function buildHTML(playerName, data)
var list_data = '';
data.forEach(function(e, i)
var item = e.snippet;
if (item.thumbnails)
list_data += '<li><button data-ytpl-index="' + i + '" data-ytpl-title="' + item.title + '" data-ytpl-desc="' + item.description + '"><p>' + item.title + '</p><img src="' + item.thumbnails.medium.url + '"/></button></li>';
);
$('#' + playerName).closest('.ypt_wrapper').find('.ytpl--thumbs').html(list_data);
// generate playlist items once main player has loaded
function onPlayerReady(event)
getPlaylistData(event.target.name);
function onYouTubeIframeAPIReady()
for (item in players_list)
players[players_list[item]] = new YT.Player(players_list[item],
height: '360',
width: '640',
playerVars:
listType: 'playlist',
list: $('#' + players_list[item]).data('pl')
,
events:
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
);
players[players_list[item]].name = players_list[item];
function updateTitles($this)
$('#ytpl-title').text($this.data('ytpl-title'))
$('#ytpl-desc').text($this.data('ytpl-desc'))
function onPlayerStateChange(event)
var $buttons = $('#' + event.target.name).closest('.ypt_wrapper').find('.ytpl--thumbs').find('button');
var currentIndex = event.target.getPlaylistIndex();
// remove existing active class, add to currently playing
if (event.data === YT.PlayerState.PLAYING)
$buttons.removeClass(nowPlaying);
$buttons.eq(currentIndex).addClass(nowPlaying);
// if last video has finished playing
if (event.data === YT.PlayerState.ENDED && currentIndex === $buttons.length - 1)
$buttons.removeClass(nowPlaying);
updateTitles($buttons.eq(currentIndex))
// handle playlist button click
$(document).on('click', '[data-ytpl-index]:not(".ytpl-playing")', function(e)
e.preventDefault();
var $this = $(this);
var index = $this.data('ytpl-index');
var playerName = $(this).closest('.ypt_wrapper').find('iframe').attr('id');
updateTitles($this);
if (navigator.userAgent.match(/(iPad|iPhone|iPod)/g))
players[playerName].cuePlaylist(
listType: 'playlist',
list: $('#' + players_list[playerName]).data('pl'),
index: index,
suggestedQuality: 'hd720'
);
else
players[playerName].playVideoAt(index); //Play the new video, does not work for IOS 7
);
【讨论】：
很好的解决方案！真的很感谢你的澄清，因为我已经坚持了很长一段时间......但是你的小提琴拯救了一天！ 我还想知道您是否可以看看我最近发布的另一个问题，该问题基于您在此处提供的解决方案？这是链接：***.com/q/46694093/4333321。谢谢，如果你能看看！以上是关于YouTube 播放列表在单个页面上嵌入多个播放列表的脚本 (jQuery/CSS/HTML + CodePen)的主要内容，如果未能解决你的问题，请参考以下文章