カスタムモジュールプラグインの作成

Ooyalaプレイヤーでは、弊社イベントモデルおよびJavaScript APIを使用して、JavaScriptの カスタムモジュールを作成することができます。

プレイヤーのカスタムモジュールを作成するには、プレイヤーと、普段HTML5ウェブページを作成しているツール、 そしてJavaScriptコードを用意する必要があります。カスタムプレイヤープラグインは ウェブページに直接読み込み、Ooyalaプレイヤーに組み合わせることができます。

注: プレイヤーV3カスタムモジュールプラグイン (JavaScriptベース) はプレイヤーV2オープンプレイヤーフレーム ワーク (OPF) モジュールと似たカスタマイズにおける役割を果たします。これはFlashベースのモジュールになります。 また、プレイヤーV3では、オープンプレイヤーフレームワーク (OPF) の代わりに、カスタムモジュール およびカスタムモジュールプラグインという用語を使用します。OPFはプレイヤーV2に対してのみ使用する用語になります。 同様のカスタマイズを実行することができますが、プレイヤーV3では開発にJavaScriptを 使用しなければいけません。しかしながら、プレイヤーV3ではプレイヤーV2 OPFモジュールをブラック ボックス方式でパススルーすることはできません。必ずOoyalaに送信しなければいけなかったプレイヤー V2 OPFモジュールとは違い、プレイヤーV3カスタムモジュールは直接ウェブページに読み込むことが できます。

JavaScriptのサンプル

次のサンプルJavaScript, sampleV3module.jsはデフォルトのUIを読み込まずに カスタムUIを作成する方法を説明しています。OO.pluginメソッドを 使用して、カスタムモジュールを定義する必要があります。このサンプルをテンプレートとして使用して カスタムモジュールを作成し、シンジケーションのためにOoyalaプレイヤー内に埋め込むことが できます。このサンプルでは、
  • ビデオ表示の外側に再生およびポーズボタンが配置されていて、現在時刻 およびビデオの長さを表示するUIを作成します。 再生/ポーズボタンがある列の下にスライダーバーを配置します。

  • テーマ構成のために外部 jquery-ui.css ファイルを 使用します。

  • 3つのイベントにサブスクライブします。イベントにはプリフィックス OO.EVENTS が付きます。

  • 発行者はイベントを再生、ポーズ、シークします。

  • モジュールクラスコンストラクタを返し、Ooyalaプレイヤーはカスタムモジュール のインスタンスを正しく作成できます。

/**
* ©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;
});
});

カスタムモジュールHTMLのサンプル

次のHTMLファイルは上記カスタムモジュール JavaScriptコードを使用します。このファイルでは、
  1. テーマ構成のために、jquery、jquery UI、jquery CSSをインクルードします。
  2. プラットフォームパラメータはHTML5 priorityに設定しました。
  3. 前もって作成したsampleV3module.jsコードを呼び出します。
/**
* ©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>
注: このサンプルでは、divコンテナはHTMLページの物理的空間を表しています。 プレイヤー作成時、ウェブページ内のプレイヤーの位置を渡す必要があります。 これにより、divコンテナとプレイヤー名に同じ名前を与える必要があります。 プレイヤー名の ooyalaplayer はページ上のプレイヤーの位置への参照を提供します。プレイヤー名の ooyalaplyaer を初めて使用するのは、HTML内でdivコンテナに名前を付ける ためで、2度目の ooyalaplayer の参照は、JavaScript内でdivコンテナの場所にてプレイヤーを 作成するためです。

この記事はお役にたちましたか?