Kollus VG Controller

*Latest version 1.2.4

概要

Kollus VG Controllerは、Videogatewayから提供されるメディアの一部のコントロールを顧客のウェブサイト内で実装できるようにサポートするJavaScriptライブラリです。Kollus VG Controllerには次の特徴があります。

Videogatewayで自動的に実行されるプレーヤータイプに関係なく、同じコードで制御できます。
簡単なインストールと使い方
プレーヤーの検出や実行について心配する必要がありません。
サードパーティのJavaScriptライブラリは必要ありません。

メソッドとイベントリストの隣に表示されるV2、V3、V4 Playerなどは、該当のメソッドやイベントをサポートするプレーヤーを示します。
V2：通常、暗号化されたファイルはV2 Playerを介して再生されます。V2 Playerは、IEの場合はActiveX、ChromeまたはFirefoxの場合はNPAPIを使用するプレーヤーです。
V3：暗号化されたファイルがEdgeまたはChromeの45バージョン以上のウェブブラウザから呼び出される場合、ハイブリッドHTML5プレーヤーが実行されます。
V4：暗号化されていないファイルの場合、HTML5プレーヤーが実行されます。
名前の横にプレーヤーが表示されない場合、それはすべてのプレーヤーが共通でその機能をサポートしていることを意味します。

アップデートリスト

作成日

バージョン

備考

セットアップ

VgControllerClient

(顧客の html pageに挿入)

...
<script src="/path/to/vg-controller-client.1.1.16.min.js"></script>
<script>
window.onload = function() {
    try {
        var controller = new VgControllerClient({
            target_window: document.getElementById('child').contentWindow
        });

        // ここからイベントリスナーを登録するか、ウェブページElementにメソッドをbindします。
    } catch(e) {
        // Videogateweay Controller Libraryは window.postMessage APIを使用しないため、
        // 該当機能を対応しないウェブブラウザには動作しません。
        // この部分に適切な fail-over コードを追加してください。
        console.error(e);
    }
};
</script>
<body>
    <iframe id="child" src="http://v.kr..."></iframe>
</body>
...

VgControllerClient 生成の際にパラメータで転送するtarget_windowには、Webページに添付しているKollus Videogateway iframeのHTMLElementにcontentWindow属性を入力します。
このスクリプトはwindow.postMessage API を使ってPlayerとの通信を行うため、該当機能に対応していないブラウザでは動作しません。
Web Page内部に複数のiframeをembedしている場合、制御するiframe毎にVgControllerClient を生成する必要があります。
以前バージョンとの互換性を考慮して(v0.5以前) new VgControllerClient()の代わりにnew Kollus.VideogatewayController()を使用しても正常に動作します。
try-catch文のException code listは以下のようになります。

code

message

description

VgControllerServer

(Kollus VG view html pageに挿入)

...
<script src="/path/to/vg-controller-server.1.1.6.min.js"></script>
<script>
window.onload = function() {
    try {
        var player = [PLAYER オブジェクト Element (v2, v3, v4)];
        var controller = VgControllerServer(player, {
            player_type: 'v4', //[v2, v3, v4]
            target_window: window.parent,
            media_info: {media_info_object} ////1.1.4バージョンにて字幕関連メソッドを使用する際に必要です
        });

        //player オブジェクトの生成及び初期化が完了されてからイベントを登録してください。
        //player オブジェクトが初期化されてない状態で setEventListeners メソッドを呼出す場合、
        //VG-Controllerが正常に動作しない可能性があります。
        controller.setEventListeners();
    } catch(e) {
       　// VG Controllerは window.postMessage APIを使用しているため、
        // 該当機能に対応していないブラウザでは動作しません。
        // ここに適切な fail-over コードを追加してください。
    }
};
</script>
...

CDN

Vg-Controller Client LibraryをCDNで提供します。最新バージョンのライブラリを使用するには以下のリンクを挿入してください。

https://file.kollus.com/vgcontroller/vg-controller-client.latest.min.js

以前バージョンのライブラリを使用するにはlatestの代わりにバージョン名を入力してください。

https://file.kollus.com/vgcontroller/vg-controller-client.1.1.4.min.js

"Integrity属性を使用することで、VG-Controller Client Libraryの悪意のあるスクリプト変更を防ぐことができます。スクリプトを呼び出す際に、適切なバージョンのIntegrity属性値を追加してください。"

<script src="https://file.kollus.com/vgcontroller/vg-controller-client.1.2.3.min.js" integrity="sha256-esUCCL4RPYMS8AR+Sl3lNrFa5M+zgpt4Gb77qtz66OY=" crossorigin="anonymous"></script>

バージョン毎 Integrity属性値は属性の値が必要な場合担当者にお問い合わせください。

VR Contents (Mobile Device)

iframe内で呼び出される360 VRコンテンツの場合、AndroidおよびiOSデバイスで再生時に問題が発生します。Androidの場合、Orientation値が正しく適用されず、左右の方向が逆になります。iOSの場合、iOS 13以降、DeviceMotion権限を取得する必要があり、Gyroscopeが正常に動作するようになりますが、この権限はiframe内で取得できないため、正常に動作しません（iOS 13以前のバージョンではSafari設定から 'Motion & Orientation Access'オプションを直接変更する必要があります）

これらの問題を解決するには、VG-Controller 1.1.10以降をインストールする必要があり、VG-ControllerクライアントからDeviceMotionイベントを自動的に登録して、VG-Controllerサーバーと通信します（外部のiframeイベントを定期的に内部に転送します）

OSの場合、Controller.set_vr_overlay()メソッドを実行する必要があります。詳細については、下記のリファレンスの「メソッドリスト」の「set_vr_overlayメソッド」をご参照ください。

Known Issue iOS 13.4 バージョンでは権限を取得しても DeviceMotionの rotationRate値が正常に発生しないエラーが報告されています。

Intent Scheme Call Bug (iframe in Android)

プレイヤーページがiframe内でVGを呼び出すように構成されている場合、一部のモバイルAndroidデバイスでは専用プレイヤー（Kollus Player App）が正しく実行されないことがあります。（Androidデバイス環境では、Intent Schemeを使用して呼び出すように設定されていますが、Chromeブラウザの場合、‐iframeを使用すると正常に動作しないエラーが報告されています。）このような場合、VG-Controller 1.1.15以降を使用すると正常に動作します。

別途具現するコードはないので, VG-Controllerが環境を分析して自動分析し処理します。

イベントリスニング

Playerのイベントが発生した際に使用者が定義したcallback関数を実行するためのイベントリスナー(EventListener)を登録する方法となります。

controller.on('event_name', function(param) {
    // イベントリスナー
});

単一イベントに複数のリスナーを登録することができます。この場合、イベントが発生すると登録されている全てのリスナーが実行されます。

controller.on('event_name', function(param) {
    // 1番目のリスナー
});
controller.on('event_name', function(param) {
    // 2番目のリスナー
});

// イベント発生の際に1番目、2番目リスナーが全て実行
// 但し、JAVA Scriptイベントループとcallback関数の実行方式によって
// リスナーが順番通りに実行されない可能性があります。

イベントリスナーを登録する関数である「on」はメソッドチェイニング(Method chaining)に対応しています。

controller.on('event_name_1', function(param) {
    // 1番目のリスナー
}).on('event_name_2', function(param) {
    // 2番目のリスナー
});

一つ以上のリスナーを登録した場合、イベント発生時に登録されたすべてのリスナーが実行されます、ただし、javascriptイベントループとcallback関数が実行する方法によって実行の順番が変わる可能性があります。

イベントリスト

メソッド使用

Videogateway Controller Libraryが対応するメソッドを呼び出す方法となります

controller.play();

上記の記載だけで呼び出すことができますが、場合によってはパラメーターが必要なメソッドもあります。

controller.set_volume(90);

メソッドリスト

＊メソッドリストについては左側はメソッドリストを参考してください。

PreviousScheme Option Nextイベントメソッド

Last updated 7 months ago