HTML5 Audio & Video for jQuery

jPlayer 2.9.2 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"} : {supplied:"rtmpv"}

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"} : {solution:"aurora"}

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"}

Playlist add-on documentation: jPlayerPlaylist Guide

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.

Demo variants: Multiple Audio jPlayers : Without pauseOther

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 with jQuery UI

This demo uses jQuery UI ThemeRoller widgets, allowing developers to customise the look and feel by rolling their own theme. We have used the Slider Widget for the play progress and the volume controls, and Framework Icons for the buttons.

jPlayer as an audio live-stream player

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

jPlayer works with Icecast and ShoutCast servers that serve MP3 or M4A (AAC) audio.

Popcorn jPlayer Player Plugin

In this demo Popcorn is used with the Popcorn jPlayer Player Plugin and the Popcorn Subtitle Plugin along with the usual HTML and CSS to create a video player.

The Popcorn Subtitle Plugin will display subtitles over the video as it plays.

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

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.