Using the Player HTML File

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.

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.

 
<html>
 <head>
  <title>Player V3 Demo</title>
  <script src='http://player.ooyala.com/v3/MzZiMzc1ZDUzZGVlYmMxNzA3Y2MzNjBk
  ?platform=html5'></script>
   </head>
   <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>
 <script>
  // This app is based on a blog post from MS
 // http://alastaira.wordpress.com/2011/09/26
   /creating-a-windows-8-metro-slippy-map-application/
 // All logic is impleted in player.html for now
    var embedCodes = ["45cmZqNDrKn7TvtpfGa9k9fQSeyK4VaI",
                     '1lM21wNDrCTF8nA4YaQibBh16vv4D8pM',
                     "UxaXI5MzruPkO9medlrVQ9sZbgpqgMxr"];
     var currentIndex = 0;
     var oplayer = null;

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

       function onPlayButtonClicked() {
           oplayer.play();
       }

       function onReloadButtonClicked() {
           currentIndex = (currentIndex + 1) % embedCodes.length;
           oplayer.setEmbedCode(embedCodes[currentIndex]);
           oplayer.play();
       }

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

       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;
           createPlayer(OO);
       });

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

     </script>
   </body>
</html>