Tools & Guidelines
ccPlayer: Using Javascript to Interact with ccPlayer

Previous | Next | ccPlayer Help Contents | ccPlayer Home


It is now possible to control the functionality of ccPlayer using Javascript commands. This feature makes it possible to do such things as have controls for the player in HTML, or have ccPlayer react to dynamic changes in the HTML content.

Initializing the Javascript access of ccPlayer

In order set up Javascript access, follow these steps:

• set the FlashPlayer parameter allowSriptAccess to "always" or "sameDomain"
• set the ccPlayer Flashvars parameter ccJSConnect to "true"
• add a Javascript function ccplayerReady() to the page which ccPlayer will call when it is loaded

ccPlayerReady() example

When the ccJSConnect parameter is set to true, ccPlayer calls the Javascript function ccPlayerReady(), once it has been loaded and is ready to be accessed. In the sample code above, a pointer to the ccPlayer object has been set up in this function. The content to be played can either be given to ccPlayer through its usaul Flashvars parameters or through the methods described below.

Please note: The ability to activate the fullscreen feature in the player is not available for Javascript control. This is a security feature with FlashPlayer plug-in.

Methods

• setPlayerDisplay( width:Number, height:Number, controls:String, base-color:String)
  Required. Used to initialize the ccPlayer display.
  • width (required) - width of the media display area prior to launching the media
  • height (required) - height of the media display area prior to launching the media
  • controls (optional) - used to identify which controls to use. Options are:
    • default - default controls. This is what is used if the controls parameter is not included.
    • url - identifies the url of the external swf which contains the customized controls
    • nocontrols - no controls are to be used with playback
  • base-color (optional) - used to indicate the color used as the background for the sliding windows (instructions, search, language), background of the tool tips for the buttons which open the sliding windows, and the fill color of the progress bar
• loadNewMedia( media-file:String, poster-image:String, audio-image:String, autostart:Boolean, block-controls:Boolean, caption-type:String, caption-file:String, caption-language:String)
  Used to identify the next media to be played along with some of its options, including captions.
  • media-file (required) - url of the media file to play
  • poster-image (optional) - url of the external image to use as the poster image
  • audio-image (optional) - url of the external image to be displayed when an MP3 audio file is being played
  • autostart (optional) - indicates whether the media autostarts when loaded (true) or pauses (false) and waits to be started (default is false)
  • block-controls (optional) - indicates whether the controls should be blocked (true) while the media is playing or not (false) (default is false)
  • caption-type (optional) - type of source containing the caption information
  • external – external timed-text file
  • embedded – embedded in video
  • caption-file (optional) - url for a TTML or QTtext caption file
  • caption-language (optional) - identifies which language <div> to select in a TTML file
  * If the media is being streamed from a Flash media server, use setMediaStream() to identify the url of the streaming server prior to calling loadNewMedia().
• setMediaStream( server-url:String)
  Used to identify the streaming server, when video is being streamed from a Flash media server.
  • server-url (required) - url of the streaming server
• pauseMedia()
  Pauses the current media playback.
• playMedia()
  Restarts the current media playback.
• showCaptions()
  Shows the caption display.
• hideCaptions()
  Hides the caption display.
• raiseVolume()
  Raises the media volume.
• lowerVolume()
  Lowers the media volume.
• jumpToTime( time:Number)
  Jumps to point in media indicated by the time provided.
  • time (required) - number of seconds where media playback should jump to
  * If the time given is for an area of the video which has not yet been loaded, the position remains where it was before the jump.
• turnOffShortcuts()
  Used to turn off the recognition of the shortcut keys in ccPlayer. This is provided to stop ccPlayer from reacting to keystrokes when the user has navigated to special areas that also react to keystrokes, such as an input text field.
• turnOnShortcuts()
  Used to re-enable the recognition of the shortcut keys in ccPlayer.
• moveForward()
  Used to move playback forward 5 seconds.
• moveReverse()
  Used to move playback back 5 seconds.
• getDuration()
  Returns the duration of the media that has been loaded.
• getCurrentTime()
  Returns the time at the current position of the media playback.
• getTimeRemaining()
  Returns the amount of time left in the media playback.
• getVolume()
  Returns the current volume level of the media.
• getPercentLoaded()
  Returns the percentage of the media that has been loaded.
• getCaptionState()
  Returns the current visual status of the captions (on, off).
• getPlaybackState()
  Returns the current status of the media playback (playing, paused).
• getDisplayState()
  Returns the current status of the display (fullscreen, normal).
• getShortcutsState()
  Returns the current status of keyboard shortcuts (on, off).

Previous | Next | ccPlayer Help Contents | ccPlayer Home

Last updated: September 28, 2011