Rails＆Youtube API：加載iframe的問題

我試圖在我的Rails應用中實現Youtube Iframe API。我試圖複製Youtube Iframe API instructions page上的確切示例。Rails＆Youtube API：加載iframe的問題

創建一個yt_player.js文件：

$(function() { 

    alert('this gets called') 

    // 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() { 
    alert('this does not get called') 
    player = new YT.Player('player-wrapper', { 
     height: '390', 
     width: '640', 
     videoId: 'M7lc1UVf-VE', 
     events: { 
     'onReady': onPlayerReady, 
     'onStateChange': onPlayerStateChange 
     } 
    }); 
    } 
    // 4. The API will call this function when the video player is ready. 
    function onPlayerReady(event) { 
    event.target.playVideo(); 
    } 

    // 5. The API calls this function when the player's state changes. 
    // The function indicates that when playing a video (state=1), 
    // the player should play for six seconds and then stop. 
    var done = false; 
    function onPlayerStateChange(event) { 
    if (event.data == YT.PlayerState.PLAYING && !done) { 
     setTimeout(stopVideo, 6000); 
     done = true; 
    } 
    } 
    function stopVideo() { 
    player.stopVideo(); 
    } 
});

而我的觀點：

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

我期待這個工作，但沒有視頻加載。控制檯中沒有顯示錯誤。

我在做什麼錯？

來源

2016-02-13 Jackson Cunningham

首先，我確定您登錄瀏覽器控制檯時，您的window.player和window.onYouTubeIframeAPIReady是undefined。

原因是方法youtube iframe api工作，上面那些變量必須全局定義。

讓我們檢查這個document

他們說：

的onYouTubeIframeAPIReady功能，將立即執行的播放器API代碼下載。這部分代碼定義了一個全局變量，播放器，它指的是您嵌入的視頻播放器，然後該函數構造視頻播放器對象。

所以變化將是：（定義YouTube的變量和全局回調）

// Your current code 
window.player = null; // <-- change here 
window.onYouTubeIframeAPIReady = function() { // <-- change here 
    alert('this does not get called') 
    player = new YT.Player('player-wrapper', { 
    height: '390', 
    width: '640', 
    videoId: 'M7lc1UVf-VE', 
    events: { 
     'onReady': onPlayerReady, 
     'onStateChange': onPlayerStateChange 
    } 
    }); 
} 

window.onPlayerReady = function(event) { // <-- change here 
    event.target.playVideo(); 
} 

window.done = false; // <-- change here 
window.onPlayerStateChange = function(event) { // <-- change here 
    if (event.data == YT.PlayerState.PLAYING && !done) { 
    setTimeout(stopVideo, 6000); 
    done = true; 
    } 
} 
window.stopVideo = function() { // <-- change here 
    player.stopVideo(); 
}

來源

2016-02-13 02:44:34

Rails＆Youtube API：加載iframe的問題

回答

相關問題