Play audio/video with jplayer

Play audio/video with from your browser using jplayer.

A very good player to play audio/video in your website.

How to use-

1) Sincce the player is based on jquery, we need to include jquery.js first.
for reference we can include

2) now go to :http://jplayer.org

download plugin files
extract and place the files in directory – say js directory. Place this directory in your project.

include “jquery.jplayer.min.js” in your header.

3) Download “skin files” from
http://jplayer.org

choose your skin, extract it and place files inside a directory say “skin”.

Include the css file in your header.

4) now you have to choose what you want – audio player or a video player. include this code to your html body (i)for video –

include this code to your html body

   
     
     
       
         play
       
       
         
           
             
           
         
         
         
         
           

• play
• pause
• stop
• mute
• unmute
• max volume

• full screen
• restore screen
• repeat
• repeat off

• Big Buck Bunny Trailer

         
       
     
     
       Update Required
       To play the media you will need to either update your browser to a recent version or update your Flash plugin.
     
   
 

     include this code to your js file or header of html(keep in mind-jquery.js and jquery.jplayer.min.js should be included first)
  
  
   $(document).ready(function(){
     $("#jquery_jplayer_1").jPlayer({
       ready: function () {
         $(this).jPlayer("setMedia", {
           m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer_480x270_h264aac.m4v",
           ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer_480x270.ogv",
           poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
         });
       },
       swfPath: "/js",
       supplied: "m4v, ogv"
     });
   });
 
     

  (ii)for audio - 
     include this code to your html body

  
 
   
     
       

• play
• pause
• stop
• mute
• unmute
• max volume

• repeat
• repeat off

• Bubble

     
     
       Update Required
       To play the media you will need to either update your browser to a recent version or update your Flash plugin.
     
   
 

        include this code to your js file or header of html(keep in mind- jquery.js and jquery.jplayer.min.js should be included first)
  
  
   $(document).ready(function(){
     $("#jquery_jplayer_1").jPlayer({
       ready: function () {
         $(this).jPlayer("setMedia", {
           m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
           oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
         });
       },
       swfPath: "/js",
       supplied: "m4a, oga"
     });
   });
 

5) you are done
simpli change “setMedia” and “supplied” and have fun.

Simple, isn’t it?
some basic things may be required –

1>want to autoplay?
ANS>

    $(document).ready(function(){
      $("#jquery_jplayer_1").jPlayer({
        ready: function () {
          $(this).jPlayer("setMedia", {
            m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
            oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
          }).jPlayer("play");
        },
        swfPath: "/js",
        supplied: "m4a, oga"
      });
    });
  

2>want to destroy the instance of jpalyer? ANS> use this:

$(“#jquery_jplayer_1”).jPlayer(“destroy”);

3>Want to be profesional? ANS> go to :

http://jplayer.org/latest/developer-guide/

and enjoy features.