Jntz
2/3/2013 - 10:56 PM

Simple youtube playlist-player. Only need to know youtube playlist url and insert to get-parameter 'url'. I found basic logic to find videos

Simple youtube playlist-player. Only need to know youtube playlist url and insert to get-parameter 'url'. I found basic logic to find videos (if I remimber right) in this script snip: https://gist.github.com/906313

youtubeplaylist.html
content_copyfile_download
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">

<!-- Made by: Joni Ahola, 2012 -->
<!-- Easily embed youtube playlist: just add GET-parameter 'url' and youtube-playlist url -->
<!-- Example: filename.html?url=http://www.youtube.com/playlist?list=PLE5C2870574BF4B06 -->
<head profile="http://gmpg.org/xfn/11">

  <style type="text/css">
	/* placeholder inline styles */
	body { font-family: arial, verdana; margin: 0; padding: 0; }
	
	a,
	a img { text-decoration: none; }
	div #youtubeVideo
	{
		display: block;
		float: left;
		display: block;
		margin: 0;
		padding: 0;
		margin-right: 1px;
	}
	div.slider 
	{
		display: block;
		width: 300px;
		height: 220px;
		overflow:auto;
	}
	ul.youtubeFeed {
		margin: 0;
		padding: 0;
	}

	ul.youtubeFeed li {
		list-style-type: none;
		font-size: 11px;
		line-height:120%;
		padding-top: 4px;
		padding-bottom: 4px;
		padding-left: 2px;
		padding-right: 2px;
		background: #AAA;
		margin: 1px;
	}
	ul.youtubeFeed li:hover {
		background: #CCC;
	}
	ul.youtubeFeed li b {
		font-size: 11px;
		float: left;
		display: block;
	}
	ul.youtubeFeed li a {
		padding-left: 1px;
		color: black;
		display: block;
		white-space: normal;
		text-decoration: none;
	}
	#red {
		background: red;
	}
	ul.youtubeFeed li div {  }
	</style>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script src="http://www.google.com/jsapi" type="text/javascript"></script>

	<script type="text/javascript">
		google.setOnLoadCallback(function () {

			// setup the click handler
			function loadVideo(video) {

				$('#youtubeVideo').html([
					'<iframe title="', video.title, '" width="392" height="220" src="', video.href, '" frameborder="0" allowfullscreen></iframe>'
				].join(""));				

				return false;
			}
			function loadFeed(host_feedUrl, index, showing_index) 
			{
				var feedUrl = host_feedUrl+index;
				var feed = new google.feeds.Feed(feedUrl);
				feed.setNumEntries(25);
				
				feed.load(function (result) {
					if(result.feed.entries.length > 0)
					{
						if(!result.error)
						{
							// write out the feed data			
							var container = $(".youtubeFeed");
							
							for (var i = 0; i < result.feed.entries.length; i++) {
								
								var entry = result.feed.entries[i];
								var vidhash = /=(.*)&(.*)$/.exec (entry.link)[1];
								// uncomment this and comment out the item below if you find rendering of the player a bit slow
								// container.append('<li><div><a href="http://www.youtube.com/v/'+vidhash+'&feature=youtube_gdata&rel=1" class="yt-vid-link" title="'+entry.title+'"><img src="http://img.youtube.com/vi/'+vidhash+'/2.jpg" /><br />'+entry.title+'</a></div></li>\n');

								// comment the item below and uncomment the item above if you find the player swap too slow
								//container.append('<li><b>'+(showing_index++)+'. &nbsp;</b> <a href="http://www.youtube.com/embed/'+vidhash+'" class="yt-vid-link" title="'+entry.title+'">'+entry.title+'</a></li>\n');
								container.append('<li><a href="http://www.youtube.com/embed/'+vidhash+'" class="yt-vid-link" title="'+entry.title+'">'+'<b>'+(showing_index++)+'. &nbsp;</b>'+entry.title+'</a></li>\n');
							}
						}
						if(first)
						{
							first = false;
							// load the first video
							$(".yt-vid-link:first").each(function () {
								//$(this).parent().css("background", "red");
								$("#red").each(function() { $(this).removeAttr('id'); });
								$(this).parent().attr('id', 'red');
								loadVideo(this);
								return false;
							});
							$("h3").each(function() {
								$(this).remove();
							});
						}
						index += 25;
						loadFeed(host_feedUrl, index, showing_index);
					}
					else
					{
						// setup the click handler for all the videos
						$(".yt-vid-link").click(function () {
							//$(this).parent().css("background", "red");
							$("#red").each(function() { $(this).removeAttr('id'); });
							$(this).parent().attr('id', 'red');
							loadVideo(this);
							return false;
						});
						
					}
				});
			}
			var first = true;
			var str = window.location.search;
			str = str.replace("?url=", "");
			str = str.substr(str.indexOf("?list=")+6);
			
			//alert(str);
			//http://www.youtube.com/playlist?list=PLE5C2870574BF4B06
			var host_feedUrl = "https://gdata.youtube.com/feeds/api/playlists/" + str + "?start-index=";
			loadFeed(host_feedUrl, 1, 1);
		});

		google.load("feeds", "1");
	</script>

</head>

<body>

	<div class="videos">
		<h3>Please Wait....</h3>
		<div id="youtubeVideo">
			Insert video here
		</div>

		<div class="slider">
			<ul class="youtubeFeed">
			</ul>
		</div>
	</div>

</body>
</html>