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

Question

我想在我的$(document).ready()函数中添加youtube iframe api代码,但是当我这样做时,播放器似乎无法加载,当我将代码移到文档外时.播放器加载得很好.任何人都可以向我提供有关如何在功能内部显示此视频的任何建议吗？

JS

$(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');
    }
});

Answer 1

如果您更改function onYouTubePlayerAPIReady() {...}为,window.onYouTubePlayerAPIReady = function() {...}则可以在$(document).ready()函数中定义YouTube iframe API回调,并可能将其他变量从$(document).ready()作用域引入回调作用域.

不过,我不确定这样做有多大优势,但如果你真的想这样做,这是一个选择.