YT is not defined - Uncaught ReferenceError: [youtube api]

Question

Removed Unwanted Code DEMO

嘿， 我正在实施 Youtube 视频播放器 Api，我在控制台中看到某种错误。

不知道视频是怎么播放的，但我想知道为什么会出错？如果我将代码保留在骨架模式之外，就不会有任何错误。

有人可以遮光吗..

谢谢！！

JS :

(function($) {
    $(function(){
        var cVid, ytData1;
        var callFlexSlider = ({         
            embedVideos : function(){
                function explodeSlider(){
                    $('.sliderNew .flexslider').flexslider({
                        slideshow: false
                    });
                    $('.sliderNew #carousel, .sliderNew .flex-direction-nav').hide();
                }
                function explodeShow(){
                    $('.sliderNew .flexslider').flexslider({ 
                        slideshow: true
                    });
    $('.sliderNew #carousel, .sliderNew .flex-direction-nav').show();
                }
                function getArtistId() {
                    return window.artist_id;
                }
                function loadPlayer() {
                    if (typeof(YT) == 'undefined' || typeof(YT.Player) == 'undefined') {
                        var tag = document.createElement('script');
                        tag.src = "https://www.youtube.com/iframe_api";
                        var firstScriptTag = document.getElementsByTagName('script')[0];
                        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
                        window.onYouTubePlayerAPIReady = function() {
                            onYouTubePlayer();
                        };
                    }
                }
                var player;

                function onYouTubePlayer() {
                    player = new YT.Player('player', {
                        height: '335',
                        width: '940',
                        videoId: getArtistId(),
                        playerVars: {
                            controls: 1,
                            showinfo: 0,
                            rel: 0,
                            showsearch: 0,
                            iv_load_policy: 3
                        },
                        events: {
                            'onStateChange': onPlayerStateChange,
                            'onError': catchError
                        }
                    });
                }
                var done = false;

                function onPlayerStateChange(event) {
                    if (event.data == YT.PlayerState.PLAYING && !done) {
                        done = true;
                    } else if (event.data == YT.PlayerState.ENDED) {
                        location.reload();
                        event.target.destroy();
                    }
                }

                function onPlayerReady(event) {
                    console.log('playerReady Event')
                }

                function catchError(event) {
                    if (event.data == 100) console.log("...");
                }

                function stopVideo() {
                    //alert('asdsad');
                    //player.destroy();
                    player.stopVideo();
                    explodeShow();
                }

            },
            init : function(){
                this.embedVideos();
            }

    }); 
    callFlexSlider.init();
    });
})(jQuery);

Answer 1

调用这个loadPlayer()；在 document.ready 函数中尝试。

  function loadScript() {
                        if (typeof(YT) == 'undefined' || typeof(YT.Player) == 'undefined') {
                            var tag = document.createElement('script');
                            tag.src = "https://www.youtube.com/iframe_api";
                            var firstScriptTag = document.getElementsByTagName('script')[0];
                            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
                        }
                    }

                    function loadPlayer() {
                            window.onYouTubePlayerAPIReady = function() {
                                onYouTubePlayer();
                            };
                    }


$(function () {
  loadScript();
})

Answer 2

您始终可以在脚本链接的顶部手动定义它：

<script type="text/javascript" id="www-widgetapi-script" src="https://s.ytimg.com/yts/jsbin/www-widgetapi-vflS50iB-/www-widgetapi.js" async=""></script>
<script src="https://www.youtube.com/player_api"></script>

Answer 3

这就是我设法让 iframe api 工作的方式：

function loadVideo() {
  window.YT.ready(function() {
    new window.YT.Player("video", {
      height: "390",
      width: "640",
      videoId: "M7lc1UVf-VE",
      events: {
        onReady: onPlayerReady,
        onStateChange: onPlayerStateChange
      }
    });
  });

  function onPlayerReady(event) {
    event.target.playVideo();
  }

  function onPlayerStateChange(event) {
    var videoStatuses = Object.entries(window.YT.PlayerState)
    console.log(videoStatuses.find(status => status[1] === event.data)[0])
  }
}

$(document).ready(function() {
  $.getScript("https://www.youtube.com/iframe_api", function() {
    loadVideo();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="video"></div>