Question

我试图在AJAX加载标签内的Flexslider中有多个Youtube视频（在iframe中）（我喜欢让事情复杂化）。每个选项卡都是一个单独的html文件。视频的Flexslider在您第一次加载页面时起作用，但如果您在标签之间导航，则箭头按钮不再在视频之间导航，我收到以下错误：未捕获的TypeError：无法读取未定义的属性“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)                    
        }   
    });

开始时，深层次为3级：Flexslider内部的多个Youtube视频

0 个答案: