Error message

User warning: The following module is missing from the file system: fast_404. For information about how to fix this, see the documentation page. in _drupal_trigger_error_with_delayed_logging() (line 1143 of /mnt/www/html/ooyala/docroot/includes/bootstrap.inc).

Uso del archivo HTML del reproductor

El archivo player.html es el lugar donde implementa la lógica del reproductor y define la forma en que interactúa con los elementos de la interfaz de usuario del player.js.

Se puede pensar que el default.js existe en un entorno de pruebas remoto y el default.html en un entorno de pruebas local. No pueden comunicarse entre sí. Si utiliza JavaScript para crear su aplicación y construye un script que afecte directamente al html por defecto, no podrá hacerlo a menos que acceda al contenido del iframe como contenedor remoto. El default.html es un archivo local y el default.js se carga en un entorno remoto. El iframe de Windows 8 le permite hablar directamente con el archivo remoto default.js.
Dentro del archivo player.html:
  1. Usted proporciona el ID de imagen de marca del reproductor para su aplicación.
  2. Incluye una etiqueta de cuerpo y dentro de ella define el diseño del reproductor y crea una instancia del reproductor.
  3. Al final de la página, incluye la función OO.ready, que indica que el reproductor está listo para la reproducción.
  4. También incluye una función receiveMessage para recopilar los mensajes del registro de la consola default.html.
  5. A continuación, puede implementar una lógica adicional, si desea agregar funcionalidad.

Ejemplo: archivo Player.HTML

En el siguiente ejemplo, se define el diseño del reproductor y la referencia al CSS para configurar el estilo del reproductor. En la etiqueta del cuerpo, creamos una instancia del reproductor.

 
<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>