Question

我正在使用flexslider插件来展示图片和视频。幻灯片会自动更改，对我来说很好。问题是，当用户播放视频（来自youtube的iframe）时，flexslider会继续更改幻灯片。

我查看了文档，发现了pauseOnHover，这有点诀窍，但我更倾向于在视频启动时暂停，并在视频暂停/结束时继续。关于如何处理这个的任何建议？

修改

这是打开iframe的div：

<div class="span6 animated fadeInLeftBig" id="main-media">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/someID?version=3&enablejsapi=1" frameborder="0" allowfullscreen id="iframe-id"></iframe>
     </div>

Answer 1

解决此问题的最佳方法是使用YouTube API，如下所示：

//Implement Youtube API
(function(){ 
  var s = document.createElement("script");
  s.src = "http://www.youtube.com/player_api"; /* Load Player API*/
  var before = document.getElementsByTagName("script")[0];
  before.parentNode.insertBefore(s, before);
})();

var YT_ready=(function(){var b=[],c=false;return function(a,d){if(a===true){c=true;while(b.length){b.shift()()}}else if(typeof a=="function"){if(c)a();else b[d?"unshift":"push"](a)}}})();
YT_ready(function() {
    (function($) {
            var frameID = "yourIframeID"
            var player = new YT.Player(frameID, {
                    events: {
                        "onStateChange": function(event) {
                            if (event.data == 1 || event.data == 3) {
                                $('.flexslider').flexslider("pause");
                            }
                            else if (event.data == 0 || event.data == 2 || event.data == 5) {
                                $('.flexslider').flexslider("play");
                            }
                        }
                    }
                });
        });



    })(jQuery);
function onYouTubePlayerAPIReady() {
    YT_ready(true)
}

播放视频时停止flexslider

1 个答案: