Basic usage tutorial of jPlayer, a web audio and video player based on jQuery_jquery

jPlayer Introduction:

I want to play background music on a web page, but I don’t want to use html tags, because that way the music can only be played after all the music is downloaded, and it is prone to cross-browser compatibility issues, so I chose a player based on jQuery jPlayer does it.

Set 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 jPlayer background color can be set through the constructor configuration jPlayer({backgroundColor:"#RRGGBB"}).

Flash Security Rules
Use the following code to relax the restrictions on jPlayer SWF files, and you can call swf files of any domain name.

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

Deployment

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

Strictly speaking, the plug-in files may be remotely linked to jplayer.org, but we ask you not to link to jplayer.com because we currently do not have sufficient resources to build a CDN. In addition, the Flash playback software on the remote server requires that all multimedia file URLs set by jPlayer("setMedia", media) use absolute paths.

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

Use Javascript API to control media files on your website 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 be uploaded to your server:

(1)Jplayer.swf

(2)jquery.jplayer.min.js

jPlayer is constructed on jQuery selector. Use the form $(ID).jPlayer(Object: options) to execute the action. In some cases, jPlayer can also be constructed on the body, which means when you don't need to play videos.

Note: swfPath, which defines the path of the jPlayer SWF file. Remember to upload the SWF file to your server! You can also use statements like jPlayer({solution:"flash, html") to specify which method should be used first to play media.

Change settings after initialization
After initialization, use a form similar to jPlayer("option",{key:value}) to change the settings.
Implement a webpage 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(){" is very friendly to everyone, document loading event.

The second line "$("#jquery_jplayer_1").jPlayer({" selects a DIV, which is used to carry HTML5 elements or Flash. You can just write an empty DIV in the document.

The third line "ready: function (event) {", ready is a key, function is a value, something very familiar.

The fourth line "$(this).jPlayer("setMedia", {"this refers to "$("#jquery_jplayer_1")", which means: "$("#jquery_jplayer_1").jPlayer("setMedia ", {" is very familiar. setMedia is an option, according to the second step.

//播放
$("#jpId").jPlayer("play");
//暂停
$("#jpId").jPlayer("pause");
//停止
$("#jpId").jPlayer("stop");
//设置进度相关
//1.按歌曲时长百分比
$("#jpId").jPlayer("playHead", 0);// 从 0% 处开始播放
$("#jpId").jPlayer("playHead", 10);// 从 10% 处开始播放
$("#jpId").jPlayer("playHead", 100);// 从 100% 处开始播放
//2.按播放毫秒数
$("#jpId").jPlayer("playHeadTime", 0);// 从 0毫秒 处开始播放
$("#jpId").jPlayer("playHeadTime", 10000); // 从 10000毫秒(10秒) 处开始播放
//设定音量
$("#jpId").jPlayer("volume", 0.25); //设为最大音量的 25%
//绑定事件
//播放结束事件
$("#jpId").jPlayer("onSoundComplete", function() {
  //alert('播放结束了');
  this.element.jPlayer("play"); // 循环播放
});
//播放进行事件
$("#jpId").jPlayer("onProgressChange", function(lp,ppr,ppa,pt,tt) {
  var s = '缓冲百分比:'+lp +'% ,';
  s += '已播放占已缓冲的百分比:'+ppr +'% ,';
  s += '已播放占总时长的百分比:'+ppa +'%';
  s += '已播放时间:'+pt+ '毫秒 ,';
  s += '总时间:'+tt+ '毫秒';
  $("#play_info").text(s);
});