YouTube Player API – 將多部影片串聯成播放清單

HTML

<div id="player"></div>

Javascript

/* 影片清單 */
var videos = ['cHuRtBA5Esg', 'a7SouU3ECpU', 'J9NQFACZYEU'];

(function() {
    if (videos.length) {
        var tag = document.createElement('script');

        tag.onload = function() {
            YT.ready(function() {
                player = new YT.Player('player', {
                    height: '100%',
                    width: '100%',
                    events: {
                        'onReady': onPlayerReady
                    },
                    playerVars: {
                        loop: 1,
                        playlist: videos.join(","),
                    }
                });
            });
        }

        tag.src = "https://www.youtube.com/iframe_api";

        var firstScriptTag = document.getElementsByTagName('script')[0];

        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    }
})();

/* 自動播放 */
function onPlayerReady(event) {
    /* 避免讀取過慢自動播放失效 */
    setTimeout(function() {
        event.target.playVideo();
    }, 1000);
}