UNIT API

Overview

UNIT APIを使うと、SCENEから配信する動画プレイヤーを制御できます。 このAPIの関数を使うことで、動画の再生や一時停止、プレイヤー状態の変更を通知するイベントリスナーを追加できます。

はじめに

以下のHTMLサンプルは動画の再生が始まってから、6秒経ったときに一時停止にするサンプルページです。


<!DOCTYPE html>
<html>
  <body>
    <!-- UNIT APIを使って制御するプレイヤーを表示するSCENEの配信タグ -->
    <script type="text/javascript" class="loka-unit">!function(e,t,s,a,i,n,r,c,o,f,l,m,p){for(o=t.getElementsByTagName(a),m=o.length;m--;)if(f=o[m],f.className.match(/loka-unit/))if(!f[s]){f[s]=!0,l=f;break}if(l)if(p=e[s]||(e[s]={}),p[r])if(p[r][i])p[r][i](c,l);else p[r][n].push([c,l]);else p[r]={},p[r][n]=[[c,l]],f=t.createElement(a),f.type="text/javascript",f.src="https://loka-cdn.akamaized.net/scene/"+r+".js",f.async=1,l.parentNode.insertBefore(f,l)}(window,document,"LOKA","script","init","tags","splayer",{"id":"3W_zu8ecCBcKUDik"});</script>

    <script>
      // プレイヤーの読み込みが完了し、ユニットオブジェクトを受け取る
      var unit = null;
      window.onLOKAUnitLoaded = function(_unit, deliveryID) {
        unit = _unit;

        // ユニットの状態変更通知のイベントリスナーを追加して、
        // 再生中の状態になったら、playVideo関数を実行します。
        unit.addEventListener('onStateChange', function(state) {
          if (state === LOKA.UNIT_STATE.PLAYING) {
            playVideo();
          }
        });
      };

      var done = false;
      function playVideo() {
        if (done) {
          return;
        }

        // 6秒経ったら、pause関数を呼び出して、一時停止する
        setTimeout(function() {
          done = true;
          unit.pause();
        }, 6000);
      }
    </script>
  </body>
</html>
      

ユニットオブジェクトの取得

UNIT APIはSCENEの配信タグより配信されたコンテンツに対して直接操作できるユニットオブジェクトを取得する必要があります。 配信タグによるコンテンツの読み込みが完了すると、onLOKAUnitLoaded関数が実行されます。 ユニットオブジェクトはこの関数の第1引数によって渡されます。

同一ページないに複数の配信タグを設置した場合、取得したユニットオブジェクトがどの配信タグによって配信されたコンテンツを操作するのかを判断する必要があります。 UNIT APIでは、配信タグに含まれる配信IDを使って判断できます。 配信タグの後方にある、idと記された部分が配信IDです。 これはonLOKAUnitLoaded関数の第2引数によって渡されるため、ユニットオブジェクトに対応する配信タグを判断できます。

上記のサンプルでは、3W_zu8ecCBcKUDikが配信IDです。

関数

show

ユニットを表示します。

unit.show():void

hide

ユニットを非表示にします。

unit.hide():void

play

動画を再生します。

unit.play():boolean

再生中または、ユニットが再生命令を受け付けられないときはfalseを、それ以外はtrueを返します。

pause

動画を一時停止します。

unit.pause():boolean

一時停止中または、ユニット一時停止命令を受け付けられないときはfalse、それ以外はtrueを返します。

getDuration

動画の長さを秒数で返します。

unit.getDuration():number

getCurrentTime

現在の再生時間を秒数で返します。

unit.getCurrentTime():number

unload

ユニットオブジェクトを解放して、コンテンツの配信を停止します。

unit.unload():void

この関数を実行すると、表示中のユニットは消え、それ以降のユニットオブジェクトに対するすべての操作ができなくなります。 これは、今後ユニットを一切使用しない時に使用します。

イベント

イベントはユニットの状態が変化したことをアプリケーションに通知します。 アプリケーションはaddEventListenerまたはremoveEventListener関数を使用して、特定のイベンに対してリスナー関数を追加または削除できます。

addEventListener

指定したイベントに対して、指定したリスナー関数を追加します。

unit.addEventListener(event:string, listener:function):void

removeEventListener

指定したイベントの指定したリスナー関数を削除します。

unit.removeEventListener(event:string, listener:function):void

onStateChange

ユニットの状態が変化したとき通知されるイベントです。

listener = function(state:number)

変化した新しい状態はstateで取得できます。 stateの取りうる値は次の表のとおりです。

State Description
LOKA.UNIT_STATE.Thumbnail サムネイル画像が表示されている状態を表します。
LOKA.UNIT_STATE.Playing 動画が再生中の状態を表します。
LOKA.UNIT_STATE.Paused 動画が一時停止の状態を表します。
LOKA.UNIT_STATE.Ended 動画の再生が終了した状態を表します。

onError

動画の読み込みに失敗した場合など、ユニット内部でエラーが発生した場合に通知されます。

listener = function()

サポート対象

UNIT APIがサポート対象とするSCENEのテンプレートはスタンダードプレイヤーのみです。

SafariやChromeでは一部のバージョンで自動再生といった、HTML5 Video要素に対する制約により、playなどの一部の関数が動作しません。