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:
|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.
|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.