Quick Start Guide : cssSelector : Using your own interface

Quick Start Guide (jPlayer 2.9.2)
> cssSelector

API : cssSelector : Using your own interface

The interface system for jPlayer has been designed to be as flexible as possible enabling you to:

Use id or class selectors for the method association.
Specify the interface via the cssSelectorAncestor id.
Disable association using an empty string.
Bypass the system completely.

To understand this guide, you will need to understand how a css selector works... So here is a brief overview. You will need to understand a bit of HTML too.

A HTML element can have an id attribute and a class attribute. The id is unique. The class is common and can include more than one type of class separated by spaces.

A CSS selector can select an element type, an id, a class, or a combination of all three with hierarchy. You can do much more than that with CSS selectors, but we will cover the two you will find useful here. The id selector looks like #myId and will select the unique HTML element with that id. The class selector looks like .myClass and will select every HTML element with that class. To use hierarchy, you could select all the elements with a class that are the descendant of an element with an id using:
#myId .myClass

The default CSS selectors used by jPlayer are an id selector for the cssSelectorAncestor and a class selector for each method in the cssSelector object. The ancestor and method css selectors are combined inside jPlayer to define the final css selector used to associate an interface element with the jPlayer method. For example, associating the play button in the interface with the play method in jPlayer.

If you want to use id selectors for each method's cssSelector, then set the cssSelectorAncestor to an empty string.

Now for an example using a text based interface for a video player.

We define the cssSelectorAncestor and cssSelector object in the constructor in the JavaScript code. The size has been changed from the default to 180p. We create a style for the jPlayer <div> to add a blue border. We add the HTML for the text based interface and the jPlayer <div>:

<!DOCTYPE html>
<html>
<head>
  <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",
            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"
          });
        },
        swfPath: "/js",
        supplied: "m4v, ogv",
        cssSelectorAncestor: "",
        cssSelector: {
          title: "#title",
          play: "#play",
          pause: "#pause",
          stop: "#stop",
          mute: "#mute",
          unmute: "#unmute",
          currentTime: "#currentTime",
         duration: "#duration"
        },
        size: {
          width: "320px",
          height: "180px"
        }
      });
    });
  </script>
  <style>
    div.jp-jplayer {
      border:1px solid #009be3;
    }
  </style>
</head>
<body>
  <p>
    <button id="play">play</button><button id="pause">pause</button>
    <button id="stop">stop</button>
    <button id="mute">mute</button><button id="unmute">unmute</button>
    <span id="title"></span> |
    <span id="currentTime"></span> / <span id="duration"></span>
  </p>
  <div id="jquery_jplayer_1" class="jp-jplayer"></div>
</body>
<html>

And you will create the following text based interface on your page.
Press play to start the media.

| /

You will notice that jPlayer will automatically hide the play and pause elements depending on whether the media is playing or not. Likewise for mute and unmute.

If you want to bypass jPlayer's interface then create your own click handlers using jQuery, which then call the corresponding jPlayer method. For example: myPlayButton
Notice that the interface above maintains the correct state even though you used your own code bypassing the normal interface.

<a href="javascript:;" id="myPlayButton">myPlayButton</a>

$("#myPlayButton").click( function() {
  $("#jquery_jplayer_1").jPlayer("play");
});

Note that, jPlayer will generate a warning event for all of the default cssSelector that you did not change. These can be ignored as warnings only feedback that something does not look right, such as the missing HTML elements for the other control/feedback entities. To avoid these warnings, set the other cssSelector properties to an empty string.

If you want to change the css selector association after instancing jPlayer, then use:
jPlayer("option") to set the cssSelector or cssSelectorAncestor.

Notes:

jPlayer raises warning events if the css selectors are not found or more than 1 is found. Warning events are to help developers debug their code. Empty selector strings do not generate warnings.

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.