jPlayer

HTML5 Audio & Video for jQuery

a project by happyworm

Step 7 : Add the JavaScript to instance jPlayer for video

previous step | summary

Now you will add the JavaScript that associates jPlayer with the HTML interface. To do this we will use the jQuery API and the jPlayer API, along with JavaScript code. For this guide, we are entering the code directly into the HTML source, but you can put it in an external file if you wish.

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

<head>
  <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>

Take care to include the jPlayer JavaScript code after the jPlayer plugin is included in your page.

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://code.jquery.com/jquery-1.7.2.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>

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

Media used in demo: © 2008, Blender Foundation - bigbuckbunny.org

Now that you have seen what it does, lets review the code explaining each line.

The $(document).ready(handler) code is part of jQuery and causes the handler function to be executed when the page is ready. Your code goes inside the {}. 

$(document).ready(function(){
 // Code executed at jQuery ready.
});

The $("#jquery_jplayer_1").jPlayer(options) is the jPlayer constructor and takes the contents of the JSON object in the {} as its options. The line is actually part jQuery and part jPlayer. The $("#jquery_jplayer_1") is a jQuery() selector, which is used to select the jPlayer <div>. The jPlayer(options) is the jPlayer constructor. 

$("#jquery_jplayer_1").jPlayer({
  // Options
});

The options object passed to the jPlayer constructor is JavaScipt, written as JSON, which stands for JavaScript Object Notation. Using JSON, we define an object with properties matching the jPlayer options that we want to configure.

The main options we want to define are:

  • ready to create a jPlayer ready event handler.
  • cssSelectorAncestor to associate the interface HTML with this instance of jPlayer.
  • swfPath to set the path to jPlayer's Flash fallback SWF file.
  • supplied to configure jPlayer to play either M4V files or OGV files, since we will be supplying both formats to increase cross-browser HTML support.

The remaining options being set here are due to their default values being chosen for backward compatability, and we are using new features, hence we need to set the option.

All other options will use their default value. 

{
  ready: function () {
    // Code to execute at jPlayer ready
  },
  cssSelectorAncestor: "#jp_container_1",
  swfPath: "/js",
  supplied: "m4v, ogv",
  useStateClassSkin: true,
  autoBlur: false,
  smoothPlayBar: true,
  keyEnabled: true,
  remainingDuration: true,
  toggleDuration: true
}

The ready event handler function uses the $(this) jQuery code to select the entity that generated the event, which is the jPlayer <div>. The jPlayer("setMedia", media) jPlayer code sets up jPlayer with the media. The media is defined using a JSON object with properties matching the supplied formats and an optional poster image URL. 

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"
  });
}

Edit the media formats and their URLs to match those for your media. Remember to adjust the supplied option to match the formats you are supplying.

Note that for video, you must supply M4V files to satisfy both HTML5 and Flash solutions. An M4V file is an MP4 H.264/AAC encoded video. The optional OGV format is used to increase cross-browser support for HTML5 browsers such as Firefox and Opera.

previous step | summary

Notes:

You should not issue commands to jPlayer before its ready event has occurred, otherwise the Flash fallback solution will not be ready and jPlayer will raise an error event.