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

Tutorial del reproductor básico

Comience a utilizar el reproductor de Ooyala con un sencillo tutorial.

Para comenzar a trabajar con el reproductor de Ooyala, puede utilizar este tutorial del reproductor básico. Este tutorial no requiere programación por parte del usuario.

A continuación se muestra un ejemplo más avanzado, que incluye el uso del bus de mensajes y diversas funciones de programación de Ooyala: Un vistazo al reproductor más avanzado de JavaScript.

Paso 1: Cree una página web sencilla

Comience por crear una página web HTML5 básica. Con HTML5 solo necesitará una <!doctype> declaration: <!DOCTYPE html>. Su página web básica tendrá un aspecto similar al siguiente:
<!DOCTYPE html>
<html>
<head>
<title>My Test Player V3 Web Page </title>
</head>
<body>
    My Player V3 Content.
</body>
</html>
Nota: Sus páginas web HTML5 deben poseer siempre la <!DOCTYPE html> declaración para funcionar correctamente en todos los navegadores. El IE9 de Windows es particularmente estricto y no puede procesar la página correctamente si dicha declaración no se incluye.

Paso 2: Cargue su reproductor V3 de Ooyala

Cargue un reproductor proporcionando un player_branding_id. La ID de imagen de marca del reproductor especifica el nombre de un reproductor específico. Tal como se muestra en la siguiente captura de pantalla, puede obtener este ID de reproductor de la pestaña Backlot → Gestionar → Embebido. Este ID será una cadena alfanumérica que se asemeja a una cadena de código embebido.

Para obtener información adicional sobre el player_branding_id , consulte el tema “ Reproductores ” en la documentación Centro de Soporte de Ooyala → Desarrollador.

Nota: El reproductor de Ooyala no utiliza el player_id que forma parte de las versiones anteriores del reproductor. El nuevo estilo de embebido elimina este requisito.  Con el reproductor actual, los desarrolladores de JavaScript ahora crean un objeto de reproductor y hacen referencia a él directamente en el nuevo reproductor y para su uso futuro.

También es necesario especificar los módulos que desea cargar. Estos pueden ser módulos de terceros u otros módulos personalizados. Si tiene módulos OPF personalizados, seguirán funcionando solo cuando se utilice Flash o Flash como alternativa.

Tal como se muestra en el siguiente ejemplo, este paso carga el código para el reproductor y le permite cargar más módulos personalizados. De esta forma se separa la carga del código del reproductor y la creación del propio reproductor. Usted realiza una carga del reproductor incluso si pretende crear varios reproductores.

<head>
<!-- Load Ooyala Player -->
<script src='http://player.ooyala.com/v3/insert_player_branding_id'></script>
<!-- Load additional custom modules -->
<script src='/mymodule.js'></script>
</head>
Puede colocar la primera línea del script, el script de carga del reproductor, ya sea en las etiquetas del encabezado o las etiquetas del cuerpo. Si coloca la línea del script:
  • En las etiquetas <head> primero se carga el reproductor y luego se carga el resto de la página web.

  • Fuera de las etiquetas <head> primero se carga la página web y luego el reproductor.

Es usted quien debe decidir el tipo de prioridad de carga que desea implementar.

Paso 3: Coloque su reproductor

Cree un elemento <div> que contenga la interfaz de usuario del reproductor y la pantalla de vídeo con un ID de DOM único. De forma predeterminada, la interfaz de usuario del reproductor ocupará todo el espacio proporcionado por el las etiquetas <div> del contenedor. El uso de las etiquetas <div> es obligatorio. Las etiquetas <div> crean un contenedor para el reproductor que le permite controlar la posición del reproductor y posibilita que el reproductor se adapte a los cambios en el diseño del sitio.  En el siguiente ejemplo, especificamos un div id de “playerwrapper”, que representa el player_container_id . Este ID de div se utilizará posteriormente para hacer referencia al reproductor cargado.
Nota: Los términos ID de div y player_container_id son sinónimos. Representan el ID de DOM del contenedor donde creará el reproductor.
<!-- Player Placement -->
<div id='playerwrapper' style='width:480px;height:360px;'></div>
 
Nota: El estándar HTML requiere que cada ID de div sea único.

Paso 4: Cree su reproductor

Incluya un script de JQuery justo después del <div> para crear e inicializar el reproductor, asocie un vídeo al reproductor e incluya los parámetros de cadena de consulta que desee agregar. Inicialmente, debe crear manualmente el código embebido de su vídeo para el reproductor. En el ejemplo siguiente, creamos un reproductor de vídeo y lo colocamos en el contenedor <div> identificado por el ID de div. playerwrapper.
      <script>
        var videoPlayer = OO.Player.create('playerwrapper','video_embed_code', {
              // additional params go here
              });
             videoPlayer.play();
    </script>