之前筆者有分享過一篇如何自製 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 時則表示已經播放完畢了。
若沒有漏掉什麼步驟的話,就能在播放完後又回到預覽圖囉!
這一招可真強阿,學習到了,可惜沒進度條,有的電腦漫的可能沒辦法看0.0
下一次教教如何做一個自訂的 YouTube 控制列,順便會加上進度條的!
太酷了 ~ 這樣可以使影片不會在開網頁時全部加載
您寫的文章非常有幫助!
謝謝分享
男丁老師:
請問,如果想要在youtube網址結尾加 &rel=0 (取消推薦相關影片的功能)
要如何修改呢?
謝謝
在變數 flashVars 中我應該預設就是 0 隱藏了吧, 沒有效果嗎?
您好~請問一下手機使用此jq~影片縮圖點選後沒有作用
該如何解決呢?謝謝~