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＆amp; 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正确加载到浏览器之前函数不会触发。

YouTube Iframe Api Javascript由于加载时间错误

1 个答案: