之前有介紹過一個用來取 YouTube 影片縮圖的 jQuery 外掛 - 「jYoutube 1.0」,就有網友問到是否能按下縮圖後就直接嵌入影片並播放呢?
既然我們已經取得到影片縮圖了,那麼要播放時只要利用 YouTube 提供的嵌入語法就能達到想要的效果囉!
在做出完整的播放清單之前,我們先來看較單純的例子:
檢視原始碼 HTML
1 2 3 4 5 6 7 | <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
1 2 3 4 5 6 7 8 9 10 11 12 | 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
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 | $(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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <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
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 | 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
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 | $(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'; }); |
為了讓影片能獨立尺寸,因此就把圖片跟影片尺寸的參數部份分開來設定。若沒問題的話就來看效果囉!
嘿~是不是就真的有像播放清單的感覺了呢!更專業的人還能設計專屬的外框架,這樣就獨一無二囉!
男丁老師,將.html(............) 部分拿掉,文字也可以直接當連結嗎?
我不太知道你最後想要的畫面及html是要怎樣, 不過要有連結的話, 可以自己加個超連結就好..
男丁老師,現在我自己置入的圖片可以作連結,點了左方播放框有影片出現,但是我把圖片換成文字,點了都沒反應
要不要弄個簡單的範例網頁寄給我來看看XD
老師你好:
不好意思請問一下,有關老師你的網站 男丁格爾's 脫殼玩 有說明
本 著作 係採用創用 CC 姓名標示-非商業性 3.0 台灣 授權條款授權.
有關 非商業性 — 您不得為商業目的而使用本著作。 這點的問題
我這裡是 醫院,目前正在針對醫院網頁改版在新增功能,對於貴網站的許多教學有興趣。
所以想請問一下醫院算是商業性質的嗎?是可以直接修改引用的嗎?
謝謝!
事先告知的話, 我大多是會允許的...所以你要用在醫院網站 OK 的..
男丁老師 我寄試作範例網址給你了 ~~謝謝
把
改成
老師請問
要怎麼把範例寄到你的信箱討論呢?
目前將範例2修改成清單可以有類似跑馬燈的功能,但要修改高度時 CSS 有些許問題
同時也發現在IE6上執行,清單部份的格式會跑掉,想請老師指導一下
謝謝
在 IE6 的問題通常都是 CSS 啦, 我的mail是現在blog的網址加@gmail.com
老師請問 我製作的網頁 在ipad2上 我的影片不能撥
但是老師範例得影片卻是可以撥的
是有版權問題嗎?
如果你的 iPad2 上瀏覽我範例能播放的話, 那跟版權應該沒什麼關係吧 XD
請問,這有辦法改成~自動撥放下一段影片嗎?
例如播放完第一段,就可以自動撥放第二段,
不用再多點擊一次,煩請指教,感謝
是要播影片的第一段, 第二段..還是第一個影片, 第二個影片
理論上都是要利用計時器來一直偵測影片是否播完~
是想要做播第一個影片、第二個影片,
播完第一個影片後,自動播第二個影片,
那要如何偵測影片是否有播完呢?
有相關的資源或程式碼可運用嗎?
煩請再行指教,感謝。
利用 getCurrentTime() 及 getCurrentTime() 來判斷是否播放完畢
男丁老師
請問一下 如果我想達到
點選縮圖
會整塊縮圖(彈跳或是慢慢放大)移到播放影片區塊
然後才進行播放!
這樣的效果應該如何處理呢?!
這....弄個 ghost 就可以了。當你點了縮圖時,利用 jQuery 的 .clone() 功能把縮圖複製一份,然後接著讓它做一段移動的動畫就應該可以了。
請參考第三個範例效果。
JQ好有趣! 謝謝老師:D
您好:
檔案描述的"基本的範例檔案(免空)",已經無法下載。
您方便再提供新的下載連結嗎?
檔案已更新鏈結了~