在 document.ready 中添加 youtube iframe 代码时出现问题答案

【问题标题】：Problems adding youtube iframe code inside document.ready在 document.ready 中添加 youtube iframe 代码时出现问题
【发布时间】：2013-04-15 04:34:05
【问题描述】：

我想在我的 $(document).ready() 函数中添加 youtube iframe api 代码，但是当我这样做时，播放器似乎没有加载，当我将代码移到 document.ready 之外时，播放器加载正常.任何人都可以就如何在函数内显示此视频提供任何建议吗？

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

    var player;
    function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
            height: '390',
            width: '640',
            videoId: 'u1zgFlCw8Aw',
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }

    function onPlayerReady() {
        console.log('ready');
    }

    function onPlayerStateChange() {
        console.log('player changed');
    }
});

【问题讨论】：

标签： javascript jquery youtube youtube-api

【解决方案1】：

如果您将function onYouTubePlayerAPIReady() {...} 更改为window.onYouTubePlayerAPIReady = function() {...}，则可以在$(document).ready() 函数中定义您的YouTube iframe API 回调，并可能将其他变量从$(document).ready() 范围拉入您的回调范围。

不过，我不确定这样做有多大好处，但如果你真的想这样做，这是一个选择。

【讨论】：

advantage to doing that - 我的目的是先加载网站，等所有内容都准备好后，再将 YouTube iframes 留到以后...

【解决方案2】：

脚本在加载时将调用onYouTubePlayerAPIReady()。当您...假设...在您的 DOM 就绪包装器中“隐藏”这些函数时，它们不再可供 YT API 调用（超出范围）。

因为您无法直接访问 YT API 脚本文件，所以您无法更改此行为，恕我直言，您的要求是不可能的。

【讨论】：