JQuery Cycle Plugin 意外恢复答案

【问题标题】：JQuery Cycle Plugin resuming unintentionallyJQuery Cycle Plugin 意外恢复
【发布时间】：2013-01-17 01:22:47
【问题描述】：

我希望在包含 YouTube 视频的幻灯片中添加一张幻灯片。它应该：

鼠标悬停
播放 YouTube 视频时暂停
包含分页

我为幻灯片使用了 JQuery Cycle 插件。 http://jquery.malsup.com/cycle/

并使用了 YouTube 的 iframe API https://developers.google.com/youtube/iframe_api_reference

幻灯片暂停和恢复正确播放/暂停视频；但是，如果您将鼠标移出视频幻灯片，它将恢复。

有没有办法使用 JQuery Cycle 插件来防止这种情况发生？

谢谢。

<!-- added to example from http://jquery.malsup.com/cycle/ -->

<html>
<head>
<title>JQuery Cycle Plugin - with YouTube</title>

<style type="text/css">
.slideshow { height: 232px; width: 232px; margin: auto }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
/* slideshow pagination */
#nav_slideshow { width: 232px; margin: auto }
#nav_slideshow a { border: 1px solid #ccc; background: #fc0; text-decoration: none; margin: 0 5px; padding: 3px 5px;  }
#nav_slideshow a.activeSlide { background: #ea0 }
#nav_slideshow a:focus { outline: none; }
</style>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
    <script type="text/javascript">

      var theslideshow;
      $(document).ready(function() {
        theslideshow = $(".slideshow")
            .before('<div id="nav_slideshow">')
            .cycle({
                fx: 'fade',
                pause: true,  // pause on mouseover - will still fire resume 
                              // after cycle('pause') is called to play video 
                              // then if user leaves YouTube's iframe it resumes slideshow
                timeout: 2500,
                speed: 2500,
                sync: 1,
                pager:  '#nav_slideshow'
            });
      }); 

      // Access YouTube's APIs
      // https://developers.google.com/youtube/iframe_api_reference
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          events: {
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // pause slide show when youtube video is playing <-- not working yet!
      // mouseout event triggers resume in Cycle's pause on mouseover
      function onPlayerStateChange(event){
        console.log(event.data);
        if(event.data == '1') {
            theslideshow.cycle('pause');
        } else if((event.data == '0') || (event.data == '2')) {
            theslideshow.cycle('resume');
        }
      }

    </script>
    </head>
    <body>
        <div class="slideshow">
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
            <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />
            <iframe id="player" width="560" height="315" src="http://www.youtube.com/embed/7CGQzQuH4X4?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
        </div>
    </body>
    </html>

【问题讨论】：

标签： jquery youtube cycle

【解决方案1】：

不是精确问题的解决方案 - 而是一个简单的替代方案。

由于您使用循环 - 升级到循环 2 - http://jquery.malsup.com/cycle2/ - youtube 视频已经有一个循环 2 扩展（检查下载部分）。

您可以使用 90% 的代码，因为语法大体相同 - 除了一些新选项（很少有被重命名）。

【讨论】：