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 + '" onload="DrawImage(this,120,120);" onclick="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 value
      function 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].value
        
        if(ytplayer) {
          ytplayer.loadVideoById(videoID);
        }
      }
      
      // This function is called when an error is thrown by the player
      function onPlayerError(errorCode) {
        alert("An error occured of type:" + errorCode);
      }
      
      // This function is automatically called by the player once it loads
      function 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 load
        var videoID = "ylLzyHk54Z0"
        // Lets Flash from another domain call JavaScript
        var params = { allowScriptAccess: "always" };
        // The element id of the Flash embed
        var 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" onchange="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/