jQuery based web video player jPlayer basic use tutorial

jPlayer introduction:

If I want to play background music on the web page, I don't want to use the html tag, because it can only be played after all the music is downloaded, and it is easy to have cross-browser compatibility problems, so I choose a player jPlayer based on jQuery to do it.

Sets the size of jPlayer
Use the constructor to configure jPlayer({size:Object}) to set the height and width of jPlayer.

Use the constructor to configure jPlayer({sizeFull:Object}) to set the full-screen size.

Note that the jPlayer background color can be set by configuring the jPlayer({backgroundColor:"#RRGGBB"}) constructor.

Flash safety rules
The following code relaxes the jPlayer SWF file and allows you to call swf files for any domain name.

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

The deployment of

In general, you need to upload swf files and js files to the js directory under your domain name. Change the swf path Configure jPlayer({"swfPath":path}) using the constructor.

Strictly speaking, the plugin file may be linked remotely to jplayer. org, but please do not link to jplayer. com, because we do not have sufficient resources to make an cdn at this time. In addition, the Flash playback software on the remote server requires that all jPlayer("setMedia", media) set multimedia files URL use absolute paths.

To develop locally, you need to install a server, such as apache, on your computer to enable localhost to take effect.

Use Javascript API to control media files on your website HTML5: mp3, m4a (AAC), m4v (H.264), ogv*, oga*, wav*, webm* Flash: mp3, m4a (AAC), m4v (H.264)

jPlayer requires two files to be uploaded to your server:

(1) Jplayer swf

(2) jquery. jplayer. min. js

jPlayer is constructed on top of the jQuery selector. The action is executed in the form of $(ID).jPlayer(Object: options). In some cases, jPlayer can also be constructed on top of body, meaning when you are not playing a video.

Note: swfPath, which defines the path to the jPlayer SWF file. Remember to upload the SWF file to your server! You can also specify which media is preferred using statements like jPlayer({solution:"flash, html").

Change Settings after initialization
After initialization, change the Settings in a form similar to jPlayer("option",{key:value}).
Realize an automatic music page

$(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 1 the above code:

Line 1: "$(document).ready(function(){"

$("#jquery_jplayer_1").jPlayer({" select 1 DIV to hold the HTML5 element or Flash, write an empty DIV in the document.

Line 3 "ready: function (event) {", ready is a key, function is a value, something familiar to most people.

Line 4 "$(this).jPlayer("setMedia", {" this refers to" $("#jquery_jplayer_1") ", meaning: "$("#jquery_jplayer_1").jPlayer("setMedia", {" familiar. setMedia is one option, according to step 2.

Line 9: "swfPath: "js"," This defines the relative path of the swf player. If you are not going to be compatible with web pages that do not support HTML5, you can leave it out:)

Line 10, "supplied: "m4a, oga"," supported format.

Line 101 "jPlayer (" play");" Meaning: $(" # jquery_jplayer_1 "). jPlayer (" play "); , play media to achieve automatic playback.

jPlayer common methods:

// play 
$("#jpId").jPlayer("play");
// suspended 
$("#jpId").jPlayer("pause");
// stop 
$("#jpId").jPlayer("stop");
// Set progress relative 
//1. Percentage by song length 
$("#jpId").jPlayer("playHead", 0);//  from  0%  Start playing at 
$("#jpId").jPlayer("playHead", 10);//  from  10%  Start playing at 
$("#jpId").jPlayer("playHead", 100);//  from  100%  Start playing at 
//2. Press the number of milliseconds to play 
$("#jpId").jPlayer("playHeadTime", 0);//  from  0 ms   Start playing at 
$("#jpId").jPlayer("playHeadTime", 10000); //  from  10000 ms (10 seconds )  Start playing at 
// Set the volume 
$("#jpId").jPlayer("volume", 0.25); // Set to maximum volume  25%
// The binding event 
// End of play event 
$("#jpId").jPlayer("onSoundComplete", function() {
  //alert(' The play is over ');
  this.element.jPlayer("play"); //  Loop for 
});
// Play proceeding event 
$("#jpId").jPlayer("onProgressChange", function(lp,ppr,ppa,pt,tt) {
  var s = ' Buffer percentage :'+lp +'% ,';
  s += ' Percentage of played buffer :'+ppr +'% ,';
  s += ' Percentage of total time played :'+ppa +'%';
  s += ' Playing time :'+pt+ ' ms  ,';
  s += ' The total time :'+tt+ ' ms ';
  $("#play_info").text(s);
});