Vimeo仍然在玩froogaloop api卸載

我在一個畫廊使用基礎4框架與顯示模式作爲燈箱效果主持幾個vimeo視頻。不幸的是，在每個模式關閉後，視頻會繼續播放。Vimeo仍然在玩froogaloop api卸載

我還是jquery的新手，所以我用Froogaloop api（https://developer.vimeo.com/player/js-api）卸載每個vimeo視頻，但我無法讓它工作。

這裏是我的代碼：

 //Vimeo Froogaloop API event handler 
     function ready(player_id) { 
      var player = $f(player_id), 

      play = document.getElementById('play'), 
      pause = document.getElementById('pause'), 
      unload = document.getElementById('unload'); 

      play.addEventListener('click', function() { 
       player.api('play'); 
      }); 

      pause.addEventListener('click', function() { 
       player.api('pause'); 
      }); 

      unload.addEventListener('click', function() { 
       player.api('unload'); 
       }); 
      } 

      window.addEventListener('load', function() { 
      //Attach the ready event to the iframe 
      $f(document.getElementById('player')).addEvent('ready', ready); 
     });

HTML：

 <!-- //Video Click Event --> 
     <div class="row"> 
      <div class="large-12 columns"> 
       <div id="myModal3" class="reveal-modal"> 
        <iframe id="player1" src="http://player.vimeo.com/video/62831216?api=1" width="720" height="406" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> 
        <a class="close-reveal-modal" id="unload" href="#">x</a> 
       </div>  
      </div> 
     </div>  

     <div class="row"> 
      <div class="large-12 columns"> 
       <p><img src="http://placehold.it/250x100" class="logo"></p> 
      </div> 
     </div> 



     <div class="row"> 
      <div class="large-12 columns">&nbsp;</div> 
     </div> 

     <div class="row"> 
      <div class="large-12 columns">&nbsp;</div> 
     </div> 



     <!-- //Foundation 4 Accordion --> 
     <div class="row"> 
      <div class="large-12 columns"> 
       <div class="section-container accordion" data-section="accordion"> 


        <section class="section"> 
         <div class="row"> 
          <div class="large-5 columns"><p class="title"><a href="#"><img src="http://placehold.it/301x248"></a></p></div> 
           <div class="large-7 columns"> 
            <p class="title"><a href="#">Name</a><br> Title</p> 
            <p class="quote">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac tempus libero."</p> 
           </div> 
          </div> 

          <div class="row"> 
           <div class="large-12 columns">&nbsp;</div> 
          </div> 

          <div class="content"> 
           <div class="row"> 
            <div class="large-12 columns">&nbsp;</div> 
           </div> 

          <div class="row"> 
           <div class="large-12 columns"> 
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus malesuada sapien ut nibh porttitor fringilla in sit amet risus. Curabitur euismod viverra elit sed pretium. Suspendisse laoreet tristique convallis. Aliquam erat volutpat. Morbi pharetra lobortis purus non elementum. Pellentesque mattis dignissim lectus in blandit. Duis facilisis vestibulum adipiscing. Suspendisse vulputate viverra consequat. In quis lorem ut tellus fringilla egestas. Etiam semper, dolor ut luctus dapibus, leo nunc scelerisque erat, eget aliquam dolor mauris ut risus. Nam non sem non libero laoreet bibendum quis in mi. Sed non nibh risus. Nunc id nunc felis. Maecenas eu est dui. In tortor justo, facilisis vel pulvinar a, bibendum vel tellus.</p> 
           </div> 
          </div> 

          <div class="row"> 
           <div class="large-12 columns">&nbsp;</div> 
          </div> 

          <div class="row"> 
           <div class="large-12 columns">&nbsp;</div> 
           </div> 

          <div class="row"> 
           <div class="large-12 columns"> 
            <a href="#" data-reveal-id="myModal3" data-animation="fadeAndPop" data-animationspeed="300" data-closeonbackgroundclick="true" data-dismissmodalclass="close-reveal-modal"> 
             <img src="http://placehold.it/720x406"> 
            </a> 

            <div class="row"> 
             <div class="large-12 columns">&nbsp;</div> 
            </div>  

            <div class="row"> 
             <div class="large-12 columns">       
               <p class="subheader"><b>Client</b><br> 
               <medium>"Title"</medium><br> 
               <small>Location</small></p> 
             </div> 
            </div> 
           </div> 
          </div> 

          <div class="row"> 
           <div class="large-12 columns">&nbsp;</div> 
          </div> 

          <div class="row"> 
           <div class="large-12 columns">&nbsp;</div> 
          </div> 

         </div> 
        </section> 

       </div> 
      </div> 
     </div>

來源

2013-04-03 user2076745

嘗試使用此

<script type="text/javascript"> 
jQuery(document).ready(function($) { 
    $('body').live('click',function(){ 
    if($('div.reveal-modal-bg').is(':visible')){ 
     var resourceVideo = $('#myModal iframe').attr('src'); 
     $('#myModal iframe').attr('src','').attr('src',resourceVideo); 
     }; 
    }) 
}); 
</script>

來源

2013-09-13 14:30:22

Vimeo仍然在玩froogaloop api卸載

回答

相關問題