I first met the jplayer plugin because its compatibility is the best, and it can be compatible with IE6. The official website has a very detailed description of its compatibility.
This is the number one reason why I choose to use it.
Now let's understand how to use it from the requirements. The first requirement: the audio in MP3 format is played on the web page, the style is as follows:
When I first saw this requirement, I still felt a little difficult. I downloaded the compressed package from the official website (http://www.jplayer.cn/), and directly took out the example inside and applied it (path: /examples/blue.monday/demo-01-supplied-mp3.htm ), I have to say, this is also the fastest way to learn to use this plugin. The examples in the compressed package are comprehensive, and there is always one suitable for you.
The demo style is like this:
Now take a look at its html structure:
<div id="jquery_jplayer_1" class="jp-jplayer"></div><!--Stores audio and video sources, absolutely required-->
<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player"><!--播放器样式wrap-->
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<div class="jp-controls"><!--Play and stop buttons-->
<button class="jp-play" role="button" tabindex="0">play</button>
<button class="jp-stop" role="button" tabindex="0">stop</button>
</div>
<div class="jp-progress"><!--Progress bar-->
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-controls"><!--Volume Controls-->
<button class="jp-mute" role="button" tabindex="0">mute</button>
<button class="jp-volume-max" role="button" tabindex="0">max volume</button>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
</div>
<div class="jp-time-holder"><!--Video time and repeat button-->
<div class="jp-current-time" role="timer" aria-label="time"> </div>
<div class="jp-duration" role="timer" aria-label="duration"> </div>
<div class="jp-toggles">
<button class="jp-repeat" role="button" tabindex="0">repeat</button>
</div>
</div>
</div>
<div class="jp-details"><!--Theme of the video-->
<div class="jp-title" aria-label="title"> </div>
</div>
<div class="jp-no-solution"><!--jplayer prompt information, hidden by default -->
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>
</div>
</div>
</div>
Is the structure very clear? All the functions we need are included here. According to my needs, I can only keep the play and pause buttons and the progress bar, and simplify the html:
<div id="jquery_jplayer_1" class="jp-jplayer"></div><!--Stores audio and video sources, absolutely required-->
<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player"><!--播放器样式wrap-->
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<div class="jp-controls"><!--Play pause button-->
<button class="jp-play" role="button" tabindex="0">play</button>
</div>
<div class="jp-progress"><!--Progress bar-->
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
</div>
</div>
</div>
Next is the question of style. We can achieve our original function by resetting its style. I suggest adding a class to the html to reset it.
I won't go into details on how to implement it, and enter the most critical place, the js call.
Let's take a look at how the demo is called? And what parameters are used? What do the parameters mean?
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
title: "Bubble",
mp3: "http://jplayer.org/audio/mp3/Miaow-07-Bubble.mp3"
});
},
swfPath: "../../dist/jplayer",
supplied: "mp3",
wmode: "window",
useStateClassSkin: true,
autoBlur: false,
smoothPlayBar: true,
keyEnabled: true,
remainingDuration: true,
toggleDuration: true
});
});
//]]>
</script>
The first parameter: ready
The explanation on the official website is: define the event handler function bound to the $.jPlayer.event.ready event. (The event handler ready is created to eliminate race conditions between JS code and Flash code. Therefore, it is guaranteed that the Flash function definition already exists when the JS code is executed.)
In layman's terms, it is used to store links and topics of media. The formats it supports are: MP3, M4V, webma, webmv, oga, ogv, wav, fla, flv, rtmpa, rtmpv, the media address must be placed in ready, otherwise it will not take effect.
The second parameter: swfPath
The explanation on the official website is: the path to the Jplayer.swf file that defines jPlayer. It allows developers to place swf files anywhere, using relative positioning or absolute path cooperation or relative server path references.
This parameter is required. Remove it, the lower version of ie will not play properly, and the path of the file must be correct, you can use a relative path or an absolute address.
The third parameter: supplied
This parameter informs the format supported by the media. For background development, it is a very important reminder when uploading media.
Fourth parameter: wmode
i.e. windowed mode. Valid wmode values are: window, transparent, opaque, direct, gpu. What exactly do these values mean? Du Niang has already given many of them, so I won't go into details, just talk about the differences between them.
window: default mode; transparent: transparent mode; opaque: windowless mode; 'direct' and 'gpu' are newly added parameters of flashplayer 10 and later versions, and cannot be used at the same time as the previous three values, otherwise it will cause conflicts .
This is still a bit official. I tried to delete this parameter. In chrome46.0.2490.86, Firefox45.0.2, Opera36.0.2130.65, IE7, 8, the audio can still be played normally. According to the official API, note that the Firefox 3.6 audio player using the Flash solution requires an option to be set otherwise, the browser will not be able to properly place Flash on the page.{wmode:"window"}
Fifth parameter: useStateClassSkin
By default, the dom elements in the playing and mute states will add classes jp-state-playing, jp-state-muted These states will correspond to some skins, whether to use the skins corresponding to these states. To check whether it works on the current page, after I commented it, I found that the audio cannot be paused in the middle, only after it finishes playing, click play again, and the pause function fails.
The sixth parameter: autoBlur
Automatically lose focus after clicking. After deletion, there is no other effect on the audio. This parameter is optional.
The seventh parameter: smoothPlayBar
Official explanation: Smooth transition play bar.
Set the value to false, you can find that when the progress bar is clicked, there is no transition process, it is directly to the point, and the experience is not good.
Eighth parameter: keyEnabled
Official explanation: Enable the keyboard controller feature of this instance.
The popular point is whether to allow the keyboard to control playback.
The ninth parameter: remainingDuration
Whether to display the remaining playback time, if it is false, then the duration dom displays [3:07], if it is true, it displays [-3:07]. Like my audio doesn't have a time period display style, then this parameter is also optional.
Tenth parameter: toggleDuration
Allows the way of switching the remaining playback time when clicking the dom of the remaining time, for example, from [3:07] click to [-3:07] If it is set to false, then the click is invalid, and only the remainingDuration setting method can be displayed. Also an optional parameter.
As above, do you know how to use the parameters used in the demo? If you are still unclear, you can use the demo in the compressed package to test it yourself.
In addition to the above parameters, there are several parameters that need to be specified:
size: set the width and height of the media;
cssSelectorAncestor: A cssSelector that defines the ancestors of all cssSelectors. The function is equivalent to the element selector of css;
globalVolume: When true, the volume is shared. When there are multiple media on a page, adjust the volume of one of them, and the others will also be changed. If false, it will not be affected.
In this way, some simple media playback requirements are realized. There are many pages that will put forward the need for automatic playback, how to implement it in jpalyer. Actually it's not difficult.
Under the ready parameter,
$(this).jPlayer("setMedia", {
autoPlay: true
}).jPlayer("play");
The automatic playback is realized. The page needs to be upgraded, and the media needs to be automatically played in a loop. How to achieve it? The API provides such an event:
ended: function () {
$(this).jPlayer("play");
},
The demand continues to upgrade, and the media automatically stops after 1 second. How to achieve it?
$(this).jPlayer("setMedia", {
}).jPlayer("pause", 1);
This is not enough, there are multiple media on one page at the same time (this is not detailed, there are cases in the compressed package), how to prevent simultaneous playback?
play: function() { // When the current media is playing, other media are paused
$(this).jPlayer("pauseOthers");