Quick Start Guide : Step 6 : jPlayer video interface HTML

Quick Start Guide (jPlayer 2.9.2)
> Step 6

Step 6 : Add the jPlayer video 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>, which is where the jPlayer video output is shown.

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, which will look broken because jPlayer has not set the video size:

Update Required To play the media you will need to either update your browser to a recent version or update your Flash plugin.

The size of jPlayer is set using the jPlayer({size}) option. It will add the size.cssClass option as a class to the cssSelectorAncestor. The skins are made with two size classes, jp-video-270p and jp-video-360p. The default size is 270p. The jp-video-full class is used for full-screen mode.

In the next step you will associate jPlayer with the interface you just created.

previous step | next step

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.

The 270p and 360p relate to HDTV format 16:9 ratio media. Which means:
270p is 480x270px,
360p is 640x360px.

The minimum size of jPlayer with the skin is 480x270px (270p), otherwise the controls do not have enough space. The skin adapts to any size greater than this setting, but you will need to add the CSS to correct the jp-video-play size.