2

我试图在 AJAX 加载选项卡内的 Flexslider 中包含多个 Youtube 视频（在 iframe 中）（我喜欢让事情变得复杂）。每个选项卡都是一个单独的 html 文件。首次加载页面时，视频的 Flexslider 工作，但如果您在选项卡之间导航，箭头按钮不再在视频之间导航，我收到以下错误： 未捕获的类型错误：无法读取未定义的属性 'stopVideo'

我认为 onYouTubeIframeAPIReady() 函数如何索引视频和 stopVideo 函数（如果用户点击上一个或下一个箭头停止视频播放）不知道该调用什么是一个问题。我试过清空播放器数组并手动调用这个函数，但它没有帮助。

如果您想查看当前的外观，可以点击此链接并单击选项卡 7 和 8，因为它们是当前包含内容的选项卡：

http://desertsolchinooks.com/litter_fall2012_sungod8.html

我对这一切还是个新手，并且已经从这个论坛学到了很多东西，但是我希望你们能帮助解决这个一直困扰我的问题。提前致谢！

<div class="flexslider">                  
              <ul class="slides">
                <li><iframe id="1" class="youtube" src="http://www.youtube.com/embed/ezHdquVu518?rel=0&loop=0&wmode=opaque" width="720px" height="405px" frameborder="0" allowfullscreen></iframe></li>  
                <li><iframe id="2" class="youtube" src="http://www.youtube.com/embed/FzofvLLS92I?rel=0&loop=0&wmode=opaque" width="720px" height="405px" frameborder="0" allowfullscreen></iframe></li>                                        
              </ul>                                        
</div><!-- /flexslider -->

// ------ Youtube iframe API
function onYouTubeIframeAPIReady(){
    $('iframe.youtube').each(function(i){
        var player = new YT.Player($(this).get()[0], {
            events: {
                //'onReady': myYT.onPlayerReady,
                'onStateChange': myYT.onPlayerStateChange
            }
        });
        // Reference each iframe and store the object for retrieval
        $(this).data('index', i);
        myYT.players.push(player);
    });
}

var myYT = {
    done: false,
    initFlag: true,
    init: function(){
        // Insert script on first run
        if (myYT.initFlag) {
            var tag = document.createElement('script');
            tag.src = "https://www.youtube.com/iframe_api";
            var firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
            myYT.initFlag = false;
        }
    },
    players: [],
    onPlayerStateChange: function(event) {
        function stopVideo(event){
            myYT.stopVideo(event.target);
        }
    },
    stopVideo: function(player) {
            if (typeof player.stopVideo === 'function') {
                player.stopVideo();
            }
    }
};

myYT.init();


// --------- Flexslider script
    $('#videoSlider .flexslider').flexslider({
        animation: 'slide',
        selector: '.slides iframe',                                         
        slideshow: false,                   
        before: function(slider){

            // Stop all youtube videos in this slideshow
            // Use the 'index' data in each instance, to access object in myYT.players array
            slider.slides.filter('iframe.youtube').each(function(){
                myYT.stopVideo(myYT.players[$(this).data('index')]);
            });

            nextSlide = slider.slides.eq(slider.animatingTo)                    
        }   
    });
4

0 回答 0