先是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
当然,最简单非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" ο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/