Demo : jPlayer as video playlist and audio playlist players

jPlayer as video playlist and audio playlist players

In this demo jPlayer is combined with HTML and CSS, along with javascript code to add playlist functionality to a video and audio player.

You can easily customise the way they look and make it fit your pages colours and style.

This demo will use the HTML solution if it can, otherwise the Flash fallback solution will be used. The supplied media formats are WebMv, OGV and M4V for video. MP3 and OGA for audio.

Additional $.jPlayer.event.play event handlers have been used to avoid both jPlayers playing together.

The playlist item object can include an optional {free:true} property to make the media easily available via a right-click. (Ctrl+click on Mac.) Note that all media is freely available since it is distrubuted over the internet, it just makes it easier for a novice to obtain the media. Direct clicks are disabled, otherwise the browser attempts to play the media directly in the browser and leaves the current page. (A server/backend Guru could make it very hard to get the media directly if they wanted, but that is for them to figure out.)

Press play to start the media.

Update Required To play the media you will need to either update your browser to a recent version or update your Flash plugin.

Media used in demo:
© 2008 Blender Foundation - bigbuckbunny.org
© 2003-2004 Disney / Pixar - pixar.com

The Audio player below is a different jPlayer instance to the one used above in the video player. Note that the playlist JavaScript code has been written to facilitate multiple playlist instances, as this page demonstrates.

Note that the {wmode:"window"} option is set to ensure playback in Firefox 3.6 with the Flash solution. However, the OGA format would be used in this case with the HTML solution.

Press play to start the media.

Update Required To play the media you will need to either update your browser to a recent version or update your Flash plugin.