Skip to content

API

Jump to bottom
caioviel edited this page Oct 10, 2012 · 28 revisions

API Descriptrion

WebNclPlayer

Constructor

WebNclPlayer(file, divId, directory)

Params:

  • file: the NCL document to be presented.
  • divId: the name of the <div> where the NCL document will be displayed.
  • directory: the directory where are the media files. When undefined it will use the directory of the NCL document.

Inline NCL

Alternatively, you can create an instance of WebNclPlayer using an <nclplayer> HTML element.

<nclplayer id="myPlayer2" width="300px" height="200px" autoplay="autoplay">
   <ncl id="sample" xmlns="http://www.ncl.org.br/NCL3.0/EDTVProfile">
      <head>
         <regionBase>
            <region id="rTV" width="100%" height="100%" zIndex="1"/>		
         </regionBase>
         <descriptorBase>
            <descriptor id="dTV" region="rTV" />
         </descriptorBase>
      </head>
      <body>
         <port id="pVideo1" component="video1" />
         <media id="video1" descriptor="dTV" src="sample/video1.webm" />
      </body>
   </ncl>
</nclplayer>

The <nclplayer> element has the following attributes:

  • src: the NCL document to be presented. When undefined it will use the NCL inline code as the code above
  • id: the name of the instance
  • autoplay: if "true" will start the presentation automatically; otherwise will be necessary a start()
  • baseDir: the directory where are the media files. When undefined it will use the directory of the NCL document.

The instances created by the <nclplayer> element - either by NCL inline or using the src attribute - can be accessed by the global dictionary webNclPlayers.

<nclplayer id="myPlayer" src="sample/sample.ncl" 
                 width="300px" height="200px">
</nclplayer>

<script>
   var myPlayer = webNclPlayers["myPlayer"];
   myPlayer.start();
</script>

Controlling the Presentation

The following methods are used to control the presentation.

destroy()

Deletes the HTML elements and destroys the javascript objects used by an WebNclPlayer instance.

start()

Starts the presentation.

pause()

Pauses the presentation.

resume()

Resumes paused presentations.

abort()

Aborts presentations. The same as stop().

stop()

Stops presentations. The same as abort().

keyPress(key)

Used to post key events to the WebNCLPlayer instances. The key parameter is the key name. The following values are supported: CURSOR_UP, CURSOR_DOWN, CURSOR_LEFT, CURSOR_RIGHT, ENTER, RED, GREEN, YELLOW, BLUE, KEY_0, KEY_1, KEY_2, KEY_3, KEY_4, KEY_5, KEY_6, KEY_7, KEY_8, KEY_9, BACK, EXIT, PLAY, STOP, PAUSE, RECORD, POWER, REWIND, EJECT, MENU.

###Sample Code:

player.keyPress('GREEN');

Posting NCL events

postEvent(event)

This method can be used to post NCL events, as to force the begging of a media or set a property. It uses a interface similar to the lua events API.

The event parameters is a json structure representing the event to be posted.

###Sample Code:

player.postEvent(
	{'class': 'ncl',
	 'type': 'presentation',
	 'component': 'video1',
	 'area': 'area1',
	 'action': 'start'});

The code above will force the area1 of video1 to start.

player.postEvent(
	{'class': 'ncl',
	 'type': 'attribution',
	 'component': 'video1',
	 'name': 'bounds1',
	 'value': '0,0,100%,100%',
	 'action': 'start'});

The code above will resize the video1 to fill all the WebNclPlayer instance area.

player.postEvent(
	{'class': 'key',
	 'type': 'press',
	 'key': 'RED'});

The same as keyEvent()

#RemoteControl

Remote Control Areas

The remote is split in six areas. You can choose to show one combination of areas you prefer. The areas area:

  • powerEject: power and eject buttons
  • numbers: the numeric keyboard
  • volumeChannel: volume and channel navigation buttons
  • interactive: the arraws and enter button
  • colorful: the colored buttons (red, green, yellow, blue)
  • multimedia: start, stop, pause and other buttons related to the content control.

Constructor

RemoteControl(player, divId, initialAreas);

###Params:

  • player: a instance of a WebNCL already created.
  • divIv: the name of the <div> where the remove control will be placed. You can set the position of control by div's CSS.
  • initialAreas: a array with the names of the RemoteControl areas that should be displayed. If it is undefined, all the areas will be displayed.

###Sample Code:

<div id="myPlayer" style="position:relative;width:640px;height:480px"></div>
<div id="areaRemoteControl" style="left:650px"></div>
	
<script>
   var player = new WebNclPlayer("sample/sample-control.ncl","myPlayer");
   player.start();
   var controler1 = new RemoteControl(player,"areaRemoteControl", ['interactive', 'multimedia', 'colorful']);
</script>

##Manipulating Areas There are a method for each remote control area. Those methods are used to set if the area will be displayed our not.

RemoteControl.setAreaPowerEject(visible)

###Params:

  • visible: if true, the area powerEject will be displayed; false hides the area.

The following methods area similar:

  • setAreaNumbers()
  • setAreaVolumeChannel()
  • setAreaInteractive()
  • setAreaColorful()
  • setAreaMultimedia()

##Key Listeners You can register a function as listener to key pressed on the control. Every time a key is pressed in the control, the registered listeners will be called. The key pressed, identified by a string, is passed as a parameter to the function.

RemoteControl.addListener(functions) Register a function as listener for keys.

###Params:

  • functions: The functions to be registered. This functions should receive a parameter

RemoteControl.removeListener(functions) Remove a function of the listeners.

###Params:

  • functions: The functions to be removed.

Clone this wiki locally