jPlayer

HTML5 Audio & Video for jQuery

a project by happyworm

Step 5 : Include the jPlayer skin

To use the jPlayer skin, add the following line to the HTML of your page's <head>: 

<head>
  <link type="text/css" href="/skin/jplayer.blue.monday.css" rel="stylesheet" />
</head>

As a general rule of thumb, it is better to include the CSS before including JavaScript files. The page will render faster because the styling is not being delayed by the load time of the included JavaScript files.

Your <head> code should look like: 

<head>
  <link type="text/css" href="/skin/jplayer.blue.monday.css" rel="stylesheet" />
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script type="text/javascript" src="/js/jquery.jplayer.min.js"></script>
</head>

You now have access to the CSS styles defined by the jPlayer skin on your webpage.

After completing the steps in this guide, you will want to review the CSS rule used to define the text size. The font-size is defined to size the text correctly on the jPlayer site, since jPlayer is being used inside the page structure of this site. 

div.jp-audio,
div.jp-video {
  /* Edit the font-size to counteract inherited font sizing.
   * Eg. 1.25em = 1 / 0.8em
   */
  font-size:1.25em;
}

Alternatively, change the rule to use an absolute size. We keep it relative to allow the browser to control the size, which is an accessibility consideration.

previous step | next step for audio | next step for video

Notes:

In theory you can link directly to the skin files on this site, however we ask that you do not since we do not have sufficent resources to become a CDN at the moment.

While the difference in the order of including CSS and JavaScript in your page is usually minor and you'd miss it if you blinked, this can make a noticable difference if your page has many files to be included. The order has no effect on jPlayer. We are simply trying to help you build a faster website as a byproduct of this step.