男丁格爾's 脫殼玩

沒錯!只要 1,400 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

之前有介紹過一個用來取 YouTube 影片縮圖的 jQuery 外掛 - 「jYoutube 1.0」，就有網友問到是否能按下縮圖後就直接嵌入影片並播放呢？

既然我們已經取得到影片縮圖了，那麼要播放時只要利用 YouTube 提供的嵌入語法就能達到想要的效果囉！

在做出完整的播放清單之前，我們先來看較單純的例子：

檢視原始碼 HTML

<body>
	<ul class="playlist">
		<li><a href="http://www.youtube.com/watch?v=htCW5fcyLUU">暮光之城第三集 蝕預告片</a></li>
		<li><a href="http://www.youtube.com/watch?v=GeS0gAIg1Io">《暮光之城：新月》預告片</a></li>
		<li><a href="http://www.youtube.com/watch?v=wngwJ-GEJVg">【暮光之城】中文版預告片</a></li>
	</ul>
</body>

清單中只是放了 YouTube 影片網址及影片的名稱，接著再用 CSS 來修飾一下：

檢視原始碼 CSS

ul.playlist {
	margin: 0;
	padding: 0;
	list-style: none;
}
ul.playlist li {
	margin-bottom: 5px;
}
ul.playlist li a img {
	border: 0;
	vertical-align: middle;
}

因為等等會用程式在超連結中加入圖片，為了不要出現醜醜的框線，這邊就先把圖片的框線拿掉。準備好就能開始動手寫 jQuery 囉：

檢視原始碼 JavaScript

$(function(){
	var thumbSize = 'large',		// 設定要取得的縮圖是大圖還是小圖
						// 大圖寬高為 480X360；小圖寬高為 120X90
		swfWidth = '240',		// 限制圖片的寬及 YouTube 影片的寬
		swfHeight = '180',		// 限制圖片的高及 YouTube 影片的高
		autoPlay = '&autoplay=1',	// 是否載入 YouTube 影片後自動播放；若不要自動播放則設成 0
		fullScreen = '&fs=1';		// 是否允許播放 YouTube 影片時能全螢幕播放
 
	$('ul.playlist>li>a').each(function(){
		// 取得要連結轉換的網址及訊息內容
		var _this =  $(this),
			_url = _this.attr('href'),
			_info = _this.text(),
			_type = (thumbSize == 'large') ? 0 : 2;
 
		// 取得 vid
		var vid = _url.match('[\\?&]v=([^&#]*)')[1];
 
		// 取得縮圖
		var thumbUrl = "http://img.youtube.com/vi/"+vid+"/" + _type + ".jpg";
 
		// 把目前超連結的內容轉換成圖片並加入 click 事件
		_this.html('<img src="'+thumbUrl+'" alt="'+_info+'" title="'+_info+'" width="'+swfWidth+'" height="'+swfHeight+'" />').click(function(){
			return false;
		}).focus(function(){
			this.blur();
		}).children('img').click(function(){
			// 當點擊到圖片時就轉換成 YouTube 影片
			var swf  = '<object height="'+swfHeight+'" width="'+swfWidth+'">';
			swf += '<param name="movie" value="http://www.youtube.com/v/'+vid+autoPlay+fullScreen+'"></param>';
			swf += '<param name="wmode" value="transparent"></param>';
			swf += (fullScreen == '&fs=1') ? '<param name="allowfullscreen" value="true"></param>' : '';
 
			swf += '<embed type="application/x-shockwave-flash" src="http://www.youtube.com/v/'+vid+autoPlay+fullScreen+'" ';
			swf += (fullScreen == '&fs=1') ? 'allowfullscreen="true" ' : '';
			swf += 'wmode="transparent" height="'+swfHeight+'" width="'+swfWidth+'"></embed>';
 
			swf += '</object/>';
 
			$(this).parent('a').html(swf);
 
			return false;
		});
	});
});

因為從 YouTube 取得的縮圖只有兩種固定的尺寸，如果要其它尺寸的話就需要自訂並透過屬性來指定才行。另外也能設定是否在影片載入後能自動播放或是是否允許全螢幕播放。

一開始瀏覽時就是預覽的縮圖，當點下該圖片則會轉換成 YouTube 的影片

這樣是不是使用起來就更方便了呢！假設要綽成影片節目清單且讓影片顯示在其它區塊的話，那麼只要把最後輸出在指定的區塊就可以了。

讓我們再來修改一下 HTML：

檢視原始碼 HTML

<body>
	<div class="tv">
		<div class="video"></div>
		<ul class="playlist">
			<li><a href="http://www.youtube.com/watch?v=htCW5fcyLUU">暮光之城第三集 蝕預告片</a></li>
			<li><a href="http://www.youtube.com/watch?v=GeS0gAIg1Io">《暮光之城：新月》預告片</a></li>
			<li><a href="http://www.youtube.com/watch?v=wngwJ-GEJVg">【暮光之城】中文版預告片</a></li>
			<li><a href="http://www.youtube.com/watch?v=4VTT3v9TBIo">【暮光之城2:新月】中文版前導預告【雅各篇】</a></li>
			<li><a href="http://www.youtube.com/watch?v=bwd7BbFWYw0">暮光之城2新月最終版預告</a></li>
			<li><a href="http://www.youtube.com/watch?v=_kerQfD1LuA">暮光之城新月MTV 預告片New Moon Trailer</a></li>
			<li><a href="http://www.youtube.com/watch?v=fDhRS8Gd1bA">暮光之城2新月The Twilight Saga: New Moon預告</a></li>
			<li><a href="http://www.youtube.com/watch?v=LwfZl1t-dQI">暮光之城MV - Time Will Tell</a></li>
		</ul>
	</div>
</body>

多了 .video 是要用來放置影片用的區塊，接著再用 CSS 來排版：

檢視原始碼 CSS

ul.playlist {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 260px;
	float: left;
}
ul.playlist li {
	margin: 0 3px;
	float: left;
}
ul.playlist li a img {
	border: 0;
	vertical-align: middle;
}
 
.tv {
	background: #666;
	padding: 10px;
	width: 740px;
	height: 360px;
}
.video {
	float: left;
	width: 480px;
	height: 360px;
}

再來就是最重要的程式部份：

檢視原始碼 JavaScript

$(function(){
	var thumbSize = 'large',		// 設定要取得的縮圖是大圖還是小圖
						// 大圖寬高為 480X360；小圖寬高為 120X90
		imgWidth = '120',		// 限制圖片的寬
		imgHeight = '90',		// 限制圖片的高
		swfWidth = '480',		// 指定 YouTube 影片的寬
		swfHeight = '360',		// 指定 YouTube 影片的高
		autoPlay = '&autoplay=0',	// 是否載入 YouTube 影片後自動播放；若不要自動播放則設成 0
		fullScreen = '&fs=1';		// 是否允許播放 YouTube 影片時能全螢幕播放
 
	$('.playlist>li>a').each(function(){
		// 取得要連結轉換的網址及訊息內容
		var _this =  $(this),
			_url = _this.attr('href'),
			_info = _this.text(),
			_type = (thumbSize == 'large') ? 0 : 2;
 
		// 取得 vid
		var vid = _url.match('[\\?&]v=([^&#]*)')[1];
 
		// 取得縮圖
		var thumbUrl = "http://img.youtube.com/vi/"+vid+"/" + _type + ".jpg";
 
		// 把目前超連結的內容轉換成圖片並加入 click 事件
		_this.html('<img src="'+thumbUrl+'" alt="'+_info+'" title="'+_info+'" width="'+imgWidth+'" height="'+imgHeight+'" />').click(function(){
			return false;
		}).focus(function(){
			this.blur();
		}).children('img').click(function(){
			// 當點擊到圖片時就轉換成 YouTube 影片
			var swf  = '<object width="'+swfWidth+'" height="'+swfHeight+'">';
			swf += '<param name="movie" value="http://www.youtube.com/v/'+vid+autoPlay+fullScreen+'"></param>';
			swf += '<param name="wmode" value="transparent"></param>';
			swf += (fullScreen == '&fs=1') ? '<param name="allowfullscreen" value="true"></param>' : '';
 
			swf += '<embed type="application/x-shockwave-flash" src="http://www.youtube.com/v/'+vid+autoPlay+fullScreen+'" ';
			swf += (fullScreen == '&fs=1') ? 'allowfullscreen="true" ' : '';
			swf += 'wmode="transparent" width="'+swfWidth+'" height="'+swfHeight+'"></embed>';
 
			swf += '</object/>';
 
			$('.video').html(swf);
 
			return false;
		});
	});
 
	// 先載入第一個影片
	$('.playlist>li>a').eq(0).children('img').click();
 
	// 變更影片播放為自動播放
	autoPlay = '&autoplay=1';
});

為了讓影片能獨立尺寸，因此就把圖片跟影片尺寸的參數部份分開來設定。若沒問題的話就來看效果囉！

嘿~是不是就真的有像播放清單的感覺了呢！更專業的人還能設計專屬的外框架，這樣就獨一無二囉！

範例 1 範例 2 範例 3

檔案描述
基本的範例檔案(免空)	開始下載
基本的範例檔案	會員限定

107 筆針對 [jQ]自製 YouTube 影片播放清單的迴響

« 上一頁 1 2 3 4 5 6 下一頁 »

funnynet 於 2012-11-15 15:28:27 說：

想請問老師，如果要把那八張圖用文字連結可以嗎?還有可以指定那個大室窗的位置是在上方嗎?謝謝老師！

登入後再回覆
- 男丁格爾於 2012-11-16 21:16:52 說：
  
  用文字連結當然是可以啊, 只要把插入圖片及針對圖片做 click 的部份拿掉應該就可以了
  
  登入後再回覆
star 於 2013-01-03 20:16:04 說：

想請問老師，如果要想每一個影片都有自己獨立的域名方便分享到社交媒體，可以嗎?

登入後再回覆
myfavorite_away 於 2013-02-04 21:32:10 說：

請問如何在選單做捲軸可上下移動?

登入後再回覆
- 男丁格爾於 2013-02-19 21:23:59 說：
  
  你是指做上下箭頭嗎?
  
  登入後再回覆
wwy360 於 2013-02-26 22:46:08 說：

老師，我照你的辦法做好了，但想請問你，如果我的縮圖在網頁的下下下方……，而播放影片在網頁的上方……
我想搞縮圖後，自動回到 #top的播放影片位置，該怎麼做？

登入後再回覆
- 男丁格爾於 2013-02-27 21:59:42 說：
  
  可以利用 $('#top').offset() 找出它在網頁中的 top 及 left, 然後就讓捲軸移動到這些定點吧~
  
  登入後再回覆
Sherry 於 2013-04-26 13:37:12 說：

請問
在範例三為什麼autoplay設0時影片會自動播放呢?
好像是這幾天autoplay才有這種狀況,之前不會這樣的說

登入後再回覆
grace 於 2013-04-29 15:09:46 說：

我把autoplay=0後他還是會自動播放，有點怪怪的
範例三沒點播放也自動播放了..不知是哪裡出錯了

登入後再回覆
vicky 於 2013-06-02 09:32:08 說：

謝謝男丁老師的教學.
但想請教男丁老師. 若我想把影片清單放置成下拉式文字選單, 不知怎麼修改, 我已經自己試作3天都無效了. 只好來請教老師.QQ

登入後再回覆
- 男丁格爾於 2013-06-26 11:20:01 說：
  
  一樣是把 .playlist a 抓出來, 然後透過 each 或是 for 迴圈來把它們的網址取出並產生成下拉選單的選項
  接著, 把下拉選單加上 change 事件, 當被改變時, 再執行原本我們寫在 click 上的動作
  
  登入後再回覆
eorck099 於 2013-06-02 14:10:48 說：

感謝男丁格爾大大提供很棒的範例，關於autoplay失效，這個問題可以在這個頁面看到有人提出問題與說明
https://productforums.google.com/forum/?fromgroups#!topic/youtube/hWjwH6Jz694，如果不想自動撥放，只要將男丁大大的範例中，autoPlay參數設為空值就好(前後共2個)

登入後再回覆
- eorck099 於 2013-06-02 14:12:41 說：
  
  不好意思，上面的網址和後面文字連結摻一起了，請男丁大大幫忙修正，謝謝。
  
  登入後再回覆
  - 男丁格爾於 2013-06-26 11:04:24 說：
    
    謝謝你提供的參考資料!
    
    登入後再回覆
BUG 於 2013-08-30 01:07:01 說：

請問老師一開始瀏覽時就是預覽的縮圖的上面要怎麼做可以讓他出現Youtube的播放按呢?

登入後再回覆
- 男丁格爾於 2013-08-30 16:47:20 說：
  
  那...就自己在圖片上面再加上一張 Youbube 的圖片, 疊在一起就可以了。
  不過要記得幫那張圖片也加上能觸發播放影片的程式喔。
  
  登入後再回覆
StandLee 於 2013-12-02 23:06:18 說：

老師你好：

想請問如果我是用dreamweaver CS5來製作網頁,javascript那部份該寫在哪裡跟使用呢？

登入後再回覆
- 男丁格爾於 2013-12-29 22:10:54 說：
  
  需要放在 script 區塊中!!
  
  登入後再回覆