youtube 播放列表

先是css

<style type="text/css">
/* 缩略图 css */
#thumb{float:right;margin-right:24px;
}.stepcarousel {position: relative;overflow: scroll;width: 550px;height: 130px;background:#f1f1f1;
}.stepcarousel .belt {position: absolute;left: 0;top: 0;
}.stepcarousel .panel {float: left;overflow: hidden;margin:10px 5px;width: 120px;
}
.panel img{max-widht:120px;max-height:120px;margin:3px;cursor:pointer;
}
#thumb img{cursor:pointer;}
</style>

后是显示第一个

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/OKhzeiZ4WMc&hl=en_US&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/OKhzeiZ4WMc&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

最后视频list

<!-- Description Start -->
<div id="summary"><?php print $youtube['description'];?></div>
<!-- Description End --><!-- Thumbnail Navigation Start --><script type="text/javascript" src="script/jquery.js"></script><script type="text/javascript" src="script/slide.js"></script><script type="text/javascript">stepcarousel.setup({galleryid: 'thumb',beltclass: 'belt',panelclass: 'panel',autostep: {enable:false, moveby:3, pause:4000},panelbehavior: {speed:500, wraparound:false, persist:true},defaultbuttons: {enable: true, moveby: 4, leftnav: ['video/images/ic_next.gif', 470, 110], rightnav: ['video/images/ic_prev.gif', -60, 110]},statusvars: ['statusA', 'statusB', 'statusC'],contenttype: ['inline']})</script><div id="thumb" class="stepcarousel"><script type="text/javascript">/* 得到YouTube 视频列表缩略图大小控制 120*120 */function DrawImage(ImgD,FitWidth,FitHeight){var image=new Image();image.src=ImgD.src;if(image.width>0 && image.height>0){if(image.width/image.height>= FitWidth/FitHeight){if(image.width>FitWidth){ImgD.width=FitWidth;ImgD.height=(image.height*FitWidth)/image.width;}else{ImgD.width=image.width;ImgD.height=image.height;}} else{if(image.height>FitHeight){ImgD.height=FitHeight;ImgD.width=(image.width*FitHeight)/image.height;}else{ImgD.width=image.width;ImgD.height=image.height;}}}}/* 得到YouTube 视频列表缩略图 */function getScreen( url, size )    {if(url === null){ return ""; }size = (size === null) ? "big" : size;var vid;var results;results = url.match("[\\?&]v=([^&#]*)");vid = ( results === null ) ? url : results[1];if(size == "small"){return "http://img.youtube.com/vi/"+vid+"/2.jpg";}else {return "http://img.youtube.com/vi/"+vid+"/0.jpg";}}/* 得到YouTube代码 */function get_youtube(url,des){var output  = '<object width="502" height="320">';output += '<param name="movie" value="' + url + '&hl=en_US&fs=1&"></param>';output += '<param name="allowFullScreen" value="true"></param>';output += '<param name="allowscriptaccess" value="always"></param>';output += '<embed src="' + url + '&hl=en_US&fs=1&autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="502" height="320"></embed>';output += '</object>';document.getElementById("summary").innerHTML = des;document.getElementById("player").innerHTML = output;}document.write('<div class="belt">');<?php for($i=0;$i<$cntTube;$i++){ $video_url = str_replace('watch?v=','v/',$youtube[$i]['uturl']); ?>imgUrlsmall = getScreen("<?=$youtube[$i]['uturl']?>", 'small');document.write('<div class="panel"><img src="' + imgUrlsmall + '" οnlοad="DrawImage(this,120,120);" οnclick="get_youtube(\'<?=$video_url?>\' ,\'<?=$youtube[$i]["description"]?>\')" /></div>');<?php } ?>document.write('</div>');</script></div>
<!-- Thumbnail Navigation End -->

上面是我自己做的，当然还有一个更加简单的，是我后来发现的，就是jquery的YouTube插件。

For a recent client project, we wanted to be able to turn a list of YouTube links into a playlist. This would allow the client to manage their videos on YouTube and simply insert links to the videos on their site. With javascript enabled a nice playlist is created, whilst without javasript the user gets a regular list of links to youtube pages.

Demo showing the plugin with default options .

Demo showing the plugin set up to act like a gallery of YouTube videos .

Using the plugin

The plugin acts on a simple unordered list containing links to YouTube videos, e.g.

<div class="yt_holder">
<div id="ytvideo"></div>
<ul class="demo1"><li><a href="http://www.youtube.com/watch?v=QBBWKvY-VDc">Video 1</a></li><li><a href="http://www.youtube.com/watch?v=ZXMQqLnRhRI">Video 2</a></li><li><a href="http://www.youtube.com/watch?v=Wvo-g_JvURI">Video 3</a></li>
</ul>
</div>

$(function() {$("ul.demo1").ytplaylist();
});

Plugin options

Option - (default)

holderId - (ytvideo)
The ID of the element (usually a div) into which the YouTube video will be inserted

playerHeight - (300)
The height of the embdedded youtube video

playerWidth - (450)
The width of the embdedded youtube video

addThumbs - (false)
Use true to add video thumbnails to each list item

thumbSize - (small)
Size of added thumbnails. Default is small, use large for larger thumbnails

showInline - (false)
If this option is true, the list item containing the link will be replaced with the YouTube video. See the gallery demo for an example of this.

autoPlay - (false)
true or false, whether or not to autoplay videos

showRelated - (true)
Set to false to stop related videos being shown at the end of the embedded video

Download

Download the source and demos

当然，最简单非Google Youtube API了，

<!--copyright (c) 2009 google inc.You are free to copy and use this sample.License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license
--><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8"/><title>YouTube Player API Sample</title><style type="text/css">#videoDiv {margin-right: 3px;}#videoInfo {margin-left: 3px;}</style><script src="http://www.google.com/jsapi" type="text/javascript"></script><script type="text/javascript">google.load("swfobject", "2.1");</script>    <script type="text/javascript">/** Change out the video that is playing*/// Update a particular HTML element with a new valuefunction updateHTML(elmId, value) {document.getElementById(elmId).innerHTML = value;}// Loads the selected video into the player.function loadVideo() {var selectBox = document.getElementById("videoSelection");var videoID = selectBox.options[selectBox.selectedIndex].valueif(ytplayer) {ytplayer.loadVideoById(videoID);}}// This function is called when an error is thrown by the playerfunction onPlayerError(errorCode) {alert("An error occured of type:" + errorCode);}// This function is automatically called by the player once it loadsfunction onYouTubePlayerReady(playerId) {ytplayer = document.getElementById("ytPlayer");ytplayer.addEventListener("onError", "onPlayerError");}// The "main method" of this sample. Called when someone clicks "Run".function loadPlayer() {// The video to loadvar videoID = "ylLzyHk54Z0"// Lets Flash from another domain call JavaScriptvar params = { allowScriptAccess: "always" };// The element id of the Flash embedvar atts = { id: "ytPlayer" };// All of the magic handled by SWFObject (http://code.google.com/p/swfobject/)swfobject.embedSWF("http://www.youtube.com/v/" + videoID +"&enablejsapi=1&playerapiid=player1","videoDiv", "480", "295", "8", null, null, params, atts);}function _run() {loadPlayer();}google.setOnLoadCallback(_run);</script></head><body style="font-family: Arial;border: 0 none;"><table><tr><td><div id="videoDiv">Loading...</div></td><td valign="top"><div id="videoControls"><p>Select a video to load:</p><select id="videoSelection" οnchange="loadVideo();"><option value="ylLzyHk54Z0" selected>YouTube API Overview</option><option value="muLIPWjks_M">Ninja Cat</option><option value="GMUlhuTkM3w">Beatboxing Flute</option></select></div></td></tr></table></body>
</html>

http://code.google.com/apis/ajax/playground/

另外亦可参看

<script type="text/javascript" src="http://www.youtubereloaded.com/embed/swfobject.js"></script>
<div id="YouTubeReloadedPlayer">This div will be replaced</div><script type="text/javascript">
var s1 = new SWFObject('http://www.youtubereloaded.com/embed/player.swf','ply','470','470','9','#');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addParam('wmode','opaque');
s1.addParam('flashvars','file=http%3A%2F%2Fgdata.youtube.com%2Ffeeds%2Fapi%2Fvideos%3Fvq%3Dmicheal+jackson%26max-results%3D20&playlist=bottom&frontcolor=cccccc&lightcolor=66cc00&skin=http://www.youtubereloaded.com/embed/skin1.swf&backcolor=111111&playlistsize=200&autostart=true');
s1.write('YouTubeReloadedPlayer');
</script>

http://www.youtubereloaded.com/