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必须在全球范围内可用。

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

＆＃13;

 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')

＆＃13;

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

＆＃13;

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

}

Youtube iframe Api无法在函数内工作

1 个答案: