javascript - Youtube Iframe Api 无法在函数内工作

Question

出于某种原因，当我将 YouTube iframe api 放入这样的函数中时，它似乎不起作用

$.getVideo = (elem, id) => {
    $.getScript("https://www.youtube.com/iframe_api")

    var player;

    function onYouTubeIframeAPIReady() {
        player = new YT.Player(elem, {
            videoId: id,
            playerVars: {
                autoplay: 1,
                autohide: 1,
                modestbranding: 0,
                rel: 0,
                showinfo: 0,
                controls: 0,
                disablekb: 1,
                enablejsapi: 1,
                iv_load_policy: 3
            },
            events: {
                'onReady': onPlayerReady,
            }
        })
    }

    function onPlayerReady(event) {
        event.target.mute()
    }
}
$.getVideo('player', 'CmRih_VtVAs')

http://codepen.io/anon/pen/MbBRpV

但是当在函数之外运行时它似乎工作正常？我做错了什么？

我真的需要这个功能才能工作

Answer 1

onYouTubeIframeAPIReady 必须在全局范围内可用。

以调用上述函数的方式修改您的函数，然后加载库，并将玩家变量更新为新实例。

 var player; // global scope
 $.getVideo = (elem, id) => {

    var cb = () => {
        player = new YT.Player(elem, {
            videoId: id,
            playerVars: {
                autoplay: 1,
                autohide: 1,
                modestbranding: 0,
                rel: 0,
                showinfo: 0,
                controls: 0,
                disablekb: 1,
                enablejsapi: 1,
                iv_load_policy: 3
            },
            events: {
                'onReady': onPlayerReady,
            }
        })
    }
    
    window.onPlayerReady = function(event) {
        event.target.mute();
    }

    // Load YouTube SDK if not loaded
    if (!window.YT) {
        $.getScript("https://www.youtube.com/iframe_api");
        // update the global function to call cb
        window.onYouTubeIframeAPIReady = cb;
    // call cb()
    } else {
        window.onYouTubeIframeAPIReady = () => { }; // set it to dummy function
        cb();
    }

}
 
$.getVideo('player', 'CmRih_VtVAs')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="player"></div>

 var player; // global scope
 $.getVideo = (elem, id) => {

    var cb = () => {
        player = new YT.Player(elem, {
            videoId: id,
            playerVars: {
                autoplay: 1,
                autohide: 1,
                modestbranding: 0,
                rel: 0,
                showinfo: 0,
                controls: 0,
                disablekb: 1,
                enablejsapi: 1,
                iv_load_policy: 3
            },
            events: {
                'onReady': onPlayerReady,
            }
        })
    }

    // make this global
    window.onPlayerReady = function(event) {
        event.target.mute();
    }

    // Load YouTube SDK if not loaded
    if (!window.YT) {
        $.getScript("https://www.youtube.com/iframe_api");
        // update the global function to call cb
        window.onYouTubeIframeAPIReady = cb;
    // call cb()
    } else {
        window.onYouTubeIframeAPIReady = () => { }; // set it to dummy function
        cb();
    }

}