Using the Player V3 HTML File (Deprecated)

The player.html file is where you implement the logic of the player and define how to interact with the UI elements of the player.js.

Important: Ooyala Player V3 is deprecated and is scheduled to be disabled on 2018-01-31. After that date, Player V3 will no longer play your video or audio content. Customers still using Player V3 need to migrate to Player V4 (see Migrating from Player V3 and Player Migration FAQ).
You can think of the default.js as existing in a remote sandbox and the default.html in a local sandbox. They can’t communicate with each other. If you use JavaScript to build your app and construct a script to directly affect the default html, you won’t be able to unless you access the contents of the iframe as a remote container. The default.html is a local file and the default.js is loaded in a remote environment. Window 8 iframe lets you talk directly to the remote default.js file.
Within the player.html file:
  1. You provide the player branding id for your app.
  2. You include a body tag and within it define the layout of the player and instantiate the player.
  3. At the end of the page, you include the OO.ready function which indicates that the player is ready for playback.
  4. You also include a receiveMessage function to gather messages from the default.html console log.
  5. You then can implement additional logic, if you want to add functionality.

Example: Player.HTML File

In the following example, we define the layout of the player and reference the css to style the player. In the body tag, we instantiate the player.

  <title>Player V3 Demo</title>
  <script src='
   <body style=""margin:0; padding:0; background:black;">
       <div id="playerwrapper" style="width: 100%; height:400px"></div>
       <div id="status" style="width:100%; height:50px; color:red;"> </div>
       <button id="playButton" value="Play" disabled="true">Play</button>
       <button id="reloadButton" value="Play" disabled="true">Change to 
       new embed code</button>
  // This app is based on a blog post from MS
 // All logic is impleted in player.html for now
    var embedCodes = ["45cmZqNDrKn7TvtpfGa9k9fQSeyK4VaI",
     var currentIndex = 0;
     var oplayer = null;

     function onVideoPlaying() {
         var status = document.getElementById("status");
         status.innerHTML = "Playing";

       function onPlayButtonClicked() {

       function onReloadButtonClicked() {
           currentIndex = (currentIndex + 1) % embedCodes.length;

       function createPlayer(OO) {
           var embedCode = embedCodes[currentIndex];
           oplayer = OO.Player.create('playerwrapper', embedCode, {
               width: '100%',
               height: '100%'
           oplayer.subscribe(OO.EVENTS.PLAYING, "ie_iframe", 

       OO.ready(function (OO) {
           var playButton = document.getElementById("playButton");
           playButton.disabled = false;
           playButton.onclick = onPlayButtonClicked;

           var reloadButton = document.getElementById("reloadButton");
           reloadButton.disabled = false;
           reloadButton.onclick = onReloadButtonClicked;

       function receiveMessage(e) {
           // Notification from default.html
           console.log("from parent",;
       window.attachEvent("onmessage", receiveMessage);


Was this article helpful?