Home » jQuery 應用

[jQ]YouTube 影片播放前後顯示預覽圖片

[ 日期： | 瀏覽：31,525 | 迴響：7 ]
範例 1
請協助我把這個效果加到我的網站 (只要 2,000 元)
沒錯!只要 2,000 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

之前筆者有分享過一篇如何自製 YouTube 影片播放清單的文章，其中可以自動取得 YouTube 影片的預覽圖，並在點擊縮圖時自動轉換成播放模式。

不過常常收到同學或是網友問說是否能隱藏 YouTube 影片標題或是當播放完後再變成預覽圖等等問題，所以筆者今天會針對這些問題來分享範例。

首先一樣是準備幾個含有 YouTube 影片位置的超鏈結內容：

檢視原始碼 HTML
1
2
3
4
5
6
7

<body>
	<ul id="abgne-block-20120704">
		<li><a href="http://www.youtube.com/watch?v=tHwVRqRKaok">黑暗騎士：黎明昇起The Dark Knight Rises</a></li>
		<li><a href="http://www.youtube.com/watch?v=3BFXV2Q1AB4">《復仇者聯盟》正式預告片</a></li>
		<li><a href="http://www.youtube.com/watch?v=o6pBIJwnnRc">蜘蛛人:驚奇再起3D</a></li>
	</ul>
</body>

接著針對 ul li 加上常見的 CSS 設定：

檢視原始碼 CSS
1
2
3
4
5
6
7
8
9
10
11
12

#abgne-block-20120704 {
	margin: 0;
	padding: 0;
	list-style: none;
}
#abgne-block-20120704 li {
	margin-bottom: 5px;
}
#abgne-block-20120704 li a img {
	border: 0;
	vertical-align: middle;
}

HTML 及 CSS 的部份都跟自製 YouTube 影片播放清單幾乎一樣，有較大的差異會是在程式的部份。

因為原本我們是用自己組出網頁語法來插入影片語法，現在則是要利用 swfobject 套件來幫我們組出語法並插入到指定位置。所以要記得先下載 swfobject.js 並在網頁中加入引用才行喔！

接下來張大眼仔細看程式的部份吧：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

$(function(){
	var prevSize = 'large',			// 設定要取得的預覽圖的尺寸, 有寬高為 480X360及寬高為 120X90 兩種
		imgWidth = 480,			// 限制圖片的寬及 YouTube 影片的寬
		imgHeight = 360,		// 限制圖片的高及 YouTube 影片的高
		flashVars = {
			enablejsapi: 1, 
			autoplay: 1,		// 是否自動播放; 1: 自動, 0:不自動
			modestbranding: 1,	// 是否隱藏在播放控制器上的 Youtube logo(不過右下角的還是會有); 1: 顯示, 0: 隱藏
			showinfo: 0,		// 是否隱藏在影片上方的標題列; 1: 顯示, 0: 隱藏
			rel: 0,			// 是否隱藏在影片上方的 Share 及 More Info功能; 1: 顯示, 0: 隱藏
			controls: 0		// 是否隱藏影片下方的控制列; 1: 顯示, 0: 隱藏
		};
 
	// 一一轉換每一個超連結中的 YouTube 影片
	$('#abgne-block-20120704 li a').each(function(){
		var $this =  $(this), 
			_url = $this.attr('href'),
			_info = $this.text(), 
			_index = $this.parent().index(), 
			_embedId = 'myytplayer_' + _index, 
			_playerId = 'ytapiplayer_' + _index, 
			player, timer, checkSpeed = 500;
 
		// 先取得 vid 後, 再利用 vid 取得預覽圖片位置
		// 最後產生預覽圖片元素
		var _vid = _url.match('[\\?&]v=([^&#]*)')[1], 
			_prevUrl = 'http://img.youtube.com/vi/' + _vid + '/' + (prevSize == 'large' ? 0 : 2) + '.jpg', 
			_prev = '<img id="' + _playerId + '" src="' + _prevUrl + '" alt="' + _info + '" title="' + _info + '" width="' + imgWidth + '" height="' + imgHeight + '" />';
 
		// 把目前超連結的內容轉換成預覽圖片並加入 click 事件
		$this.html(_prev).on('click', 'img', function(){
			clearInterval(timer);
 
			// 當點擊到預覽圖片時就轉換成 YouTube 影片
			swfobject.embedSWF('http://www.youtube.com/v/' + _vid + '?playerapiid=' + _playerId, _playerId, imgWidth, imgHeight, '8', null, flashVars, { allowScriptAccess: 'always' }, { id: _embedId });
			timer = setInterval(checkStatechange, checkSpeed);
 
			return false;
		});
 
		// 監視 YouTube 影片播放狀態
		function checkStatechange(){
			if((player = $('#' + _embedId)[0]) == undefined) return;
			try{
				var currentState = player.getPlayerState();
				// 如果已經播放完畢
				if(currentState == '0'){
					clearInterval(timer);
					$this.html(_prev);
				}
			}catch(err){}
		}
	});
});

其中的 flashVars 主要是用來設定播放 YouTube 影片時的播放器的設定，像是要不要顯示標題或是播放列等等。更多設定及說明可以參閱：https://developers.google.com/youtube/player_parameters。

而筆者主要是利用 .getPlayerState() 來判斷影片的狀態；若取得的值為 0 時則表示已經播放完畢了。

若沒有漏掉什麼步驟的話，就能在播放完後又回到預覽圖囉!

範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定
Zepto 版本 會員限定
外掛版本 - abYouTube Preview Image 1.0
除了可以在同一頁產生多組效果之外。目前有 4 種屬性可以設定, 像是預覽圖尺寸及寬高等等。		 會員限定

7 筆針對 [jQ]YouTube 影片播放前後顯示預覽圖片 的迴響

  4. 男丁老師：
    請問，如果想要在youtube網址結尾加 &rel=0 (取消推薦相關影片的功能)
    要如何修改呢?
    謝謝

發表迴響