jquery youtube api - when a video stops playing i want it to disappear
This is my jquery code:
/* videoplayer controls */
$('#sjvslider li a').bind('click', function() {
$('#sjvslider li a').removeClass('active');
$(this).addClass('active'); // sets the thumbnail that what just clicked.
var vidNum = $(this).attr('rel');
var myVid = $("#video"+vidNum+"").html();
$('.videoplayer').html(myVid);
});
This is my HTML:
<div id="videoDiv" class="videoplayer"></div>
<div id="video1" >
<object width="508" height="273" id="myytplayer" data="http://www.youtube.com/v/CezWPkoWXbY?version=3&hl=en_US&rel=0&enablejsapi=1&playerapiid=ytplayer">
<param name="allowscriptaccess" value="always">
<param name="bgcolor" value="#000">
</object>
</div>
<div id="video2" class="novideo">
<object width="508" height="273" id="myytplayer" data="http://www.youtube.com/v/qhluM6nrCVs?version=3&enablejsapi=1&playerapiid=ytplayer">
<param name="allowscriptaccess" value="always">
<param name="bgcolor" value="#000">
</object>
</div>
And then i have some links with some textlinks to get the right videoID.
<开发者_如何学JAVAul id="sjvslider">
<li><a href="#" rel="1">VIDEO 1</a></li>
<li><a href="#" rel="2">VIDEO 2</a></li>
</ul>
Ultimately what I want to do is after the user clicks one of these links and plays the video, when the video stops playing i want it to disappear because I have a background image underneath the videos that i want to show again.
Is there some way to do this with jquery, perhaps accessing the youtube api?
Yup, you want to add an event listener using the API's player.addEventListener()
method and listen for the onStateChange event. It broadcasts a number (0 for stopped, 2 for paused, etc.) based on the player's state (playing, paused, ended, etc.). When that event is triggered by the "stop" state, you can fire a jQuery function to .hide()
or .remove()
or whatever your movie container.
http://code.google.com/apis/youtube/js_api_reference.html#Events (the player.addEventListner() documentation is right above this anchor on that page, FYI. Easy to miss otherwise).
EDIT: note that you'll need to enable the YouTube API for the embedded video as described here.
精彩评论