javascript - Playing YouTube embedded videos consecutively on one page - Stack Overflow

admin管理员组

文章数量:1289901

I'm embedding YouTube videos onto my webpage with something like this

<object width="425" height="344">
    <param name="movie" value=""></param>
    <param name="allowFullScreen" value="false"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
</object>

If I have say 3 YouTube videos on the same webpage, I was wondering if it was possible (maybe with YouTube's API?) to play each video consecutively? That is, the first video starts to autoplay. When that video finishes, the second video on the webpage will play and then the third? Thanks for your time.

Reference: .html

I'm embedding YouTube videos onto my webpage with something like this

<object width="425" height="344">
    <param name="movie" value="http://www.youtube./v/RU-bMtPz1cY"></param>
    <param name="allowFullScreen" value="false"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube./v/RU-bMtPz1cY" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
</object>

If I have say 3 YouTube videos on the same webpage, I was wondering if it was possible (maybe with YouTube's API?) to play each video consecutively? That is, the first video starts to autoplay. When that video finishes, the second video on the webpage will play and then the third? Thanks for your time.

Reference: http://code.google./apis/youtube/js_api_reference.html

• javascript
• jquery
• youtube
• youtube-api

Share Improve this question Follow asked Feb 25, 2010 at 18:07 axsuulaxsuul 7,49099 gold badges5959 silver badges7272 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

See http://code.google./apis/youtube/js_api_reference.html#Events

You want to listen to the onStateChange event. note that when the value passed is 0, then the video has ended. Listen for that event/value to start the next video.

Just a basic outline of what you probably want to do:

1. add end listener for video
2. play video
3. when end event fired (and caught), go to next video and repeat from step 1.

You could use a jQuery plugin -- the jQuery YouTube TubePlayer Plugin

provided you have the right markup, (in this example - an an 'active' class on the video thats currently playing) you could basically set something up like..

jQuery("#player-container").tubeplayer({
    onPlayerEnded:function(){
        var $vid = jQuery(".active").next();
        if($vid.length){
            jQuery('#player-container').tubeplayer('play',vid.attr("vid");
            $vid.siblings().andSelf().removeClass("active");
            $vid.addClass("active");
        }
    }
});

You're going to want to create a playlist containing the videos you want to play and then embed that into your site. Direct instructions can be found here.

本文标签： javascriptPlaying YouTube embedded videos consecutively on one pageStack Overflow