This document covers the various options to customize various aspects of the Ooyala Player. The first section details the parameters available in the Javascript embed code. The second and third sections provide a reference for the JavaScript and ActionScript APIs. Due to security model restrictions, the Javascript and ActionScript interfaces are mutually exclusive with ActionScript taking precedence in the case of a conflict. The final section documents an alternative embed method for sites not accepting Javascript embeds.
autoplay – If set to 1, play the video upon display.browserPlacement – For a channel, specify where external controls are placed, either ‘left’ or ‘right’. Can include a percentage or a width in pixels that will be occupied by the controls as in ‘left40’ for left and 40% of the width, or 'left200px' to specify left and 200 pixels. The default 'left' or 'right' value is 50%.browserStartMode – For channels, specify whether the browser will start in '2d' or '3d'. Default is 2d.embedCode – Specify the embed code for a video or channel.height – Specify the height, in pixels, of the player.hide – Disables specific player functionality, the query string parameter “hide” is introduced. This parameter accepts ‘all’ to disable all controls or a comma-separated list that can contain any combination of ‘volume’, ‘fullscreen’, ‘channels’, ‘sharing’, ‘info’, or ‘endscreen’.loop – If set to 1, automatically replay the video when it finishes.transition – If set to ‘selector’, show the channel view after each movie in a channel.view – If set to 'channel', show the channel view on player display.width – Specify the width, in pixels, of the player.If the height is set to less than 200 or the width is set to less than 300, the controls of the player will not be exposed as the panels do not have enough space to expand.
browserPlacement displays channel controls external to the current video or channel. This makes it incompatible with view=channel and transition=selector. In the event of a conflict, browserPlacement takes precedence over those options.
Standard:
<script src="http://www.ooyala.com/player.js?width=750&height=312&embedCode=dwbjp-XdAc-w6mATLnMIuwBRxHfF5vRK"></script>
Autoplay the first video, browser on the left occupying 28% of the space:
<script src="http://www.ooyala.com/player.js?embedCode=xpaTQ6lmnTkZSM1K6tzrPAWmznGo9fON&autoplay=1&browserPlacement=left28&width=700&height=300"></script>
Dynamic channels are similar to standard Ooyala channels in that they display a series of videos, but different in that you are giving the player directions on what videos to play as opposed to an explicit list. These directions can include labels, ordering information, embed codes, and/or a provider code. All examples are given as query-string parameters to the embed code.
Basic channel creation requires either an embedCode or a provider code. The simplest form of a dynamic channel is one beginning with a specified video and including every other video available from the account with the default ordering of most recent upload time.
embedCode=SAMPLE_VIDEO&labels=*
Video selection can also be based off of labels:
labels=* – Includes all account content in the channel.labels=. – Includes all account content having the same label as the embedCode.labels=<comma-separated list of URI-escaped labels> – Includes all account content matching the label list.There are several options to order the videos in a channel:
orderBy=uploadTime – Order lineup by most recently uploaded. (Default)orderBy=title – Order lineup alphabetically by title.orderBy=popularity – Order lineup by most played videos.orderBy=random – Order lineup randomly each time it is played.orderDirection=<asc|desc> – Sorting order of ascending (Default) or descending.To specify a maximum number of videos to include in a channel, which defaults to 32 and has a maximum value of 100, use:
limit=<number>
The following apply as they do to standard channels:
view=<normal|channel> – Initial state of the player containing the channel.transition=<play|selector> – When finished, play the next video or show selector.To protect the dynamic channel embed code from being misused, any videos included in a dynamic channel must be authorized for the domain the channel is embedded in (or ALL domains) or they will not be displayed.
Due to the highly dynamic nature of this type of channel, statistics are included on a per-video basis not on a per-channel basis.
These examples require the pcode for your account and would be included in the <script …></script> tags, assuming that you are using Javascript embedding code.
For example, to include all videos for the account with the pcode of jaskdiwhe8s882sjjsdy you would use:
<script src="http://www.ooyala.com/player.js?width=480&height=270&pcode=jaskdiwhe8s882sjjsdy&labels=*"></script>
10 most recently uploaded videos:
pcode=SAMPLE&labels=*&orderDirection=desc&limit=10
100 most popular videos:
pcode=SAMPLE&labels=*&orderBy=popularity&orderDirection=desc&limit=100
Most recently uploaded video per a given label:
pcode=SAMPLE&labels=/users/123&orderDirection=desc
This section of the document provides a class reference to the various get and set commands available through the Javascript interface and example code along with a link to a live example displaying the capabilities of the API.
To enable the Javascript API, the callback parameter is required:
- playerId (String) - ID of player invoking the callback
- eventName (String) - Name of the notification
- parameters (Object) – Extra notification parameters
In addition, the playerId parameter can be added:
For example:
<script src="www.ooyala.com/player.js?callback=receiveOoyalaEvent&playerId=player&width=480&height=360&
embedCode=llMDQ6rMWxVWbvdxs2yduVEtSrNCJUk1"></script>
<script>
function receiveOoyalaEvent(playerId, eventName, eventParams) {
...
}
</script>
Property |
Description |
getActivePanel |
Returns "info" or "syndication" if the respective panel is shown or an empty string if no panel if no panel is shown |
getCurrentItem |
Get an object describing the current video. Object includes {embedCode, title, description, time (play length in seconds), lineup, promo} |
getCurrentItemDescription |
Get the description of the current video |
getCurrentItemEmbedCode/ setCurrentItemEmbedCode |
Get/Set the embedCode for the current video in a channel |
getCurrentItemTitle |
Get the title of the current video |
getDescription |
Get the description of the player source |
getEmbedCode/setEmbedCode |
Get/set the embedCode for the current player |
getErrorCode |
Get the current error code, if one exists |
getErrorText |
Get the current text of the error, if one exists |
getFullscreen |
Returns true if in fullscreen mode, false if not |
getItem |
Get an object describing the player source. Object includes {embedCode, title, description, time (play length in seconds), lineup, promo} |
getLineup |
Get an array of objects describing the current channel |
getPlayheadTime/setPlayheadTime |
Find where the playhead is, or move it to a new location |
getState |
Get current player state. One of {playing, paused, buffering, channel, error} |
getTitle |
Get the title of the current channel or video if no channel |
getTotalTime |
Get the length of the active video |
getVolume/setVolume |
Get/Set the current volume |
setQueryStringParameters |
Set the query string parameters for the current player |
Functions |
Class Member Functions |
changeCurrentItem(String embedCode) |
Set the current video in a channel if the video is present. Returns true if accepted, false if not. |
getPromoFor(embedCode, width, height) |
Returns a promo image URL for the given embed code in a channel that will be at least the specified deminsions, or null for an embed code not present in the channel. |
pauseMovie() |
Pause the current video |
playMovie() |
Play the current video |
Event notifications delivered to callback function. Please note that inter-browser compatibility issues prevent use of standard DHTML events.
Event |
Parameters passed as the third argument to callback |
Description |
activePanelChanged |
|
The Info or Share panel has been exposed or hidden |
apiReady |
|
The player is ready to receive API calls like playMovie(), getItem(), etc. Wait for this event to be dispatched before making any API calls. This event is fired each time the player's embedCode is changed. The embed code can be changed via setEmbedCode() or setQueryStringParameters(). |
currentItemEmbedCodeChanged |
embedCode, title |
Current item has changed |
embedCodeChanged |
embedCode, title |
Top-level player item has changed |
fullscreenChanged |
|
Full-screen state has been toggled |
loadComplete |
|
Player has been initialized. This is deprecated; use the apiReady event instead. |
playComplete |
|
The video or channel has completed |
playheadTimeChanged |
playheadTime |
The playhead has been moved |
stateChanged |
state, errorCode, errorText |
The state has changed |
totalTimeChanged |
totalTime |
Total time of the item has changed |
volumeChanged |
Volume |
The volume has changed |
Available at http://www.ooyala.com/playerScripting-demo.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<script src="http://www.ooyala.com/player.js?callback=receiveOoyalaEvent&playerId=player&width=480&height=360&
embedCode=llMDQ6rMWxVWbvdxs2yduVEtSrNCJUk1"></script>
<script>
function receiveOoyalaEvent(playerId, eventName, eventArgs) {
switch(eventName) {
case "playheadTimeChanged":
onPlayheadTimeChanged(eventArgs);
break;
case "stateChanged":
onStateChanged(eventArgs);
break;
case "currentItemEmbedCodeChanged":
onCurrentItemEmbedCodeChanged(eventArgs);
break;
case "totalTimeChanged":
onTotalTimeChanged(eventArgs);
break;
case "embedCodeChanged":
onEmbedCodeChanged(eventArgs);
break;
case "volumeChanged":
onVolumeChanged(eventArgs);
break;
case "apiReady":
onPlayheadTimeChanged(eventArgs);
onStateChanged(eventArgs);
onCurrentItemEmbedCodeChanged(eventArgs);
onTotalTimeChanged(eventArgs);
onEmbedCodeChanged(eventArgs);
onVolumeChanged(eventArgs);
break;
}
}
function onEmbedCodeChanged(eventArgs) {
document.getElementById("embedCode").innerHTML =
eventArgs.embedCode + " == " + document.getElementById("player").getEmbedCode();
document.getElementById("title").innerHTML = eventArgs.title + " == " +
document.getElementById('player').getTitle();
}
function onCurrentItemEmbedCodeChanged(eventArgs) {
document.getElementById("currentItemEmbedCode").innerHTML =
eventArgs.embedCode + " == " + document.getElementById("player").getCurrentItemEmbedCode();
document.getElementById("currentItemTitle").innerHTML =
eventArgs.title + " == " + document.getElementById("player").getCurrentItemTitle();
}
function onTotalTimeChanged(eventArgs) {
document.getElementById("totalTime").innerHTML =
eventArgs.totalTime + " == " + document.getElementById("player").getTotalTime();
}
function onPlayheadTimeChanged(eventArgs) {
document.getElementById("playheadTime").innerHTML =
eventArgs.playheadTime + " == "+document.getElementById("player").getPlayheadTime();
}
function onVolumeChanged(eventArgs) {
document.getElementById("volume").innerHTML =
eventArgs.volume + " == " + document.getElementById("player").getVolume();
}
function onStateChanged(eventArgs) {
document.getElementById("state").innerHTML =
eventArgs.state + " == " + document.getElementById("player").getState();
}
</script>
State <span id="state"></span>
<br>
Embed Code <span id="embedCode"></span>
<br>
Title <span id="title"></span>
<br>
CurrentItem EmbedCode <span id="currentItemEmbedCode"></span>
<br>
CurrentItem Title <span id="currentItemTitle"></span>
<br>
Total Time <span id="totalTime"></span>
<br>
Playhead Time <span id="playheadTime"></span>
<br>
Volume <span id="volume"></span>
<br>
<button onclick="document.getElementById('player').playMovie()">Play</button>
<button onclick="document.getElementById('player').pauseMovie()">Pause</button>
<button onclick="document.getElementById('player').setPlayheadTime(document.getElementById('player').getPlayheadTime() + 30)">
+30s</button>
<br><br>
<button onclick="document.getElementById('player').setQueryStringParameters({embedCode:'8wNTqa-6MkpEB1c7fNGOpoSJytLptmm9',
hide:'share,fullscreen'})">Switch Movie</button>
</body>
</html>
package com.ooyala.api
public class Player extends UIComponent
Properties |
Class Properties |
activePanel |
Bindable, read-only. Returns "info" or "syndication" if the respective panel is currently shown |
currentItemEmbedCode |
Bindable, read-write. embedCode of the active video in a channel |
currentItemTitle |
Bindable, read-only. Title of the active video |
description |
Bindable, read-only. The description of the player source |
embedCode |
Bindable, read-write. embedCode of the player |
errorCode |
Bindable, read-only. Code if the current state is error |
errorText |
Bindable, read-only. Text if the current start is error |
fullscreen |
Bindable, read-only. Returns true if player is in fullscreen mode, false if not. |
item |
Bindable, read-only. Get an object describing the player source. Object includes {embedCode, title, description, time (play length in seconds), lineup, promo} |
lineup |
Bindable, read-only. An array of objects describing the current channel |
playheadTime |
Bindable, read-write. Current playhead position |
queryStringParameters |
Non-Bindable, write-only. Parameters for the object |
state |
Bindable, read-only. Current player state. One of {playing, paused, buffering, channel, error} |
title |
Bindable, read-only. Title of the channel if there is a channel, otherwise the title of the video |
totalTime |
Bindable, read-only. Total length of current video |
volume |
Bindable, read-write. Current volume |
Functions |
Class Member Functions |
changeCurrentItem(String embedCode) |
Set the current video in a channel if the video is present. Returns true if accepted, false if not. |
getPromoFor(embedCode, width, height) |
Returns a promo image URL for the given embed code in a channel that will be at least the specified deminsions, or null for an embed code not present in the channel. |
load() |
Load the Ooyala Player |
pauseMovie() |
Pause the current video |
playMovie() |
Play the current video |
Events |
Event Trigger |
activePanelChanged |
Either the Info or Share panel has been exposed or hidden |
apiReady |
The player is ready to receive API calls like playMovie(), getItem(), etc. Wait for this event to be dispatched before making any API calls. This event is fired each time the player's embedCode is changed. The embed code can be changed via setEmbedCode() or setQueryStringParameters(). |
currentItemEmbedCodeChanged |
The embedCode of the active video has changed |
embedCodeChanged |
Change of the player embed code |
fullscreenChanged |
Fullscreen state has been toggled |
loadComplete |
The player has completed loading. This is deprecated; use the apiReady event instead. |
playComplete |
The video or channel has completed playing |
playheadTimeChanged |
Update of active video play time |
stateChanged |
Player state shift (playing, paused, buffering, or error) |
totalTimeChanged |
Change of the play length of the current video |
volumeChanged |
The volume of the player has been changed |
package com.ooyala.api
{
/**
* Player API
*/
[Event (name="currentItemEmbedCodeChanged" )]
[Event (name="embedCodeChanged" )]
[Event (name="playComplete" , type="flash.events.Event" )]
[Event (name="loadComplete" )]
[Event (name="playheadTimeChanged" )]
[Event (name="stateChanged" )]
[Event (name="totalTimeChanged" )]
[Event (name="volumeChanged" )]
public class Player extends UIComponent
{
/**
* Load the Ooyala player
*/
public function load():void
/**
* Pass "query string parameters" to change the movie or channel in the player.
* You can pass a string (similar to HTML Snippet query string
* and FlashVars in direct Flash embed) or properties of an object
*/
public function set queryStringParameters(parameters:*): void
/**
* embedCode of the player itself (in the case of a channel, will be channel)
*/
[Bindable (event="embedCodeChanged" )]
public function get embedCode():String
/**
* Convenient shortcut for set queryStringParameters('embedCode='+value)
* i.e. Reloads movie/channel in player
*/
public function set embedCode(value:String): void
/**
* Total time (in seconds) of the currently active item in the player
* In the case of a channel, total length of the current video in the channel
*/
[Bindable (event="totalTimeChanged" )]
public function get totalTime():Number
/**
* Playhead time for the current active video in the player
* In the case of a channel, playhead time of the current video in the channel
*/
[Bindable (event="playheadTimeChanged" )]
public function get playheadTime():Number
/**
* Seek within the active video in the channel
*/
public function set playheadTime(value:Number): void
/**
* Player Volume setting
*/
[Bindable (event="volumeChanged")]
public function get volume():Number
public function set volume(value:Number): void
/**
* The current state of the player. One of:
* playing
* paused
* buffering
* finished
* error
*/
[Bindable (event="stateChanged")]
public function get state():String
/**
* The embedCode of the current video in the player.
* In the case of a channel, this will be the embedCode
* of the current video in the channel
*/
[Bindable (event="currentItemEmbedCodeChanged" )]
public function get currentItemEmbedCode():String
/**
* Play the current video or channel
*/
public function play():void
/**
* Play the current video or channel
*/
public function pause():void
}//end of class
}
This is the first of two examples that illustrate the ability of the Ooyala player to be embedded in an Adobe Flex application using Adobe ActionScript 3. This example shows a basic integration while the following "Additional Functionality" example shows how to use more of the features exposed in the API. Sample source code, including these two examples, is available here: http://www.ooyala.com/api/ooyala_player_flex_api_demo.zip.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
applicationComplete="player.load()"
backgroundColor="#000000"
layout="vertical"
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:ooyala="com.ooyala.api.*"
>
<ooyala:Player
id="player"
width="100%"
height="100%"
embedCode="x0b2E6REM6ksHP8PMsOaWRNkq2uwLyFv"
loadComplete="player.playMovie()"
/>
</mx:Application>
In addition to the Flex ActionScript examples, we have an Flash project example available at http://www.ooyala.com/api/ooyala_player_flash_api_demo.zip.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
applicationComplete="player.load()"
backgroundColor="#000000"
layout="absolute"
xmlns:ooyala="com.ooyala.api.*"
>
<ooyala:Player id="player" width="100%" height="100%"
queryStringParameters="{source.selectedItem}"
/>
<mx:HBox y="0" horizontalCenter="0"
backgroundColor="black" backgroundAlpha="0.5"
borderColor="white" borderStyle="solid" borderThickness="1"
cornerRadius="10"
paddingLeft="10" paddingTop="10" paddingRight="10" paddingBottom="10"
>
<mx:VBox color="white" fontWeight="bold" minWidth="150">
<mx:Label text="Current Time: {player.playheadTime.toFixed(2)}s"/>
<mx:Label text="Total Time: {player.totalTime}s"/>
<mx:Label text="Volume: {(player.volume * 100).toFixed(0)}%"/>
<mx:Label text="Play State: {player.state}"/>
</mx:VBox>
<mx:ComboBox id="source" selectedIndex="0" labelField="comboboxLabel">
<mx:Array>
<mx:Object
comboboxLabel="Sample Video #1"
embedCode="x0b2E6REM6ksHP8PMsOaWRNkq2uwLyFv"
hide="sharing,fullscreen,endscreen"
/>
<mx:Object
comboboxLabel="Sample Video #2"
embedCode="sxM2I6UiPuCkPaUuWM6KObYoyA-MOBcn"
hide="info"
/>
</mx:Array>
</mx:ComboBox>
<mx:Button label="Play" click="player.playMovie()"
visible="{player.state != 'playing'}"
includeInLayout="{player.state != 'playing'}"/>
<mx:Button label="Pause" click="player.pauseMovie()"
visible="{player.state == 'playing'}"
includeInLayout="{player.state == 'playing'}"/>
<mx:Button label="seek -30s" click="player.playheadTime -= 30"/>
<mx:Button label="seek +30s" click="player.playheadTime += 30"/>
<mx:Button label="volume 25%" click="player.volume = 0.25"/>
</mx:HBox>
</mx:Application>
For situations where Javascript embeds are not accepted, such as certain blog or social networking sites, we offer this as an example of using object embed code to include the Ooyala player. We recommend using the Javascript embed wherever possible. The object embed code removes the ability for viewers to be automatically upgraded to the latest Flash version along with a lack of support for the Javascript API covered earlier in this document.
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="ooyalaPlayer" width="640" height="480"
codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
<param name="movie" value=" http://www.ooyala.com/player.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#000000" />
<param name="allowScriptAccess" value="always" />
<param name="allowFullScreen" value="true" />
<param name="flashvars" value="embedCode=9qbTrtNmh_YxuWN7ifQ38ttUkska9UF4" />
<embed src="http://www.ooyala.com/player.swf" quality="high" bgcolor="#000000" width="640" height="480"
name="ooyalaPlayer"
align="middle" play="true" loop="false" quality="high"
allowscriptaccess="always" type="application/x-shockwave-flash"
allowfullscreen="true"
flashvars="embedCode=9qbTrtNmh_YxuWN7ifQ38ttUkska9UF4"
pluginspage="http://www.adobe.com/go/getflashplayer">
</embed>
</object>