YouTube Iframe Api Javascript 错误，因为加载时间

Question

我目前正在我的网站中实现 Youtube iFrame API。这一切都很好。一切正常，所有功能都正常工作，但我仍然收到 javascript 错误。

这些功能不会破坏网站上的任何功能或任何东西，所有功能都在发挥作用。错误表明它们无法识别 YT 函数。

错误 1：

Uncaught TypeError: Cannot read property 'getDuration' of undefined

导致错误1的代码（正确定义了endSeconds和startSeconds：

var duration = player.getDuration() - (player.getDuration() - endSeconds) - startSeconds;

错误 2：

Uncaught TypeError: Cannot read property 'mute' of undefined 

导致错误 1 ​​的代码

player.mute();

getDuration() 和 mute() 都是 API 描述的函数，正如我所说，该功能有效。所以我的问题是为什么我会收到这些错误，我需要一些帮助来修复它们。

---

对于上下文，我将在此处包含部分 html 和 js 代码

HTML

<aside class="showcase">
    <div id="player"></div>
    <div class="grid">
        <div class="eq"></div>
        <div class="timebar">
            <div vlass="current_time"></div>
        </div>
    </div>
</aside>

JS

/* Load the player */
    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 done = false;
    var player;
    var videoId = 'A3PDXmYoF5U';
    var startSeconds = 5;
    var endSeconds = 293;
    var setVolume = 15;
    var suggestedQuality = 'large';
    function onYouTubeIframeAPIReady() {
          player = new YT.Player('player', {
          height:  ($(window).width() / 16) * 9 + 35,
          width: '100%',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
    }

    function onPlayerReady(evt) {
        player.loadVideoById({'videoId': videoId, 'startSeconds': startSeconds, 'endSeconds': endSeconds, 'suggestedQuality': suggestedQuality });
        evt.target.playVideo();
    }

    /* Soundcheck */
    function onPlayerStateChange(event) {
        var done = false;

        if (event.data == YT.PlayerState.PLAYING && !done) {
            if (player.isMuted()){
                $(".eq").addClass("mute");  
            }

            if (player.getVolume() > setVolume) {
                player.setVolume(setVolume);
            } 
            done = true;
        }

        /* Loop function */
        if (event.data == YT.PlayerState.ENDED && !done) {
            player.seekTo(startSeconds, true);
            done = true;
        }
     }

    /* Reponsive sizes */ 
    $(document).on("ready", function() {
        $(window).on("resize", function() {
            $(".showcase iframe").attr("height", ($(window).width() / 16) * 9 + 35 );

            $(".showcase").css({
                "height": (($(window).width() / 16) * 9 + 35) + "px",
                "max-height": ( $(window).height() + 39 - 26) + "px"
            });

            $(".admin-bar .showcase").css({
                "max-height": ( $(window).height() + 39 - 58) + "px"
            });
        }).trigger("resize")        
    }).trigger("ready")

    /* Timebar */
    window.setInterval(function(){
        var duration = player.getDuration() - (player.getDuration() - endSeconds) - startSeconds;
        var currentTime = player.getCurrentTime() - startSeconds;
        $(".current_time").css({
            "width": ( currentTime / duration ) * 100 + "%"
        });
    }, 100);


    /* Mute button */
    $(".eq").on("click", function(){
        if( $(".eq").hasClass("mute")) {
            player.unMute();
            $(".eq").removeClass("mute");
        } else {
            player.mute();
            $(".eq").addClass("mute");
        }
    }).trigger("click")

Answer 1

找到了！由于 YouTube API 有时需要一段时间才能加载它的函数尚未加载到 document.ready。

我在 document.ready 上触发其他功能，然后立即在浏览器中触发它们。这有时是 YouTube 的 API 加载和功能被识别的早期方式。

每次错误的数量也不同。例如有时显示 6 次，有时显示 10 次。在了解了上述内容之后，这是有道理的，因为 API 有时比其他时候更快。

还解释了为什么这些函数可以正常工作，因为最终这些函数将被加载到浏览器中。

我该如何解决这个问题？只需在加载视频时触发功能，对于我的 2 个功能（静音按钮和时间栏），当视频开始播放时。

function onPlayerStateChange(event) {
var done = false;

if (event.data == YT.PlayerState.PLAYING && !done) {

    // SOUNDCHECK
    if (player.isMuted() == false){
        $j(".eq").addClass("mute"); 
    }

    if (player.getVolume() > setVolume) {
        player.setVolume(setVolume);
    } 

    // MUTE BUTTON
    $j(".eq").on("click", function(){
        if( $j(".eq").hasClass("mute")) {
            player.unMute();
            $j(".eq").removeClass("mute");
        } else {
            player.mute();
            $j(".eq").addClass("mute");
        }
    }).trigger("click")

    // TIMEBAR
    window.setInterval(function(){
        var duration = player.getDuration() - (player.getDuration() - endSeconds) - startSeconds;
        var currentTime = player.getCurrentTime() - startSeconds;
        $j(".current_time").css({
            "width": ( currentTime / duration ) * 100 + "%"
        });
    }, 100);

    done = true;
}

这样就不会在 API 仍在加载时无法识别函数，因为在 API 正确加载到浏览器之前函数不会触发。