男丁格爾'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 下一頁 »

麵包小鐵於 2010-06-08 18:15:36 說：

男丁老師，請教一下，我該如何讓它變3,4....列,是修改li嗎

登入後再回覆
- 男丁格爾於 2010-06-08 20:33:15 說：
  
  應該是把 ul.playlist 的 width 加大就可以了
  
  登入後再回覆
麵包小鐵於 2010-06-09 09:39:13 說：

男丁老師，請教一下，我想在影片的小圖下方空出欄位打上影片集數，能否直接設定css直接上文字?

登入後再回覆
- 男丁格爾於 2010-06-09 09:59:34 說：
  
  CSS 只是裝飾 HTML 而已...你給自己先排好 HTML 才行
  
  登入後再回覆
Max 於 2010-08-07 04:01:02 說：

男丁老師，請教一下，我在ie8下會縮圖自動走到影片的下面
http://stars.heroestoo.com/video.html

我已嘗試把影片的寬度調窄至400,但問題還不能解決max-zone@hotmail.com

登入後再回覆
- 男丁格爾於 2010-08-07 08:36:36 說：
  在你網頁的最開頭加上
  
  檢視原始碼 HTML
  1
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  登入後再回覆
Max 於 2010-08-08 16:47:31 說：

多謝老師的解答!
但當加上了
後,我的表格開始出理走位.

但我現在加了
就什麼問題都沒有了,而且解決了video走位的問題.

另外我有個問題, 當我的影片不停新增,就會出現自動走出綠色表格外
有沒有可能每頁只有8個影片,多出的影片會出現在第二頁,而再多的時候,就會出現在第三頁,如於類推,會自動新增1,2,3,4頁?
或有沒有其他方法解決呢?

登入後再回覆
- 男丁格爾於 2010-08-08 19:43:04 說：
  
  我想你需要的是自己做出一個假分頁效果的分頁程式才行
  
  登入後再回覆
Max 於 2010-08-09 00:40:31 說：

多謝老師的回覆!
請問可以詳細解釋分頁程式呢?
是否是利用php?

登入後再回覆
- 男丁格爾於 2010-08-09 09:41:45 說：
  
  可用 PHP 也可以只用 JavaScript..就看你要怎樣設計它。
  只要一次顯示 N 筆就可以了
  
  登入後再回覆
Max 於 2010-08-12 23:05:23 說：

再次感謝老師的回覆!
請問能源提供 JavaScrip 的源碼?

登入後再回覆
- 男丁格爾於 2010-08-13 10:06:43 說：
  
  假分頁的嗎..?這要等有空才有辦法寫哩..~
  
  登入後再回覆
Max 於 2010-08-17 20:06:45 說：

對,我會等老師的!謝謝!

登入後再回覆
邪惡藍於 2010-09-18 11:16:11 說：

請問同理
如果要把我 Youtube 我的影片裡面的播放清單取出所有影片檔名
該如何取呢？謝謝。

登入後再回覆
- 男丁格爾於 2010-09-20 09:21:35 說：
  
  好像沒辦法簡單的取出這樣的清單..除非 youtube 有提供 api
  如果是固定的內容時, 自己 key 一 key 應該比較快:D
  
  登入後再回覆
小美冰淇淋於 2011-05-03 16:40:32 說：

各位大大和男丁老師，有個問題想請教一下，如果我不想要文字轉成YouTube的縮圖，而是我自己置入的圖片作連結，程式碼的部分該如何修改？謝謝

登入後再回覆
- 男丁格爾於 2011-05-04 09:07:52 說：
  
  要先看你的 html 長怎樣才能知道程式碼要怎樣修改哩~不過大部份是大同小異啦!
  
  登入後再回覆
小美冰淇淋於 2011-05-05 09:19:49 說：

男丁老師，不好意思打擾了，問題自製 YouTube 影片播放清單，我將html寫法給老師看其它程式碼和css都是用老師的範例來做

—-當初是文字，現在變成我自己置入的圖

，不過jquery會直接將連結的部分轉成他自己本身的圖片，是不是老師說的只要拿掉抓取預覽圖的功能就可以了，但是我不是很清楚該如何把它移除 ~~謝謝

登入後再回覆
- 男丁格爾於 2011-05-05 09:34:57 說：
  
  你只要把 .html(............) 的部份都拿掉就可以了
  
  登入後再回覆

發表迴響取消回覆

抱歉，你必須要登入才能發表迴響喔！

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

發表迴響 取消回覆

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

發表迴響取消回覆