JavaScript Demo and Examples (Player V2 Deprecated)

JavaScript Examples demonstrate the embedding capability of the Ooyala player and the capability to add additional features to the player using the Player API.

JavaScript Example

Important: Ooyala Player V2 is deprecated and is scheduled to be disabled on 2018-01-31. After that date, Player V2 will no longer play your video or audio content. Customers still using Player V2 need to migrate to Player V4 (see Player V4.

A demo of the following example is available at http://demo.ooyala.com/product-demos/playerScripting-demo.html. The demo shows the use of JavaScript APIs.

<!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>JavaScript Example of the Ooyala Player API</title>
</head>

<body>

<script src="http://player.ooyala.com/player.js?callback=
receiveOoyalaEvent&playerId=player&width=480&height=360&embedCode=
llMDQ6rMWxVWbvdxs2yduVEtSrNCJUk1&version=2"></script>
<script>

function receiveOoyalaEvent(playerId, eventName, eventArgs) {
var ciecc,ttc,ecc,vc;

 switch(eventName) {
   case "playheadTimeChanged":
     onPlayheadTimeChanged(eventArgs);
     break;
   case "stateChanged":
     onStateChanged(eventArgs);
     break;
   case "currentItemEmbedCodeChanged":
     onCurrentItemEmbedCodeChanged(eventArgs);
     ciecc=eventArgs;
     break;
   case "totalTimeChanged":
     onTotalTimeChanged(eventArgs);
     ttc=eventArgs;
     break;
   case "embedCodeChanged":
     onEmbedCodeChanged(eventArgs);
     ecc=eventArgs;
     break;
   case "volumeChanged":
     onVolumeChanged(eventArgs);
     break;
   case "apiReady":
     //note: apiReady event has no eventArgs (3rd call-back parameter)
     onCurrentItemEmbedCodeChanged(ciecc);
     onTotalTimeChanged(ttc);
     onEmbedCodeChanged(ecc);
     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>
CurrentItemEmbedCode <span id="currentItemEmbedCode"></span>
<br>
CurrentItemTitle <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>

<%= partial :"ganalytics" %>
</body>
</html>

   

Player Object Embed Code

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://player.ooyala.com/player.swf" />
<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://player.ooyala.com/player.swf" bgcolor="#000000" width="640" 
  height="480"
  name="ooyalaPlayer"
  align="middle" play="true" loop="false"
  allowscriptaccess="always" type="application/x-shockwave-flash"
  allowfullscreen="true"
  flashvars="embedCode=9qbTrtNmh_YxuWN7ifQ38ttUkska9UF4"
  pluginspage="http://www.adobe.com/go/getflashplayer">
</embed>
</object>

   

Was this article helpful?