Cross Platform HTML5 Audio & Video Player For jQuery - jPlayer

Cross Platform HTML5 Audio & Video Player For jQuery - jPlayer
File Size: 7.3 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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:

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.