Using jQuery to play/stop YouTube multiple iframe players
I am trying to play/stop multiple YouTube iframe players on a single page. I can start the players automatically (i.e. through a custom method called loadYouTubeVideo(playerID)) upon clicking, but I am not sure how I can get access to the player objects again from another function call (i.e. through a custom method called unloadYouTubeVideo(playerID))
Here is the jsfid开发者_Python百科dle with what I am talking about: http://jsfiddle.net/iwasrobbed/9Dj8c/3/
So each player starts, but it continues to play even after the div containing it is hidden.
By the way, I am using the iframe version of the player for a reason, so answers telling me to 'just use the flash object embed version' of the player are not acceptable for this question.
Code here in case jsfiddle is not available:
<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>
I have created a function which access framed YouTube videos through the ID of the parent of the iframe (as specified in the YT Frame API), and executes the functions defined at the JS API.
See this answer for the code and a detailled Q&A section.
My code would be implemented in this way:
callPlayer(playerID, "stopVideo");
加载中,请稍侯......
精彩评论