Tải API YouTube trong jQuery

Question

Tôi đang cố tải API iframe của YouTube. Cho đến nay, tất cả những gì tôi đang cố làm là tạo và tải trình phát. Dường như tải API, nhưng sau đó không nhận ra "YT.Player()" là một hàm tạo. Lỗi chính xác mà tôi nhận được ở dòng đó, trong bảng điều khiển chrome js, là:

Uncaught TypeError: undefined is not a function 

Vậy ... Tôi đang làm gì trên thế giới? Tôi đã viết các câu lệnh console.log trên tất cả những thứ này và cố gắng viết lại nó theo một vài cách. Tôi đã thử sao chép api vào một tập tin địa phương. Tôi đã thử tải nó với các thẻ script thông thường. Tôi đã thử tải nó với sửa đổi DOM lập dị mà họ đã sử dụng trong tham chiếu api tại https://developers.google.com/youtube/iframe_api_reference. Tôi chắc rằng mã bên dưới sẽ hoạt động:

function youtubeAPIReady(script, textStatus, jqXHR) 
    { 
     player = new YT.Player('player', { 
      height: '390', 
      width: '640', 
      videoId: 'CxTtN0dCDaY' 
     }); 
    } 

    function readyFunction() 
    { 
     $.getScript("https://www.youtube.com/iframe_api", youtubeAPIReady); 
    } 

    jQuery(document).ready(readyFunction); 

Bất kỳ trợ giúp nào?

Answer 1

Trích từ http://api.jquery.com/jQuery.getScript/

các callback là bắn một lần kịch bản đã được tải nhưng không nhất thiết thực thi.

API lẽ đã không chạy theo thời gian các bạn gọi YT.Player()

Answer 2

Tôi không thể nói cho giải pháp jQuery, nhưng hãy thử sử dụng javascript chuẩn của chứng khoán. Trong mọi trường hợp, bạn sẽ không phải chờ đợi cho các tài liệu được nạp (mã này nên ngồi ngoài $(document).ready())

// Load the YouTube API 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); 

// Create the player object when API is ready 
var player; 
window.onYouTubeIframeAPIReady = function() { 
    player = new YT.Player('player', { 
     height: '390', 
     width: '640', 
     videoId: 'CxYyN0dCDaY' 
    }); 
}; 

Answer 3

Bạn có thể mượn kỹ thuật used in YouTube Direct Lite hoãn tải JavaScript cho đến khi nó rõ ràng cần thiết:

var player = { 
    playVideo: function(container, videoId) { 
    if (typeof(YT) == 'undefined' || typeof(YT.Player) == 'undefined') { 
     window.onYouTubeIframeAPIReady = function() { 
     player.loadPlayer(container, videoId); 
     }; 

     $.getScript('//www.youtube.com/iframe_api'); 
    } else { 
     player.loadPlayer(container, videoId); 
    } 
    }, 

    loadPlayer: function(container, videoId) { 
    new YT.Player(container, { 
     videoId: videoId, 
     width: 356, 
     height: 200, 
     playerVars: { 
     autoplay: 1, 
     controls: 0, 
     modestbranding: 1, 
     rel: 0, 
     showInfo: 0 
     } 
    }); 
    } 
}; 

Answer 4

giải pháp

nghèo của con người, nhưng ...

function readyYoutube(){ 
    if((typeof YT !== "undefined") && YT && YT.Player){ 
     player = new YT.Player('player', { 
      ... 
     }); 
    }else{ 
     setTimeout(readyYoutube, 100); 
    } 
} 

Answer 5

Tôi đã giải quyết vấn đề này bằng cách kết hợp các phương pháp của Simon và user151496.

Mã:

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

    // define player 
    var player; 
    function onYouTubeIframeAPIReady() { 
     player = new YT.Player('player', { 
      height: '360', 
      width: '640' 
     }); 
    } 

    $(function() { 

     // load video and add event listeners 
     function loadVideo(id, start, end) { 
      // check if player is defined 
      if ((typeof player !== "undefined")) { 
      // listener for player state change 
      player.addEventListener('onStateChange', function (event) { 
       if (event.data == YT.PlayerState.ENDED) { 
        // do something 
       } 
      }); 
      // listener if player is ready (including methods, like loadVideoById 
      player.addEventListener('onReady', function(event){ 
       event.target.loadVideoById({ 
        videoId: id, 
        startSeconds: start, 
        endSeconds: end 
       }); 
       // pause player (my specific needs) 
       event.target.pauseVideo(); 
      }); 
     } 
     // if player is not defined, wait and try again 
     else { 
      setTimeout(loadVideo, 100, id, start, end); 
     } 
     } 

     // somewhere in the code 
     loadVideo('xxxxxxxx', 0, 3); 
     player.playVideo(); 
    }); 
</script> 

Answer 6

Tháo khối add từ trình duyệt của bạn và thử lại. Nó làm việc cho tôi.