問題討論區


【JavaScript 語法】文章精華區


【問題】 [jQuery]自製 YouTube 影片播放清單



[jQuery]自製 YouTube 影片播放清單
飛肯老師
註冊日期:
2009/2/15 16:27
留言: 106
之前有介紹過一個用來取 YouTube 影片縮圖的 jQuery 外掛 – 「jYoutube 1.0」,就有網友問到是否能按下縮圖後就直接嵌入影片並播放呢?

既然我們已經取得到影片縮圖了,那麼要播放時只要利用 YouTube 提供的嵌入語法就能達到想要的效果囉!

在做出完整的播放清單之前,我們先來看較單純的例子:

<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 來修飾一下:


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 囉:


$(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 的影片

Open in new window


這樣是不是使用起來就更方便了呢!假設要綽成影片節目清單且讓影片顯示在其它區塊的話,那麼只要把最後輸出在指定的區塊就可以了。

讓我們再來修改一下 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 來排版:


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;
}


再來就是最重要的程式部份:


$(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';
});


為了讓影片能獨立尺寸,因此就把圖片跟影片尺寸的參數部份分開來設定。若沒問題的話就來看效果囉!

Open in new window


嘿~是不是就真的有像播放清單的感覺了呢!更專業的人還能設計專屬的外框架,這樣就獨一無二囉!

範例瀏覽:
http://demonstration.abgne.tw/jquery/0013/0013_1.html
http://demonstration.abgne.tw/jquery/0013/0013_2.html


以上內容於2009-12-11 14:23 發表在 http://abgne.tw/jquery/apply-jquery/youtube-movie-playlist.html

2009/12/14 9:57
 


回覆: [jQuery]自製 YouTube 影片播放清單
會員一級
註冊日期:
2010/7/22 2:43
留言: 1
請問如果點選縮圖要播放的影片再另一個網頁該如何下指令
是在這一行嗎
$('.video').html(swf);

試了好久都沒成功.

2010/7/22 2:45
 









[高級搜索]


 

課程首頁】 【最新開課時間表】 【範例教學分享區】 【交流討論區】 【企業包班】 【詢問課程】 【合作提案】 【誠徵講師

 

【飛肯設計學苑】 台北市公園路 30-1 號 5 樓 聯絡電話:(02)2370-1122 / 0925-014-000 信箱:flycan@flycan.com.tw
服務時間:(平日)下午 2 點 ~ 晚上 10 點 / (假日)早上 9 點 ~ 下午 5 點

 

台北市短期補習班立案 第 6631 號

TOP

【 Flycan.com 】 Powered by XOOPS