Creating Players

Using the PJS.Player constructor

The PJS.Player constructor takes 3 arguments

1. a css selector, an element, or a jQuery collection.
2. a [config][config] object.
3. an [events][events] object.

var player = new PJS.Player(element, config, events);
// or:
var player = new PJS.Player($("selector")[0], config, events);
// or:
var players = new PJS.Player($("selector"), config, events);
// #("selector") is a collection, so passing it in will return
// an array of players.

The PJS.Player instance could be one of three implemenations, depending on context and what was returned from the run-time request for the library.

Placeholders

A placeholder is html markup defined by you that will take the place of the player until the placeholder is clicked.

Placeholder markup and data attributes

<div class="pjs" data-content-uri="mgid:uma:videoTest:mtv.com:490777" data-auto-create>
    <img src="http://pjs-production.elasticbeanstalk.com/placeholder/mgid:uma:videoTest:mtv.com:490777"
    width="640" height="360">
</div>

For all data attributes see: Date Attributes.

To interact with a player created in this fashion, use a _pjsPlayerReady callback.

Placeholder Implementations

The concept of the placeholder varies slightly for each implementation.

EdgePlayer

In EdgePlayer, the code to create the player is included in the PJS library, so there is no subsequent download of code after the placeholder is clicked.

Flash and Player Prime

The most useful placeholder since Player Prime is only downloaded once the user clicks.

Legacy HTML5

Placeholders are not ideal since on mobile a user click is required to activate playback. This means you would have the placeholder and then an iframe would be created and there would be another placeholder. Click events don't propagate into the iframe.