Using the RIN player

Adding the player control declaratively

Here is simple example of adding a player control in html:

In this example, there is a div in body with class name “rinPlayer”. The rin.processAll call in the onload event causes RIN to look at all contents of the document and embed RIN player when an element has class “rinPlayer”. If the data-src attribute points to a valid JSON URL, then that JSON RIN is played automatically.

To see this example working as sample, please run sdk-test.html under web folder in RIN sdk.

To add options to the player, add data-options attribute with options specified in query-string format.  For example:

This example sets autoplay to false and loop to true. Now, the player will not start automatically and once started manually, it’ll loop forever. List of options available:

Name Default Comment
autoplay false Indicates if RIN should autoplay contents if valid source is specified.
controls true Indicates if default controls for play/pause/seek etc should be shown. If false, no UI control is shown for users to interact. The player can be manipulated programmatically.
loop false Indicates if the contents should loop back to start on ending
muted false Indicates if audio should be muted on startup.


Creating the player control programmatically

One way to create an instance of the RIN player control programmatically is to call rin.createPlayerControl(). This and other methods under the rin namespace to work with player instances are presented in the table below.

Name Comment
createPlayerControl(playerElement, options) Creates a new player control and returns. PlayerElement is a pointer to a div element where the player will draw its contents. The options parameter is a list of options in query string or JSON format.
processAll(rootElement, systemRootUrl) Looks for elements with class “rinPlayer” under rootElement (or Document if not specified) and creates new player controls for each instance found.
systemRootUrl (optional)Identifies the path to the RIN Dependencies if the files are placed in a different location with respect to the html file
getPlayerControl(playerElement) Returns the RIN player control associated with a given DOM element.

The same set of player invocation options specified in previous section, represented as a JSON object may be specified as the second parameter to createPlayerControl. For example:

To see a sample on this approach, please run programmaticRinCreationSample.html under web folder in rin-sdk.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s