之前有介紹過一個用來取 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'; }); |
為了讓影片能獨立尺寸，因此就把圖片跟影片尺寸的參數部份分開來設定。若沒問題的話就來看效果囉！
嘿~是不是就真的有像播放清單的感覺了呢！更專業的人還能設計專屬的外框架，這樣就獨一無二囉！
請問老師：
可以幫我看一下，為什麼點擊小圖滑動過去的位置無法對準？謝謝
http://jkd.herbf.com/index3.htm
因為你把程式直接放在 html 中, 所以我較難去幫你除錯!!
不過可以將 _videoOffset = $video.offset() 直接移到 var $clone = $this.clone().appendTo('body') 的上方!!
效果應該就能正常了!
請問老師：
我在這邊加上循環撥放的
swf += ";
還有這
swf += '<embed type="application/x-shockwave-flash" src="http://www.youtube.com/v/'+vid+'?rel=0'+autoPlay+'&loop=1'+'$playlist='+vid+fullScreen+'" ';
為什麼不會循環撥放???
第一個跳掉
swf += ";
上面的 param name="movie" 這邊應該也要加才行!
老師您好:
因最近在幫公司調整網頁需要播放youtube,看到您這個範例效果很不錯,請問您的這個範例能借用在一般行號的公司網頁上做特效嗎?還是需要付費呢?
拿去用在公司網站沒關係!!
太感謝您啦!!
老師您好，我的Case是在網頁裡頭嵌入 Youtube ，使用他的API來抓取當前的秒數，需求是在某些特定秒數要呼叫一些函數來做效果。
而 youtube 的 getCurentTime 格式最小到小數點第6位（例：0.900702），然後我是寫一個 setInterval() 每一毫秒去 getCurentTime 抓取當前秒數，來對照是否吻合先前已建好的數個時間標籤以便應用！
可是 setInterval() 最小是只有到毫秒，抓出來的時間不一定會對上，除非可以把 setInterval() 設定得更短。後來我是將時間標籤四捨五入到小數點第三位！
不過這時候發現一個怪怪的地方，雖然setInterval()週期設定1毫秒，可是他連續去call getCurentTime 抓時間，並不會真的這麼快，另一方面我發現週期中抓出來的資料一樣沒這麼這麼細！
我把格式設定成為→h:m:s,毫秒
｜00:00:00,333｜00:00:00,601｜00:00:00,867｜00:00:01,134｜
重複的值我省略，會發現數字改變的時候大概差0.26～0.27
以致於最終無法達到數字對照的目的...請問老師這該怎麼處理？感謝
老師您好，請問若要放在google blog，有哪些需要修改的?
我是依據範例三來修改的，但放入GOOGLE BLOG後，畫面的右邊選單卻變成直條排列並疊在影片畫面中
，這是為甚麼，可否請指導一下
老師你好：
目前我已成功使用這個功能了，
但是如果可以循環播放就更好了，
目前一直試不出來，
也爬文到前幾樓的方法試了還是不行，
如果老師有空的時候可否教學一下，
感謝。