javascript/youtube api - undefined variable YT

Question

我正在创建一个通过 YT api 嵌入的 YouTube 播放器，但我不断收到一个警告，提示变量 YT 未定义。我可以看到包含了 youtube API 的脚本，它应该创建变量 YT - 为什么这不起作用？它适用于我网站的其他地方。

这是链接:

http://oncreativity.tv/site/single/4/7CtQaTmEuWk

和我的代码:

<script>

 $(document).ready(function() {

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

    var videoSupport = Modernizr.video;
    var ua = navigator.userAgent.toLowerCase();
    var vid = {};

    var params = { allowScriptAccess: "always" };
    var atts = { id: "video_player_flash" };

    {exp:channel:entries channel="creators" dynamic="off" entry_id="{segment_3}" sort="asc" limit="1"}  
    vid.description = "{creator_description}";
    vid.videoID = '{segment_4}';
    vid.link = encodeURI("{creator_link}");
    vid.title = "{title}";
    vid.photos = [];
    {creator_work}  
        vid.photos[{row_index}] = {};
        vid.photos[{row_index}].url = "{work_img}";
        vid.photos[{row_index}].title = "{work_title}";
    {/creator_work}
    {/exp:channel:entries}

    var $vidContainerRef = $('#video_player_container');
    var $vidPlayer = $('<div id="video_player"/>');
    $vidContainerRef.append($vidPlayer);
    vidID = vid.videoID;

    player = new YT.Player('video_player', {
        width: '768',
        height: '432',
        videoId: vidID,
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });

});

</script>

Answer 1

您需要将 YT 调用包装在一个函数中，并在包含脚本时调用它。或者您可以从文件中添加脚本而不是调用该脚本来包含另一个脚本。

function doYT(){
    window.player = new YT.Player('video_player', {
        width: '768',
        height: '432',
        videoId: vidID,
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    }
}

window.YT && doYT() || function(){
    var a=document.createElement("script");
    a.setAttribute("type","text/javascript");
    a.setAttribute("src","http://www.youtube.com/player_api");
    a.onload=doYT;
    a.onreadystatechange=function(){
        if (this.readyState=="complete"||this.readyState=="loaded") doYT()
    };
    (document.getElementsByTagName("head")[0]||document.documentElement).appendChild(a)
}();