HTML5 Audio & Video for jQuery
Step 6 : Add the jPlayer audio interface HTML
You now add the interface, which will be styled using the CSS class definitions from the jPlayer skin.
You will notice that there are 2 id attributes set in the structure.
The id of these elements are important for associating jPlayer with the interface and for defining the jPlayer <div>.
The id jquery_jplayer_1 defines the jPlayer <div>,
which is the unique id chosen for this guide.
All commands to jPlayer are issued through this id, by using the jQuery css selector:
$("#jquery_jplayer_1")
The id jp_container_1 is the default id of the jPlayer
cssSelectorAncestor option,
but for clarity we will be defining this option in the guide code.
You should note that the CSS class names are also used by jPlayer. The class names of these elements are important for associating jPlayer with the interface. The classes used are the default class names of the jPlayer cssSelector option, so we do not need to set the option later.
The cssSelectorAncestor is combined with the cssSelector for each jPlayer method that is controlled by the interface. See jPlayer's Predefined CSS Selectors for more details.
Note that each skin has its own unique HTML structure.
To create the Pink Flag skin interface, add the following to the <body> of your HTML:
Loading skin HTML...
And you will create the interface below:
In the next step you will associate jPlayer with the interface you just created.
Notes:
The size of the jPlayer <div> is defined by the
jPlayer({size}) constructor option,
which defaults to zero size when only audio formats are supplied.
The background color of the jPlayer <div> is defined by the
jPlayer({backgroundColor}) constructor option.
jPlayer media can have a poster image dispayed, which also works for audio. This guide does not use this feature.
Generally, the jPlayer <div> for audio can be outside the interface structure. If your page shows and hides areas of the page, we recommend you place the jPlayer <div> at the root of the <body>, outside of any structures that are being hidden. Hiding the jPlayer <div> will cause the Flash to be effectively removed from the page. Showing it again will reset the Flash and jPlayer will attempt to recover by re-configuring the Flash to the current status and then generate a flashreset event.