HTML5 Audio & Video for jQuery

jPlayer 2.1.0 Demos

jPlayer as a video player

In this demo jPlayer is combined with HTML and CSS to create a video player.

You can easily customise the way it looks 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.

Demo variants: {solution:"flash, html"} : {supplied:"m4v"}

jPlayer as an audio player

In this demo jPlayer is combined with HTML and CSS to create an audio player.

You can easily customise the way it looks 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 M4A and OGA.

Demo variants: {solution:"flash, html"} : {supplied:"mp3"}

jPlayer circle player

In this demo jPlayer is combined with HTML and CSS to create a Circle Player, which plays audio.

When playing, the play progress is shown as a green ring around the circle. If the buffering information exists, then a white ring grows representing the download progress.

jPlayer as a video playlist player

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. OGA and MP3 for audio.

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.)

Demo variants: Audio Playlist : Multi Instanced Video and Audio Playlists

Experimental: Media Playlist : Media Playlist {solution:"flash, html"}

The jPlayerPlaylist Object: Demonstration of other features

Multi instanced jPlayer

In this demo jPlayer is instanced on the page in three places, demonstrating how multiple instances of jPlayer may be used on the same page.

All jPlayer instances will use the HTML solution if they can, otherwise the Flash fallback solution will be used. The supplied media formats are WebMv, OGV and M4V.

Each instance is individually affected by the iOS4.2+ restriction that a gesture must generate the play action. ie., The user must click play the 1st time for each instance on iOS 4.2+.

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

Custom $.jPlayer.event.repeat event handlers are used for the first two instances so that they either play the next instance or loop, depending on the state of the repeat button. The third instance is the usual way that you would insert a video player on a page with multiple instances.

Demo variants: Multiple Audio jPlayers

Text based player with track switching

In this demo jPlayer is used to create a simple text audio player.

The HTML uses a cssSelectorAncestor with the default cssSelector class names to enable the built in control association. Event handlers are used to control the text displayed, enabling the play state to be shown and the percentage of playback.

This demo will use the HTML solution if it can, otherwise the Flash fallback solution will be used. The supplied media format is MP3.

jPlayer's Development Tester

The development tester used to test the operation of different jPlayer methods. It is not perfect, and testing of the configuration options is not available without changing and uploading the new page.