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.

The ninth line "swfPath: "js"," this defines the relative path where the swf player is located. If you do not plan to be compatible with web pages that do not support HTML5, you don’t need to write it :)

Format supported by line 10 "supplied: "m4a, oga",".

The eleventh line "jPlayer("play");" means: $("#jquery_jplayer_1").jPlayer("play");, playing media to achieve automatic playback.

Commonly used methods in jPlayer:

//播放
$("#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);
});