Make a video post redirect to next post after completion

Notes before

What you’re asking for is a highly complex thing:

  1. Load next post after WP internal Data finished, played with some 3rd party player
  2. Load next post after YouTube player (javascript or ActionScript) finished

The problem is not the redirect 1), but more how you want to know how & when to load the next post.

1) Which in fact(/imho) should be an ajax load & replace of the current post.

YouTube API

You can check if the video is finished with a simply javascript listener

player.getPlayerState()

Available Return values:

-1 // unstarted
0 // ended
1 // playing
2 // paused
3 // buffering
5 // video cued

Link to Google-YouTubeAPI function here

As an easy start: You need to a) have a listener that catches the player state when it changes and b) fires of the ajax call.

The ajax call would be a simple wordpress default call to reload the content of (for example) the parent div of the player. Just search through the archives here on the page if you don’t know how WP handles ajax requests.

// Example for the listener
// player is the var that holds your player - you'll need to set it
jQuery( player ) .on(
     'onStateChange'
    ,function( ev )
     {
        if ( 0 === ev )
        {
            // Perform the ajax next post load here
        }
     }
);

Internal (your personally hosted) videos

Here’s the real problem. You need a player that offers the same as the YouTube player: A possibility to retrieve a status change when the video playback was finished. This highly depends on the player and I’ve no recommendation at this point.

Your chance!

There’s the »JavaScript API for a chromeless player«. A quote from the YouTube API:

If your application is using a chromeless player, use the following URL to load the player in your application and enable JavaScript API handlers in the player. You can then build your own custom player controls using JavaScript:

A last note from YouTube.

To test any of these calls, you must have your file running on a webserver, as the Flash player restricts calls between local files and the internet.

Leave a Comment

error code: 523