A brief analysis of the use method of jquery plug-in Jplayer _jquery

The first Jplayer plug-in is because its compatibility is the best, can be compatible to IE6, the official online compatibility has a very detailed description

This is the first reason I choose to use it.

Now learn how to use it from your needs. First requirement: The MP3 format audio is played on the Web page, and the style is as follows:

Just to see this demand, still feel a bit difficult. I downloaded the compressed package from the official website (http://www.jplayer.cn/), and directly took out the example in it (path:/examples/blue.monday/ Demo-01-supplied-mp3.htm, I have to say, this is also the fastest way to learn to use this plugin. The package inside the example is very comprehensive, there is always a suitable for you.

The style of the demo is this:

Now take a look at its HTML structure:

<div id= "jquery_jplayer_1" class= "Jp-jplayer" ></div><!--store audio and video sources, absolutely need--> <div id= "Jp_ Container_1 "class=" Jp-audio "role=" Application "aria-label=" Media player ><!--player style wrap--> <div class= "
        Jp-type-single "> <div class=" Jp-gui jp-interface "> <div class=" jp-controls "><!--Play and stop button--> <button class= "Jp-play" role= "button" tabindex= "0" >play</button> <button class= "Jp-stop" ro
        le= "button" tabindex= "0" >stop</button> </div> <div class= "jp-progress" ><!--progress bar--> <div class= "Jp-seek-bar" > <div class= "Jp-play-bar" ></div> </div> &L  t;/div> <div class= "Jp-volume-controls" ><!--Volume Control key--> <button class= "jp-mute" "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> ;d IV class= "Jp-time-holder" ><!--video time and repeat play button--> <div class= "jp-current-time" role= "timer" aria-label= "t
        IME "> </div> <div class=" jp-duration "role=" Timer "aria-label=" duration "> </div> <div class= "Jp-toggles" > <button class= "jp-repeat" role= "button" tabindex= "0" >repeat</butto
      n> </div> </div> </div> <div class= "jp-details" ><!--video Theme--> <div class= "Jp-title" aria-label= "title" > </div> </div> <div class= "Jp-no-solution" >& lt;! --jplayer hint information, default hide--> <span>update required</span> to play the media you'll need to either up Date your browser to a recent version or update your <a href= "http://get.adobe.com/flashplayer/" target= "_blank" >fla
SH plugin</a>    </div> </div> </div> 

The structure is not very clear, we need all the features here have been included, according to my requirements, I can only keep the play and pause button as well as the progress bar, simplified after the HTML:

<div id= "jquery_jplayer_1" class= "Jp-jplayer" ></div><!--store audio and video sources, absolutely need--> <div id=
"Jp_ Container_1 "class=" Jp-audio role= "Application" aria-label= "Media Player" ><!--player style wrap--> <div
  class= "Jp-type-single" >
    <div class= "Jp-gui jp-interface" >
      <div class= "Jp-controls" ><!-- Play pause button-->
        <button class= "jp-play" role= "button" tabindex= "0" >play</button>
      </div>
      <div class= "jp-progress" ><!--progress bar-->
        <div class= "Jp-seek-bar" >
          <div class= " Jp-play-bar ' ></div>
        </div>
      </div>    
    </div>
  </div>
< /div>

Then there is the style problem. We can do this by resetting its style, and I suggest adding class to the HTML and resetting it.

Concrete how to realize I will no longer elaborate, into the most critical place, JS call.

First look at the demo how to call it? And what parameters are used? What does the parameter mean?

<script type= "Text/javascript" >
//<![ cdata[
$ (document). Ready (function () {

  $ ("#jquery_jplayer_1"). Jplayer ({
    ready:function () {
      $ (this ). Jplayer ("Setmedia", {
        title: "Bubble",
        mp3: "Http://jplayer.org/audio/mp3/Miaow-07-Bubble.mp3"
      });
    ,
    Swfpath: ". /.. /dist/jplayer ",
    supplied:" MP3 ",
    wmode:" Window ",
    usestateclassskin:true,
    Autoblur:false,
    smoothplaybar:true,
    keyenabled:true,
    remainingduration:true,
    toggleduration:true
  });
);
]]>
</script>

First parameter: Ready

The official website explains: Define the event handler function that is bound to the $.jplayer.event.ready event. (Event processor ready is created to eliminate the race conditions between the JS code and the Flash code.) So ensure that the Flash function definition already exists when the JS code executes. )

Popular is used to store the media links, topics. The formats it supports are: MP3, M4V, WEBMA, WEBMV, OGA, OGV, WAV, FLA, FLV, Rtmpa, RTMPV, the media address must be placed in the ready, otherwise it will not take effect.

second parameter: Swfpath

The official website explanation is: Defines the path of the Jplayer jplayer.swf file. It allows developers to place SWF files in any location, using relative positioning or absolute path cooperation, or relative server path references.

The parameter must exist. Delete it, IE's low version browser will not play correctly, and the file path must be correct, you can use a relative path or absolute address.

Third parameter: supplied

This parameter is to inform the media support format, for background development, in the upload media, there is a very important prompting role.

Fourth parameter: wmode

is the window mode. Valid Wmode values are: window, transparent, opaque, direct, GPU. What is the meaning of these values, the Niang has given a lot of, do not repeat, say the difference between them.

window: default mode; transparent: transparent mode; opaque: windowless mode; ' direct ' and ' GPU ' are flashplayer10 and newer parameters that cannot be used concurrently with the previous three values, or they can cause conflicts.

So there are some official, I try to delete this parameter, in Chrome46.0.2490.86,firefox45.0.2,opera36.0.2130.65,ie7, 8, audio can still play correctly. According to the official API, note that the Firefox 3.6 audio player uses flash solution requirements to set options {wmode: "window"} Otherwise, the browser will not be able to correctly place flash on the page.

Fifth parameter: Usestateclassskin

By default, the DOM elements in playback and mute state Add Class jp-state-playing, jp-state-muted these states correspond to some skins, and whether these states correspond to the skin. Check whether it works on the current page, I note it, I found that the audio can not be paused, only to let it play at the end, click Play again, pause function failed.

Sixth parameter: Autoblur

Automatically loses focus after clicking. After deletion, there is no other effect on audio. This parameter is optional.

Seventh parameter: Smoothplaybar

Official explanation: Smooth transition play bar.

Set the value to False to find that the progress bar is clicked, without the transition process, is directly to the point where the experience is not good.

Eighth parameter: keyenabled

Official explanation: Enable the keyboard controller feature for this instance.

The popular point is whether the keyboard is allowed to control playback.

nineth parameter: remainingduration

Whether to show the remaining playback time, if False then duration that DOM displays "3:07" and If True is " -3:07". Like my audio does not have a time period to display the style, then this parameter is optional.

Tenth parameter: toggleduration

Allows you to toggle the rest of the playback time when you click on the DOM for the rest of the time, such as from "3:07" click to " -3:07" if set to False, then click Invalid, only show remainingduration settings. is also an optional parameter.

As above, the demo inside the parameters used in you know how to use it? If you are not clear, you can directly use the compression package inside the demo test.

In addition to the parameters as above, there are several parameters that need to be specifically explained:

Size: Sets the width of the media;

Cssselectorancestor: A cssselector that defines the ancestors of all cssselector. function equivalent to CSS element selector;

Globalvolume:true when sharing volume, when a page has multiple media, adjust one of the volume size, and then change the other, false is not affected.

So some simple media playback needs are realized. There are a lot of pages will put forward the need for automatic playback, in the Jpalyer how to achieve. In fact, it is not difficult.

Under the Ready parameter,

$ (this). Jplayer ("Setmedia", {
  autoplay:true
}). Jplayer ("Play");

Automatic playback on the implementation of the page needs to upgrade, the need for Media loop automatic playback, how to achieve? The API provides such an event:

Ended:function () {
  $ (this). Jplayer (' play ');
},

Requirements continue to upgrade, the media automatically play 1 seconds after the stop, how to achieve it?

$ (this). Jplayer ("Setmedia", {

}). Jplayer ("Pause", 1);
This is not enough, a page at the same time there are multiple media (this does not elaborate, there are cases in the compression package), how to prevent simultaneous playback?

Play:function () {//When the current media plays, other media pauses to play
   $ (this). Jplayer ("Pauseothers");

Demand changes a lot, but million change in which, there is no way to realize the function, you can see a lot of descend nets api,maybe you found a solution.