Javascript YouTube API - 加载播放器

Question

我的网站上有一个 YouTube 视频列表，每个列表项如下所示:

<div class="video_item" id="<YouTubeVideoID>"> 
    // video thumbnail and information
</div>

如果用户点击其中一个视频项目，面板会下拉，并且应该加载 API 并显示视频播放器，一旦面板完成其滑动操作:

$(document).ready(function(e) {
    $('.video_item').live('click', function() {
        var vid_id = $(this).attr('id');
        if (vid_id) {
            $("html").animate({ scrollTop: $('#main').offset().top-20 }, 1000, function() {
                setTimeout(function() {
                    $('.video_drop_panel_wrap').slideDown('slow', function() {

                        var tag = document.createElement('script');
                        tag.src = "http://www.youtube.com/iframe_api";
                        var firstScriptTag = document.getElementsByTagName('script')[0];
                        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

                        var player;
                        function onYouTubeIframeAPIReady() {
                          player = new YT.Player('youtube_player', {
                            height: '371',
                            width: '570',
                            videoId: vid_id,
                            events: {
                              'onReady': onPlayerReady
                            }
                          });
                        }

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

问题是，它不会显示播放器，而且我的 JS 开发人员控制台中也没有收到任何错误。我已经测试了 API 和没有所有下拉面板的播放器并且确实有效 - 只是不是我想要的地方。我不确定这是 DOM 问题还是其他问题。如果有人能发现我做错了什么，我将不胜感激……哦，并告诉我哪里出了问题。

Answer 1

错误发生是因为你的 onYouTubeIframeAPIReady()在全局范围内不存在，它只存在于 $('.video_drop_panel_wrap').slideDown('slow', function() {...}) 内部. api的懒加载相当于放在了<script>里面从范围的 Angular 标记，以便它搜索全局函数。

您可以重构您的代码，以便在 onYouTubeIframeAPIReady() 时触发它指向有关您要加载的视频的信息。

大约一旦加载了 api，您就会得到

<script> 
       //Youtube api stuff
         (function(){
             //Do Stuff
             onYouTubeIframeAPIReady();
         })();
</script>
<script>
       $(document).ready(function(){'Your Stuff Here'})
</script>

因此，当进行 API 就绪调用时，它不知道它来自的上下文，因为它源自它自己的独立函数。

粗略的解决方案可能是更改 var player 下方的代码到

onYouTubeIframeAPIReady = function(){
  player = new YT.Player('youtube_player', {
    height: '371',
    width: '570',
    videoId: vid_id,
    events: {
      'onReady': onPlayerReady
    }
  });
}

因为它是在没有使用 var 的情况下定义的声明如果在作用域链中找不到同名变量，则将在全局作用域中创建该变量。 onPlayerReady不需要相同的处理，因为它存在于 onYouTubeIframAPIReady 时已创建(本地范围)。