[Javascript] 實作 Youtube 播放清單

最近收到需求，想要將公司網站上的產品介紹影片播放模式改成類似 Youtube 播放清單一樣(如下圖)，左邊是影片、右邊是所有影片的列表，而且也要有影片的小縮圖，然後點選列表後左邊的影片就切換到該影片。

研究了一下，Youtube 很佛心的有提供服務可以使用，此次就使用了以下兩個服務：

• Youtube iFrame API：

傳入 Youtube 影片的 ID 給它，就會將該影片嵌入到 iFrame中。Sample Code 如下：

var tag = document.createElement('script');

// 引用 Youtube iframe API
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;

function onYouTubeIframeAPIReady() {
    player = new YT.Player('ytplayer', {
        height: '',
        width: '',
        videoId: 'qCLayARYVjQ', // 預設播放的 Youtube ID
        playerVars : {
            wmode: 'opaque',
            rel: '0'
        },
        events: {
            'onStateChange': onPlayerStateChange
        }
    });
}

• 取得小縮圖的服務：

傳入 Youtube 影片的 ID 給它，就會回傳該影片的縮圖。Sample Code 如下：

<img src="https://i.ytimg.com/vi/[Youtube ID]/[影片解析度.jpg]" />

// [影片解析度]
// default.jpg：For the default thumbnail
// hqdefault.jpg：For the high quality thumbnail
// mqdefault.jpg：For the medium quality thumbnail
// sddefault.jpg：For the standard quality thumbnail
// maxresdefault.jpg：For the maximum thumbnail

使用了這兩個現成的服務後，技術面就沒有問題了，只要再加上 css 排版美化就 OK，可惜小弟我的 css 功力有限，已盡力讓它很類似了... 成果如下圖：

附上範例。

參考來源：
Youtube iFrame API、stackOverflow