jPlayer

HTML5 Audio & Video for jQuery

a project by happyworm

Step 5 : Include the jPlayer skin

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

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

<link type="text/css" href="/skin/pink.flag/jplayer.pink.flag.css" rel="stylesheet" />

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/pink.flag/jplayer.pink.flag.css" rel="stylesheet" />
  <script type="text/javascript" src="/js/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.

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

Notes:

While uncommon, your own CSS rules may also affect the jPlayer skin. Use the developer tool in the browser to see if other rules are being inherited.