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

Crear un complemento de módulo personalizado

El reproductor de Ooyala le permite crear módulos personalizados de JavaScript con nuestro modelo de eventos y las API de JavaScript.

Para crear un módulo personalizado para su reproductor, solo necesita el reproductor y las herramientas que utiliza normalmente para crear sus páginas web HTML5 y su código JavaScript. Puede cargar los complementos del reproductor personalizado directamente en su página web y, a continuación, adjuntarlos a su reproductor de Ooyala.

Nota: El complemento del módulo personalizado del reproductor V3 (basado en JavaScript) cumple la misma función de personalización que el módulo Open Player Framework (OPF) del reproductor V2. Este es un módulo basado en Flash. Además, utilizamos el término módulo personalizado y complemento de módulo personalizado en el reproductor V3 en lugar de Open Player Framework (OPF). La terminología de OPF se usa exclusivamente con el reproductor V2. Puede realizar personalizaciones similares, pero en el reproductor V3 debe utilizar JavaScript para su desarrollo. Sin embargo, el reproductor V3 le permite pasar a través del reproductor V2 módulos OPF en una caja negra. A diferencia de los módulos OPF del reproductor V2, que se deben enviar a Ooyala, puede cargar los módulos personalizados del reproductor V3 directamente en su página web.

Ejemplo de JavaScript

El siguiente ejemplo de JavaScript, sampleV3module.js, ilustra cómo crear una interfaz de usuario personalizada sin cargar nuestra interfaz de usuario predeterminada. Debe definir su módulo personalizado con el método OO.plugin. Puede utilizar este ejemplo como plantilla para crear módulos personalizados que se pueden embeber dentro de un reproductor de Ooyala para la sindicación. Este ejemplo:
  • Crea una interfaz de usuario con un botón de pausa y reproducción situado fuera de la pantalla de vídeo y también muestra la hora actual y la duración del vídeo. Una barra deslizante se coloca debajo de la fila de los botones reproducir/pausa.

  • Hace uso de un archivo jquery-ui.css externo para la tematización.

  • Se suscribe a tres eventos. Tenga en cuenta que los eventos tienen el prefijo OO.EVENTS.

  • Publica eventos de reproducción, pausa y búsqueda.

  • Devuelve el constructor de la clase del módulo para que el reproductor de Ooyala pueda crear una instancia del módulo personalizado correctamente.

/**
* ©2012-2013 Ooyala, Inc.All Rights Reserved.*/
// sampleV3module.js
// Each custom module must be defined using the OO.plugin method
// The first parameter is the module name
// The second parameter is a factory function that will be called by
// the player to create an instance of the module. This function must
// return a constructor for the module class (see the end of this example)

OO.plugin("SampleUIModule", function (OO, _, $, W) {
    /**
     * Custom UI Sample Module
     * Modules developed using this template can later be embedded 
     * within Ooyala's™ player for syndication.
     *
     * A sample UI module to demonstrate how to build a custom UI
     * instead of loading our default UI. This module contains a 
     * simple play/pause button and scrubber bar. 
     * Parameters:
     * OO, namespace for PlayerV3
     * _, a reference to underscore.js lib.
     * $, a reference to jQuery lib.
     * W, a reference to window object.
     */

    // load jquery UI lib and css:
    var Sample = {};
    $('head').append('<link rel="stylesheet" type="text/css" href="http:
    //ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">');

    // This section contains the HTML content to be used as the UI
    var CUSTOMER_TEMPLATE = 
         '<div class="customer_ui" style="position:relative; top:20px;' +
         'height:80px; left:31px; width:640px;">' +
            '<input class="playButton" type="button" value="play">' +
            '<input class="pauseButton" type="button" value="pause">' +
            '<span>Current Time:</span><span class="currentTime"></span>' +
            '<span>Duration:</span><span class="duration"></span>' +
            '<div class="slider" style="margin-top:20px; width:640px;">
            </div>' + 
          '</div>';

    // A constructor for the module class
    // will be called by the player to create an instance of the module
    // First parameter is a reference to a message bus object, which
    // is required to be able to pub/sub to player events.
    // Second parameter is a unique id assigned to the module for 
    // debugging purposes
    Sample.SampleUIModule = function (mb, id) {
        this.mb = mb; // save message bus reference for later use
        this.id = id;
        this.duration = NaN;
        this.playing = false;
        this.init(); // subscribe to relevant events
    };

    // public functions of the module object
    Sample.SampleUIModule.prototype = {
        init: function () {
            // subscribe to relevant player events
            this.mb.subscribe(OO.EVENTS.PLAYER_CREATED, 'customerUi',
            _.bind(this.onPlayerCreate, this));
            this.mb.subscribe(OO.EVENTS.PLAYHEAD_TIME_CHANGED,
                'customerUi', _.bind(this.onTimeUpdate, this));
            console.log("before CONTENT_TREE_FETCHED");
            this.mb.subscribe(OO.EVENTS.CONTENT_TREE_FETCHED,
                'customerUi', _.bind(this.onContentReady, this));
        },

        // Handles the PLAYER_CREATED event
        // First parameter is the event name
        // Second parameter is the elementId of player container
        // Third parameter is the list of parameters which were passed into
        // player upon creation.
        // In this section, we use this opportunity to create the custom UI
        onPlayerCreate: function (event, elementId, params) {
            this.playerRoot = $("#" + elementId);
            this.rootElement = this.playerRoot.parent();
            this.playerRoot.find(".plugins").append("<div class=
            'fooMessage' " +
                "style='color:red; text-align:center; font-size:2em;'>" + 
                "Hello this is a custom UI</div>");

            console.log("hello, init here!!!", this.rootElement, this.id);
            $(CUSTOMER_TEMPLATE).insertAfter("#" + elementId);

            W.$( ".slider" ).slider({
                stop: _.bind(this.onSliderStop, this),
                slide: _.bind(this.onSlide, this)
            });
            this.playButton = this.rootElement.find('.playButton');
            this.pauseButton = this.rootElement.find('.pauseButton');
            this.playButton.click(_.bind(this.onPlay, this));
            this.pauseButton.click(_.bind(this.onPause, this));
        },


        // Handles CONTENT_TREE_FETCHED event
        // Second parameter is a content object with details about the
        // content that was loaded into the player
        // In this example, we use the parameter to update duration
        onContentReady: function (event, content) {
            this.duration = content.duration / 1000;
            this.rootElement.find(".duration").html(this.duration);
            W.$( ".slider" ).slider("option", "max", this.duration);
        },

        // Handles PLAYHEAD_TIME_CHANGED event
        // In this example, we use it to move the slider as content is played
        onTimeUpdate: function (event, time, duration, buffer) {
            // update scrubber bar.
            if (duration > 0) {
                this.duration = duration;
            }
            this.rootElement.find(".currentTime").html(Math.round(time));
            this.rootElement.find(".duration").html(Math.round(this.duration));
            W.$( ".slider" ).slider("option", "max", this.duration);
            W.$( ".slider" ).slider("option", "value", time);
        },

        onPlay: function () {
            this.playerRoot.find(".fooMessage").remove();
            this.rootElement.find('video.video').css('left', '0px'); 
            //this is temporary code.
            this.play();
            this.playing = true;
        },

        onPause: function () {
            this.pause();
            this.playing = false;
        },

        // Sends PLAY event to start playing the video
        play: function () {
            this.mb.publish(OO.EVENTS.PLAY);
        },

        // Sends PAUSE event to pause the video
        pause: function () {
            this.mb.publish(OO.EVENTS.PAUSE);
        },

        // Sends SEEK event to seek to specified position
        seek: function (seconds) {
            this.mb.publish(OO.EVENTS.SEEK, seconds);
        },

        onSlide: function (event, ui) {
            console.log("onSlide");
            if (this.playing) {
                this.pause();
            }
        },

        onSliderStop: function (event, ui) {
            this.seek(ui.value);
            if (this.playing) {
                this.play();
            }
        },

        __end_marker: true
    };

    // Return the constructor of the module class.
    // This is required so that Ooyala's player can instantiate the custom
    // module correctly.
    return Sample.SampleUIModule;
});
});

Ejemplo HTML del módulo personalizado

El siguiente archivo HTML utiliza el código JavaScript del módulo personalizado mostrado anteriormente. En este archivo:
  1. Hemos incluido jQuery, jQuery UI y jQuery CSS para la tematización.
  2. Hemos establecido el parámetro de la plataforma con prioridad para HTML5.
  3. Llamamos el código sampleV3module.js que hemos creado anteriormente.
/**
* ©2012-2013 Ooyala, Inc.All Rights Reserved.*/

<html>

<head>
<title>Sample Player Module</title>
<script src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/
jquery-ui.css' rel='stylesheet' type='text/css'>
<script src="http://player.ooyala.com/v3/<replace with player branding id>
?platform=html5-priority"></script>
<script src="sampleV3module.js" type="text/javascript"></script>

</head>

<body>

<div id='ooyalaplayer' style='width:640px;height:360px'></div>
<script>
	OO.ready(function() {
		OO.Player.create('ooyalaplayer', 
		<'replace with video embed code'>);
	});
</script>
<noscript><div>You must enable Javascript to watch this video</div></noscript>

</body>
</html>
Nota: En este ejemplo, el contenedor div representa el espacio físico de la página HTML. Cuando creamos el reproductor, debemos introducir la ubicación del reproductor en la página web. Esto requiere que el contenedor div y el nombre del reproductor tengan el mismo nombre. El nombre del reproductor ooyalaplayer proporciona una referencia a la ubicación del reproductor en la página. El primer uso de ooyalaplayer tiene lugar en el HTML para nombrar el contenedor div. La segunda referencia a ooyalaplayer se produce dentro de JavaScript para crear el reproductor dentro de la ubicación del contenedor div.