Cross Platform HTML5 Audio & Video Player For jQuery - jPlayer

jPlayer is a popular jQuery plugin which has been widely used in many online music or video websites.  It offers an easy way to help create cross platform HTML5 audio & video player for sharing music, audios, videos and more. It is lightweight, fast and is highly customizable & Skinnable using HTML/CSS for meeting your special requirement. It also supports older browsers using a Flash Fallback.

You may also like:

• jQuery Plugin for Fade-in and Fade-out HTML5 Audio - fadeaudio
• jQuery Plugin for Controlling and Customizing HTML5 Video/Audio - html5video
• HTML5 Video and Audio Elements Management Plugin - jQuery Media
• HTML5 & Flash Video Player - FlareVideo
• HTML5 Webcam Plugin with jQuery - photobooth
• HTML5 Audio Compatibility Layer - Audio5js
• HTML5 Video and Audio Player Plugin - MEjs
• HTML5 Video Player with jQuery and CSS3

Basic Usage:

1. Include jQuery and jplayer.js

<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="jquery.jplayer/jquery.jplayer.js"></script>

2. Include A theme CSS

<link href="skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" type="text/css">

3. Call the plugin

<script type="text/javascript">
    $(document).ready(function(){
      $("#jquery_jplayer_1").jPlayer({
        ready: function () {
          $(this).jPlayer("setMedia", {
            m4a: "Miaow-07-Bubble.m4a",
            oga: "Miaow-07-Bubble.ogg"
          });
        },
        swfPath: "/jquery.jplayer",
        supplied: "m4a, oga"
      });
    });
 </script>

4. Markup

<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<div class="jp-time-holder">
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
<ul class="jp-toggles">
<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
</ul>
</div>
</div>
<div class="jp-title">
<ul>
<li>Bubble</li>
</ul>
</div>
<div class="jp-no-solution"> <span>Update Required</span> To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>. </div>
</div>
</div>

5. Default key bindings

• p play/pause toggle
• f full/restore screen toggle
• m mute/unmute toggle
• , decrease volume
• . increase volume
• [ previous item (playlist)
• ] next item (playlist)
• l loop toggle
• s shuffle toggle (playlist)

More Information:

• Quick Start Guide
• Developer Guide and API Reference

Change Logs:

v2.9.2 (2014-12-15)

• New Feature: sass skins
• Bug Fix
>

v2.9.1 (2014-12-09)

• Fixed Bug in IE8

v2.9.0 (2014-11-28)

• update.

v2.8.4 (2014-11-25)

• Bugs fixed.

v2.8.3 (2014-11-21)

• Bugs fixed.

v2.8.2 (2014-11-20)

• Package Fix: The un-minified source is now also added to the dist folder.
• New Feature: Merged Pull Request to add commonJS support by nervo.
• Docs: Added CHANGELOG.md and gave details back to 2.7.1
• Docs: Added MIGRATION.md as placeholder for migration details.
• Bug Fix: Fixed Internet Explorer key bindings. Removed document.activeElement useage from the key bindings code.
• New Feature: The key bindings option key value may now be a number for event.which and a string for event.key comparison.
• Default Options: Added to the default key bindings: l (loop toggle), s (shuffle toggle (playlist))

v2.8.1 (2014-11-14)

• Update.

v2.8.0 (2014-11-12)

• Update.

v2.7.1 (2014-09-20)

• Update.

v2.7.0 (2014-09-02)

• Update.

v2.6.3 (2014-05-31)

• Bugs fixed.

v2.6.1 (2014-04-04)

• Fix: Added captureDuration option to capture clicks on the duration.

v2.6.0 (2014-04-02)

• Fix: Destroy now removes full screen event listeners.
• Corrected date in Flash menu

v2.5.4 (2014-03-09)

• Fix: For Android when changing audio and immediately playing.

v2.5.4 (2014-01-09)

• Fix: setMedia media URLs must be truethy before abs url.

v2.5.3 (2013-12-31)

• Bug fixed the console feature checking.

v2.5.2 (2013-12-16)

• Fixed: Added loadedmetadata and durationchange events to Flash MP3.

v2.5.1 (2013-12-09)

• Fixed: Cannot click links in .jp-no-solution

v2.5.0 (2013-11-08)

• updated to the latest version.

v2.4.2 (2013-11-01)

• Fix: All media URLs converted to absolute. 
• Fixes Flash m4a/m4v relative url issue.

---

This awesome jQuery plugin is developed by happyworm. For more Advanced Usages, please check the demo page or visit the official website.