3

我的网站上有一个 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 问题还是其他问题。如果有人能发现我做错了什么，我会很感激一巴掌……哦，告诉我哪里错了。

4

2 回答 2

3

发生错误是因为您onYouTubeIframeAPIReady()在全局范围内不存在，它只存在于$('.video_drop_panel_wrap').slideDown('slow', function() {...}). api 的延迟加载相当于<script>从作用域的角度将其放置在标签内，因此它会搜索全局函数。

您可以重构您的代码，以便在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创建时存在（本地范围）。

于 2012-10-29T03:00:33.803 回答
0

尝试使用这个插件...... https://code.google.com/p/jquery-ytiframetracker/

于 2013-03-26T13:45:53.990 回答