如何獲取YouTube API以加載onclick？

Question

我正在使用YouTube Iframe，如下所示。我希望在API加載後立即讓我的玩家加載點擊按鈕。

我創建了一個系統，我的網站用戶可以選擇將哪些視頻加載到播放列表中，因此我無法對YouTube視頻ID進行硬編碼。是否可以創建一個onclick函數來觸發加載播放器的事件？如果是這樣，怎麼樣？

非常感謝！

<script> 
    // 2. This code loads the IFrame Player API code asynchronously. 
    var tag = document.createElement('script'); 

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

    // 3. This function creates an <iframe> (and YouTube player) 
    // after the API code downloads. 
    var player; 
    function onYouTubeIframeAPIReady() { 
    player = new YT.Player('player', { 
     height: '390', 
     width: '640', 
     videoId: 'M7lc1UVf-VE', 
     events: { //CAN I REPLACE THE ONREADY EVENT WITH ONE 
     'onReady': onPlayerReady, //THAT FIRES ONCLICK? 
     'onStateChange': onPlayerStateChange 
     } 
    }); 
    } 

    // 4. The API will call this function when the video player is ready. 
    function onPlayerReady(event) { 
    event.target.playVideo(); 
    } 

Answer 1

你可以做以下類似代碼

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

var video_id = '' //Desired video ID 
var player; 
$('LOAD_BUTTON').on('click', function() { 
    // Load player when LOAD_BUTTON is clicked 
    player = new YT.Player('player', { 
    height: '390', 
    width: '640', 
    videoId: video_id, 
    events: { 
     'onReady': onPlayerReady, 
     'onStateChange': onPlayerStateChange 
    } 
    }); 
}); 

function onPlayerReady(event) { 
    $('PLAY_BUTTON').on('click', function() { 
    // Play video when PLAY_BUTTON is clicked 
    event.target.playVideo(); 
    }); 
}