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

 

Leave a Reply

你的電子郵件位址並不會被公開。 必要欄位標記為 *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料