Recent news

Tuesday, 7 June 2016

jPlayer a HTML5 Audio & Video Player jQuery Plugin




jPlayer is a jquery player. This player is able to play audio and video both type of files.  This player support following type:

HTML5: mp3, mp4 (AAC/H.264), ogg (Vorbis/Theora), webm (Vorbis/VP8), wav
Flash: mp3, mp4 (AAC/H.264), rtmp, flv


Features of this player are as follows:

  • ·         Windows: Chrome, Firefox, Internet Explorer, Safari, Oper
  • ·         Windows (legacy): IE6, IE7, IE8, IE9, IE10, IE1
  • ·         OSX: Safari, Firefox, Chrome, Opera
  • ·         iOS: Mobile Safari: iPad, iPhone, iPod Touch
  • ·         Android: Android 2.3 Browser
  • ·         Blackberry: OS 7 Phone Browser, PlayBook Browser

How To Use

1. Add the below library reference

<script type="text/javascript" src="../../lib/jquery.min.js"></script>
<script type="text/javascript" src="../../dist/jplayer/jquery.jplayer.min.js"></script>


2. Now add the below html tag.

<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
       <div class="jp-type-single">
              <div class="jp-gui jp-interface">
                     <div class="jp-controls">
                           <button class="jp-play" role="button" tabindex="0">play</button>
                           <button class="jp-stop" role="button" tabindex="0">stop</button>
                     </div>
                     <div class="jp-progress">
                           <div class="jp-seek-bar">
                                  <div class="jp-play-bar"></div>
                           </div>
                     </div>
                     <div class="jp-volume-controls">
                           <button class="jp-mute" role="button" tabindex="0">mute</button>
                           <button class="jp-volume-max" role="button" tabindex="0">max volume</button>
                           <div class="jp-volume-bar">
                                  <div class="jp-volume-bar-value"></div>
                           </div>
                     </div>
                     <div class="jp-time-holder">
                           <div class="jp-current-time" role="timer" aria-label="time"> </div>
                           <div class="jp-duration" role="timer" aria-label="duration"> </div>
                           <div class="jp-toggles">
                                  <button class="jp-repeat" role="button" tabindex="0">repeat</button>
                           </div>
                     </div>
              </div>
              <div class="jp-details">
                     <div class="jp-title" aria-label="title"> </div>
              </div>
       </div>
</div>


3. Add the below code to perform operation

$(document).ready(function () {
        $("#jquery_jplayer_1").jPlayer({
            ready: function (event) {
                $(this).jPlayer("setMedia", {
                    title: "Bubble",
                    m4a: "http://jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
                    oga: "http://jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
                });
            },
            swfPath: "../../dist/jplayer",
            supplied: "m4a, oga",
            wmode: "window",
            useStateClassSkin: true,
            autoBlur: false,
            smoothPlayBar: true,
            keyEnabled: true,
            remainingDuration: true,
            toggleDuration: true
        });
    });



Pranav Singh Author: Pranav Singh

Hello, I am Author of this blog. The main purpose of this blog is to provide all the jQuery plugins which is helpful in designing and developing a web application in a single location from the web.

Previous
Next Post »

E-mail Newsletter

Sign up now to receive breaking news and to hear what's new with us.

Recent Articles