0

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>
4

1 に答える 1

3

これを解決する最善の方法は、次のような 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)
}
于 2013-06-26T09:40:10.167 に答える