Basic jQuery-based webpage Audio and Video Player jPlayer tutorial _ jquery

This article mainly introduces the basic tutorial of jQuery-based webpage Audio and Video Player jPlayer. The example in this article mainly describes how to play audio files. For more information, see JPlayer introduction:

If you want to play background music on a webpage, you don't want to use the html Tag, because it can only be played after all the music is downloaded, and cross-browser compatibility issues may also occur, so I chose a jQuery-based player jPlayer.

Set jPlayer size
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 you can configure the jPlayer background color through the constructor ({backgroundColor: "# RRGGBB.

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

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

Deployment

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

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

To implement local development, you need to install a server on your computer, such as apache, to make localhost take effect.

Use the Javascript API to control the media formats supported by jPlayer 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 the jQuery selector. The action is executed in the format of $ (ID). jPlayer (Object: options. In some cases, jPlayer can also be constructed on the body, when you do not need to play a video.

Note: swfPath defines the path of the jPlayer SWF file. Remember to upload the SWF file to your server! You can also use statements similar to jPlayer ({solution: "flash, html") to specify the mode in which media playback takes priority.

Change settings after Initialization
After initialization, use a format 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 events.

The second line "$ (" # jquery_jplayer_1 "). jPlayer ({" selects a DIV for carrying HTML5 elements or Flash. You can write an empty DIV in the document.

The third line is "ready: function (event) {", ready is a key, and function is a value, which is often unfamiliar.

Row 4 "$ (this ). jPlayer ("setMedia", {"this refers to" $ ("# jquery_jplayer_1") ", meaning:" $ ("# jquery_jplayer_1 "). jPlayer ("setMedia", {"very familiar. SetMedia is an option, as described in step 2.

The ninth line "swfPath:" js "," defines the relative path of the swf player. If you do not plan to be compatible with webpages that do not support html5 :)

The format supported by line 10 "supplied:" m4a, oga.

Line 2: "jPlayer (" play ");" meaning: $ ("# jquery_jplayer_1"). jPlayer ("play");. play the media and enable automatic playback.

Common jPlayer methods:

// Play $ ("# jpId "). jPlayer ("play"); // pause $ ("# jpId "). jPlayer ("pause"); // stop $ ("# jpId "). jPlayer ("stop"); // sets the progress. // 1. percentage by Song duration $ ("# jpId "). jPlayer ("playHead", 0); // start playing from 0% $ ("# jpId "). jPlayer ("playHead", 10); // start playing from $ ("# jpId "). jPlayer ("playHead", 100); // start playing at 100% // 2. number of playback milliseconds $ ("# jpId "). jPlayer ("playHeadTime", 0); // starts playing from 0 milliseconds $ ("# jpId "). jPlayer ("playHeadTime", 10000); // starts playing from 10000 milliseconds (10 seconds) // sets the volume $ ("# jpId "). jPlayer ("volume", 0.25); // set to 25% of the maximum volume // bind event // play end event $ ("# jpId "). jPlayer ("onSoundComplete", function () {// alert ('playing ended '); this. element. jPlayer ("play"); // loop playback}); // stream playback event $ ("# jpId "). jPlayer ("onProgressChange", function (lp, ppr, ppa, pt, tt) {var s = 'buffer percentage: '+ lp +' % ,'; s + = 'percentage of played data to buffered data: '+ ppr +' %, '; s + =' percentage of played data to the total duration: '+ ppa +' % '; s + = 'playback time:' + pt + 'millisecond, '; s + = 'total time:' + tt + 'millisecond '; $ ("# play_info "). text (s );});