Question

我有一个可以在离线情况下部署的页面，并希望处理在屏幕上的特定容器中播放YouTube视频。我不想从youtube加载iframe_api直到它需要，因为它很可能不会。

function EmbedAndPlay_Youtube(videoid, container) {
// todo: allow script caching
$.getScript("//www.youtube.com/iframe_api")
    .fail(function () {
        // some kind of alert to the user ...
    })
    .done(function () {
        var $container = $(container);
        var w = $(container).width(),
            h = $(container).height(),
            player = new YT.Player('ytvideo', {
                height: h,
                width: w,
                videoId: videoid,
                events: {
                    'onReady': function (event) {
                        event.target.playVideo(); 
                    }
                }

            });
    });
}

有时，根据平台及其网络功能，我得到一个脚本未定义的错误，我认为意味着“完成”函数在youtube脚本完成执行之前已执行

在调用“done”方法之前，有没有办法确保加载的脚本已经完成执行？

Answer 1

你的问题是，在url //youtube.com/player_api中加载async的脚本异步加载另一个脚本（JS播放器本身定义了YT.Player）。在您的情况下，加载脚本时会调用done()回调，但可能尚未加载播放器脚本。（从技术上讲，//youtube.com/player_api中的脚本只是一个加载器）

要安全使用YT.Player，请将您的回调绑定到window.onYouTubeIframeAPIReady，这是由YouTube的脚本调用的：

function EmbedAndPlay_Youtube(videoid, container) {
    $.getScript("//www.youtube.com/iframe_api")
    .fail(function () {
        // some kind of alert to the user ...
    })
    .done(function () {
        window.onYouTubeIframeAPIReady = function () {
            var $container = $(container);
            var w = $(container).width(),
            h = $(container).height(),
            player = new YT.Player('ytvideo', {
                height: h,
                width: w,
                videoId: videoid,
                events: {
                    'onReady': function (event) {
                        event.target.playVideo(); 
                    }
                }
            });
        }
    });
}

按需加载youtube iframe_api，然后使用它

1 个答案: