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です。
ユニットを表示します。
unit.show():void
ユニットを非表示にします。
unit.hide():void
動画を再生します。
unit.play():boolean
再生中または、ユニットが再生命令を受け付けられないときはfalseを、それ以外はtrueを返します。
動画を一時停止します。
unit.pause():boolean
一時停止中または、ユニット一時停止命令を受け付けられないときはfalse、それ以外はtrueを返します。
動画の長さを秒数で返します。
unit.getDuration():number
現在の再生時間を秒数で返します。
unit.getCurrentTime():number
ユニットオブジェクトを解放して、コンテンツの配信を停止します。
unit.unload():void
この関数を実行すると、表示中のユニットは消え、それ以降のユニットオブジェクトに対するすべての操作ができなくなります。 これは、今後ユニットを一切使用しない時に使用します。
イベントはユニットの状態が変化したことをアプリケーションに通知します。
アプリケーションはaddEventListenerまたはremoveEventListener関数を使用して、特定のイベンに対してリスナー関数を追加または削除できます。
指定したイベントに対して、指定したリスナー関数を追加します。
unit.addEventListener(event:string, listener:function):void
指定したイベントの指定したリスナー関数を削除します。
unit.removeEventListener(event:string, listener:function):void
ユニットの状態が変化したとき通知されるイベントです。
listener = function(state:number)
変化した新しい状態はstateで取得できます。
stateの取りうる値は次の表のとおりです。
| State | Description |
|---|---|
LOKA.UNIT_STATE.Thumbnail |
サムネイル画像が表示されている状態を表します。 |
LOKA.UNIT_STATE.Playing |
動画が再生中の状態を表します。 |
LOKA.UNIT_STATE.Paused |
動画が一時停止の状態を表します。 |
LOKA.UNIT_STATE.Ended |
動画の再生が終了した状態を表します。 |
動画の読み込みに失敗した場合など、ユニット内部でエラーが発生した場合に通知されます。
listener = function()
UNIT APIがサポート対象とするSCENEのテンプレートはスタンダードプレイヤーのみです。
SafariやChromeでは一部のバージョンで自動再生といった、HTML5 Video要素に対する制約により、playなどの一部の関数が動作しません。