YouTube IFrame API 并不总是加载? [英] YouTube IFrame API doesn't always load?

问题描述

我见过很多与此类似的问题，但我相信这是不同的.当我尝试在全局范围内定义 onYouTubeIframeAPIReady 时，该函数仅在我加载页面的一半时间被调用(如果我不断刷新，有时我会看到控制台消息，有时则不是没有).令我感到困惑的是，这只是有时发生，而且我不会在代码中的任何其他地方调用 onYouTubeIframeAPIReady.

I've seen lots of similar questions to this, but I believe this is different. When I try to define onYouTubeIframeAPIReady in the global scope, the function only gets called about half the times I load the page (if I keep refreshing, sometimes I'll see the console message, and sometimes it isn't there). It's confusing to me that this only happens sometimes, and I don't call onYouTubeIframeAPIReady anywhere else in my code.

我检查过的问题区域:

• 我在 Github Pages 上运行它(所以它不是本地的)
• 函数定义在全局作用域

我的代码如下:

window.onYouTubeIframeAPIReady = function() {
    console.log("YouTube API Ready");

    player = new YT.Player('player', { // TODO: Sometimes this doesn't work
        videoId: curVideoId,
        playerVars: {
            controls: 1,
            autoplay: 0,
            disablekb: 1,
            enablejsapi: 1,
            iv_load_policy: 3,
            // modestbranding: 1,
            showinfo: 1
        }
    }); 

    ytLoaded = true;

    if (windowWidth) { // if document loaded first
        resizePlayer();
    }
}

推荐答案

这听起来很可疑，就像您通过 DOM 标签中的 src 属性加载 API 库，而不是建议的将其动态添加到 DOM 的方法在页面加载之后，或者您在创建播放器对象所针对的 DOM 元素之前加载库......因为在库加载自身后就会调用 onYouTubeIframeAPIReady 函数，所以这种可能性始终存在，如果您尝试通过标签上的 src 属性加载库，它将在您的函数实际注册之前或(在这种情况下)'player' 元素存在于 DOM 之前加载并调用该函数.工作代码看起来像这样(放置在页面底部附近......绝对在您尝试创建 iframe 的元素下方):

This sounds suspiciously like you're loading the API library via a src attribute on a in your DOM tag rather than the suggested way of dynamically adding it to the DOM after the page has loaded, or that you're loading the library before the DOM element that the player object is targeting has been created ... because the onYouTubeIframeAPIReady function is called as soon as the library loads itself, the possibility always exists that, if you try loading the library via a src attribute on a tag that it'll load and call the function before your function is actually registered or before the (in this case) 'player' element exists in the DOM. Working code would look something like this (placed near the bottom of your page ... definitely below the element you're trying to create the iframe in place of):

<div id="player"></div>
<script>
 var tag = document.createElement('script');
 tag.src = "https://www.youtube.com/iframe_api";
 var firstScriptTag = document.getElementsByTagName('script')[0];
 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

 var player;
 window.onYouTubeIframeAPIReady = function() {
    console.log("YouTube API Ready");

    player = new YT.Player('player', { 
        videoId: curVideoId,
        playerVars: {
            controls: 1,
            autoplay: 0,
            disablekb: 1,
            enablejsapi: 1,
            iv_load_policy: 3,
            // modestbranding: 1,
            showinfo: 1
        }
    }); 

    ytLoaded = true;

    if (windowWidth) { // if document loaded first
        resizePlayer();
    }
 };
</script>

如果我错了，那就是加载库的方式，那么您需要在 Chrome Dev Tools 或 firebug 中进行监控，以查看库何时加载相关当 DOM 元素存在时.

If I'm wrong, and that is how you're loading the library, then you'll want to monitor in Chrome Dev Tools or firebug to see when the library is getting loaded in relation to when the DOM element exists.

这篇关于YouTube IFrame API 并不总是加载?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！