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

Question

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

未捕获的类型错误：$(...).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

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

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