jPlayer

HTML5 Audio & Video for jQuery

a project by happyworm

Step 6 : Add the jPlayer video interface HTML

You now add the interface, which will be styled using the 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 I chose to use in 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, so we do not need to set the option later.

You should note that the 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 Blue Monday skin interface, add the following to the <body> of your HTML:

<body>
  <div id="jp_container_1" class="jp-video ">
    <div class="jp-type-single">
      <div id="jquery_jplayer_1" class="jp-jplayer"></div>
      <div class="jp-gui">
        <div class="jp-video-play">
          <a href="javascript:;" class="jp-video-play-icon" tabindex="1">play</a>
        </div>
        <div class="jp-interface">
          <div class="jp-progress">
            <div class="jp-seek-bar">
              <div class="jp-play-bar"></div>
            </div>
          </div>
          <div class="jp-current-time"></div>
          <div class="jp-duration"></div>
          <div class="jp-controls-holder">
            <ul class="jp-controls">
              <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
              <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
              <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
              <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
              <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
              <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
            </ul>
            <div class="jp-volume-bar">
              <div class="jp-volume-bar-value"></div>
            </div>
            <ul class="jp-toggles">
              <li><a href="javascript:;" class="jp-full-screen" tabindex="1" title="full screen">full screen</a></li>
              <li><a href="javascript:;" class="jp-restore-screen" tabindex="1" title="restore screen">restore screen</a></li>
              <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
              <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
            </ul>
          </div>
          <div class="jp-details">
            <ul>
              <li><span class="jp-title"></span></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="jp-no-solution">
        <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>
</body>

And you will create the interface below on your page, which will look broken because jPlayer has not hidden some of the elements and set the video size. With the current Blue Monday CSS and HTML, you cannot simply display:none the pause and other buttons that need to be hidden, otherwise jQuery does not use the correct display type when showing the element again.
You can get this to work though if you really need it to by refactoring the HTML and CSS so that the display type of these control elements is left as the default. The size can easily be corrected if you want to before jPlayer is instance by setting the size through CSS.

The interface below will not do much more than handle the mouse rollover states. If you click on the controls it will do nothing, because of the javascript:; used as the link.

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.