使用jQuery播放/停止的YouTube多個iframe的球員

我試圖播放/停止在單頁上多個YouTube的iframe的球員。我可以自動啓動播放器（即通過所謂的loadYouTubeVideo(playerID)一個自定義的方法）一旦點擊，但我不知道該玩家從另一個函數調用再次對象我如何可以訪問（即通過所謂的unloadYouTubeVideo(playerID)一個自定義的方法）使用jQuery播放/停止的YouTube多個iframe的球員

這裏是我談論的jsfiddle：http://jsfiddle.net/iwasrobbed/9Dj8c/3/

所以每個玩家都會開始，但是即使在包含它的div被隱藏之後它仍會繼續玩。

順便說一句，我使用的球員是有原因的iframe的版本，所以答案告訴我「只是使用閃光燈對象嵌入版」的玩家是不是這個問題可以接受的。

代碼在這裏情況下的jsfiddle不可用：

<html> 
<body> 
<script> 
$(document).ready(function(){ 
// YouTube Player API adapter 
$.getScript('http://www.youtube.com/player_api'); 

loadYouTubePlayer = function(playerID) { 
    the_player = new YT.Player(playerID, { 
    events: { 'onReady': playYouTubeVideo } 
    }); 
}; 

unloadYouTubePlayer = function(playerID) { 
    // This is the part that's broken 
    $(playerID).stopVideo(); 
}; 

function playYouTubeVideo(event) { 
    event.target.playVideo(); 
} 

$('.show_player').click(function() { 
    var idType = 'data-video-id'; 
    var id = $(this).attr(idType); 

    $(this).fadeOut('fast', function() { 
     $('.hidden_player['+idType+'='+id+']').fadeIn('fast', function() { 
      loadYouTubePlayer('the_player'+id); 
      $('.stop_player['+idType+'='+id+']').fadeIn('fast'); 
     }); 
    }); 
}); 

$('.stop_player').click(function() { 
    var idType = 'data-video-id'; 
    var id = $(this).attr(idType); 

    $(this).fadeOut('fast', function() { 
     $('.hidden_player['+idType+'='+id+']').fadeOut('fast', function() { 
      unloadYouTubePlayer('the_player'+id); 
      $('.show_player['+idType+'='+id+']').fadeIn('fast'); 
     }); 
    }); 
}); 

}); 
</script> 

<div class="hidden_player" data-video-id="0" style="display:none"> 
    <iframe id="the_player0" width="640" height="360" frameborder="0" src="http://www.youtube.com/embed/2ktsHhz_n2A" type="text/html"></iframe> 
</div> 
    <p><a href="#" class="show_player" data-video-id="0">Show video 0 and start playing automatically</a></p> 
    <p><a href="#" class="stop_player" data-video-id="0" style="display:none">Stop video 0 from playing</a></p> 

    <br/><br/>  

<div class="hidden_player" data-video-id="1" style="display:none"> 
    <iframe id="the_player1" width="640" height="360" frameborder="0" src="http://www.youtube.com/embed/2ktsHhz_n2A" type="text/html"></iframe> 
</div> 
    <p><a href="#" class="show_player" data-video-id="1">Show video 1 and start playing automatically</a></p> 
    <p><a href="#" class="stop_player" data-video-id="1" style="display:none">Stop video 1 from playing</a></p> 

</body> 
</html>

來源

2011-09-23 iwasrobbed

去爲全屏馬賽克rickroll，是嗎？ –

我創建了訪問都通過iframe的父（作爲YT框架API中指定的ID框架YouTube視頻的功能），並且執行在JS API定義的函數。

的代碼和一個的相關詳細Q & A節見this answer。

我的代碼會以這種方式來實現：

callPlayer(playerID, "stopVideo");

來源

2011-09-23 16:32:10

感謝羅布！這是一個很好的例子入手！ – iwasrobbed

使用jQuery播放/停止的YouTube多個iframe的球員

回答

相關問題