jquery-based video and audio player Jplayer

Jplayer See on the network very little information, the official English data too pit Father Tat, so write a note to everyone reference. According to my observation, the principle of jplayer is mainly used in HTML5, using SWF on browsers that do not support HTML5. It's good to be fully compatible. The official also stated that the server for MP3 files do not do gzip compression, only the increase of CPU. And an error occurs when Flash plays gzip MP3.

Jplayer Introduction:

Want to play background music on the page, do not want to use the way of HTML tags, because that only music all downloaded to play, but also prone to cross-browser compatibility issues, so chose a jquery-based player Jplayer to do.

What Jplayer can do:

1. Control and Play media files on your site

2. Create a player and customize the player style with HTML+CSS

3. Add audio and video to your jquery project

4. Support for more devices that use the HTML5 specification

5. Support for old browsers using Flash fallback

6. Use the JavaScript API to control media files on your site Jplayer supported media formats: Html5:mp3, M4A (AAC), M4V (H. A), ogv*, oga*, wav*, webm* Flash:mp3, M4A (AAC ), M4V (H. A)

Jplayer requires two files to upload to your server:

• jplayer.swf

• Jquery.jplayer.min.js

The Jplayer is constructed on the jquery selector. Executes the action in the form of $ (ID). Jplayer (object:options). On some occasions, Jplayer can also be constructed on the body, which means that you do not need to play the video.

Note: Swfpath, which defines the path to the Jplayer swf file. Remember to upload the SWF file to your server! You can also use a statement like Jplayer ({solution: "Flash, HTML") to specify how the media should be played first.

Change settings after initialization
After initialization, the settings are changed in the form of similar jplayer ("option", {Key:value}).
Implement a Web page that automatically plays music

$ (document). Ready (function () {$ (' #jquery_jplayer_1 '). Jplayer ({ready:function (event) {$ (this). Jplayer ("Setmedia", {m4a: "http://www.jplayer.org/audio/m4a/TSP-01-Cro_magnon_man.m4a", OGA: "http://www.jplayer.org/audio/ogg/ Tsp-01-cro_magnon_man.ogg "});},swfpath:" JS ", supplied:" M4A, OGA ",}). Jplayer (" Play ");});

Explain the above code:

The first line, "$" (document). Ready (function () {"Everyone is very kind, documentation loads the event."

The second line, "$ (" #jquery_jplayer_1 "). Jplayer ({" Select a div to host the HTML5 element or flash, you can write an empty div in the document.

The third line, "Ready:function (event) {", Ready is a key, function is a value, something that grey is often familiar with.

Line Four "$ (this). Jplayer (" Setmedia ", {" This refers to "$ (" #jquery_jplayer_1 ")", Meaning: "$ (" #jquery_jplayer_1 "). Jplayer (" Setmedia " , {"Very familiar. Setmedia is an option, according to the second step.

Line Nineth "Swfpath:" JS ",", this defines the SWF player where the relative path, if you do not intend to be compatible with the Web page does not support HTML5, you can not write:)

Line Tenth "supplied:" M4A, OGA "," Supported formats.

Line 11th "Jplayer (" Play "); Meaning: $ ("#jquery_jplayer_1"). Jplayer ("Play"), playing media, enabling AutoPlay.

Common methods of Jplayer:

Play $ ("#jpId"). Jplayer ("Play");//Pause $ ("#jpId"). Jplayer ("pause");//Stop $ ("#jpId"). Jplayer ("Stop");//Set progress-related//1. Percent $ ("#jpId") by song duration. Jplayer ("Playhead",  0);//  starts from  0%  to play $ ("#jpId"). Jplayer ("Playhead",  10);//  start from  10%  to play $ ("#jpId"). Jplayer ("Playhead",  100);//  start playing at  100%  2. Press play in milliseconds $ ("#jpId"). Jplayer ("Playheadtime",  0);//  start playing $ ("#jpId") from  0 milliseconds  . Jplayer (" Playheadtime ",  10000); //  start playback from  10000 milliseconds (10 seconds)  /Set volume $ (" #jpId "). Jplayer (" Volume ",  0.25)  // 25%//binding event set to maximum volume//Play End Event $ ("#jpId"). Jplayer ("Onsoundcomplete",  function ()  {     //alert (' play ended ');     this.element.jplayer ("Play"); //  Loop playback});//Play Event $ ("#jpId"). Jplayer ("Onprogresschange",  function (LP,PPR,PPA,PT,TT)  {     var s =  ' buffer percentage: ' +lp + '% , ';    s +=  ' has been played as a percentage of buffered: ' +ppr + '% , ';     s +=  ' played% of total time: ' +ppa + '% ';    s +=  ' played: ' +pt+   ' Ms  , ';    s +=  ' total time: ' +tt+  ' milliseconds ';     $ ("#play _info "). Text (s);});

Jplayer Official website: http://www.jplayer.org

Jplayer Download: http://www.jplayer.org/download/

Jplayer Online Manual for English version: http://www.jplayer.org/latest/developer-guide/

Jplayer Online Demo: http://www.jplayer.org/latest/demos/

jquery-based video and audio player Jplayer