Quick Start Guide : Step 8 : Summary for a video player

Quick Start Guide (jPlayer 2.9.2)
> Step 8

Step 8 : Summary for a video player

Perform the following actions:

Upload the jPlayer JavaScript file and SWF file to: /js
Include jQuery in your <head>
Include jplayer in your <head>
Upload the jPlayer skin files to: /skin
Include the jPlayer skin in your <head>
Add the jPlayer skin HTML to your <body>
Add the JavaScript to instance jPlayer to your <head>

Your HTML code for the Pink Flag skin should look like:

<!DOCTYPE html>
<html>
<head>
  <link type="text/css" href="/dist/skin/pink.flag/css/jplayer.pink.flag.min.css" rel="stylesheet" />
  <script type="text/javascript" src="/js/jquery.min.js"></script>
  <script type="text/javascript" src="/js/jquery.jplayer.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $("#jquery_jplayer_1").jPlayer({
        ready: function () {
          $(this).jPlayer("setMedia", {
            title: "Big Buck Bunny Trailer",
            m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v",
            ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv",
            poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
          });
        },
        cssSelectorAncestor: "#jp_container_1",
        swfPath: "/js",
        supplied: "m4v, ogv",
        useStateClassSkin: true,
        autoBlur: false,
        smoothPlayBar: true,
        keyEnabled: true,
        remainingDuration: true,
        toggleDuration: true
      });
    });
  </script>
</head>
<body>
Loading skin HTML...
</body>
</html>

And you will create the following video player on your page.
Press play to start the media.

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

previous step

Notes:

If your media URLs do not work on some browsers and you are certain they are correct, then check your MIME type is correct in your server response.

The <!DOCTYPE html> was included in the example HTML for clarity. Forgetting to include it on the first line of HTML code is a common error.