The basic use of web audio and video player based on jquery jplayer tutorial _jquery

Jplayer Introduction:

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

Set the size of the Jplayer
Use the constructor configuration Jplayer ({size:object}) to set the height of the jplayer.

Use the constructor configuration Jplayer ({sizefull:object}) to set the full screen size.

Note You can set the Jplayer background color by using the constructor configuration Jplayer ({backgroundcolor: "#RRGGBB"}).

Flash Security Rules
Use the following code to relax the restrictions on the Jplayer SWF file, and you can invoke any domain name SWF file.

Flash.system.Security.allowDomain ("*");
Flash.system.Security.allowInsecureDomain ("*");

Deployment

Usually, to upload swf files and JS files to your domain name in the JS directory. Changing the SWF path uses the constructor to configure Jplayer ({"Swfpath":p ath}).

Strictly speaking, the plug-in file may be remotely linked to the jplayer.org, but ask you not to link to the jplayer.com, because at present we do not have sufficient resources to do a CDN. In addition, the Flash playback software on the remote server requires that all Jplayer ("Setmedia", media) settings for the multimedia file URL use an absolute path.

To develop locally, you need to install a server on your own computer, such as Apache, to make localhost effective.

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

Jplayer requires two files to upload to your server:

(1) jplayer.swf

(2) Jquery.jplayer.min.js

The Jplayer is constructed on the jquery selector. Executes the action in the form of $ (ID). Jplayer (object:options). In some cases, Jplayer can also be constructed on the body, meaning you don't have to play 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 media should be played first.

Change settings after initialization
the settings are changed after initialization using a form similar to 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 code above:

First line "$ (document). Ready (function () {" Everyone is very kind, "the document loading event.

The second line "$ (" #jquery_jplayer_1 "). Jplayer ({" Select a div to host HTML5 elements 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, gray often familiar with things.

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 in the relative path, if you do not intend to be compatible with the HTML5 page, you can not write:)

Line Tenth "supplied:" M4A, OGA "," supported by the format.

Line 11th "Jplayer" ("Play"); " $ ("#jquery_jplayer_1"). Jplayer ("Play");, playing the media to achieve autoplay.

Jplayer commonly used methods:

Plays
$ ("#jpId"). Jplayer ("Play");
Pause
$ ("#jpId"). Jplayer ("pause");
Stop
$ ("#jpId"). Jplayer ("Stop");
Set up progress related
//1. Percentage per song by
$ ("#jpId"). Jplayer ("Playhead", 0);//Play
$ ("#jpId") starting from 0%. Jplayer ("Playhead", 10 //Starts playing
$ ("#jpId") from 10%. Jplayer ("Playhead", 100);//start playing//2 from 100%.
number of milliseconds per play
("#jpId"). Jplayer (" Playheadtime ", 0);//starts playing
$ (" #jpId ") from 0 milliseconds. Jplayer (" Playheadtime ", 10000);//start playing
//setting volume from 10000 milliseconds (10 seconds) c15/>$ ("#jpId"). Jplayer ("volume", 0.25); Set to maximum volume 25%
//binding Event/
Play End Event
$ ("#jpId"). Jplayer ("Onsoundcomplete", function () {
  //alert (' Play ended ');
  This.element.jPlayer ("Play"); Loop play
});
Play Event
$ ("#jpId"). Jplayer ("Onprogresschange", function (LP,PPR,PPA,PT,TT) {
  var s = ' buffer percentage: ' +LP + '%, ';
  S + + has played as a percentage of the buffer: ' +PPR + '%, ';
  S + + has played the total length of the percentage: ' +ppa + '%;
  s + = ' played time: ' +pt+ ' millisecond, ';
  s + = ' total time: ' +tt+ ' milliseconds ';
  $ ("#play_info"). Text (s);
});