Question

当我在flexslider中嵌入youtube视频时，我正试图暂停flexslider的幻灯片放映。我尝试了以下代码但是当我点击下一个/上一个按钮时出现此错误..您可以看到jsfiddle

未捕获TypeError：$（...）。data（...）。pauseVideo不是函数

js代码

var slider, // Global slider value to force playing and pausing by direct access of the slider control
canSlide = true; // Global switch to monitor video state

// Load the YouTube API. For some reason it's required to load it like this
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// Setup a callback for the YouTube api to attach video event handlers
window.onYouTubeIframeAPIReady = function(){
    // Iterate through all videos
    $('.flexslider iframe').each(function(){
        // Create a new player pointer; "this" is a DOMElement of the player's iframe
        var player = new YT.Player(this, {
            playerVars: {
                autoplay: 0
            }
        });

        // Watch for changes on the player
        player.addEventListener("onStateChange", function(state){
            switch(state.data)
            {
                // If the user is playing a video, stop the slider
                case YT.PlayerState.PLAYING:
                    slider.flexslider("stop");
                    canSlide = false;
                    break;
                // The video is no longer player, give the go-ahead to start the slider back up
                case YT.PlayerState.ENDED:
                case YT.PlayerState.PAUSED:
                    slider.flexslider("play");
                    canSlide = true;
                    break;
            }
        });

        $(this).data('player', player);
    });
}

// Setup the slider control
slider = $(".mainslider")
    .flexslider({
        animation: "fade",
        easing: "swing",
        slideshowSpeed: 6500,
        animationSpeed: 900,
        pauseOnHover: true,
        pauseOnAction: true,
        touch: true,
        video: true,
        controlNav: true,
        animationLoop: true,
        slideshow: true,
        useCSS: false,
        // Before you go to change slides, make sure you can!
        before: function(){                     
            if(!canSlide)
                slider.flexslider("stop");
        }
    });

slider.on("click", ".flex-prev, .flex-next", function(){
    canSlide = true;
    $('.flexslider iframe').each(function(){
        $(this).data('player').pauseVideo();
    });
});

Answer 1

您只需要在iframe src的末尾添加？enablejsapi = 1即可。 <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/QoRHFajeDek?enablejsapi=1"></iframe>

http://jsfiddle.net/x8zycbqp/9/

播放youtube视频时暂停flexslider幻灯片

1 个答案: