javascript - 视频播放时停止 flexslider

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)
}