埋め込み再生プレイヤーの作成や調節をするため、Webサイト上でUstreamの埋め込み用iframeを使用できるようにします。
Ustream埋め込みAPIを使用することで、実況放送や保存動画の基本的な操作をしたり、また実況放送や保存動画の重要なイベントにアクセスすることができます。
Ustream 埋め込み API ではpostMessage DOM APIを使う必要があります。 postMessage APIをサポートしていないブラウザでは動作しません。
iframeのIDもしくはiframeのDOMオブジェクト自体を設定することで埋め込みAPIのインスタンスを作成します。:
<iframe id="UstreamIframe" src="//ustream.tv/embed/1524" width="640" height="480"></iframe>
var viewer = UstreamEmbed('UstreamIframe');
Ustream の埋め込み用 API では以下のメソッドを使用できます:
必要な引数を設定し、埋め込みプレイヤーで使えるコマンドを実行します。
callMethod
で使用できるコマンドは以下の通りです。:
読み込んだチャンネルや保存動画の再生を開始します。
viewer.callMethod('play');
配信中の放送、もしくは保存されている録画の再生を一時停止します。
viewer.callMethod('pause');
配信中の放送、もしくは保存されている録画の再生を停止し、再生開始時まで戻ります。
viewer.callMethod('stop');
チャンネルや保存動画をプレイヤーに読み込みます。追加で引数を2つ設定する必要があります。:
type
- 読み込むコンテンツの種類 (channelもしくは videoを設定します)id
- 読み込むコンテンツのID
viewer.callMethod('load', 'video', 5903947);
viewer.callMethod('load', 'channel', 1524);
保存録画の再生を、指定した再生位置までジャンプさせます。
引数を1つ設定する必要があります。:
viewer.callMethod('seek', 180);
動画再生時の音量を設定します。
引数を1つ設定する必要があります。:
viewer.callMethod('volume', 0); //ミュート
設定可能であれば、放送の画質を設定します。
引数を1つ設定する必要があります。:
qualityID
key from received quality options in quality
eventviewer.callMethod('quality', 16); //高画質に設定
埋め込み再生プレイヤーのプロパティを取得します。
このメソッドは非同期で処理され,取得した値はコールバック関数の引数として使用できます。
getProperty
によってアクセスできるプロパティには下記のものがあります:
保存されている動画の 再生時間(秒単位)を取得する。
viewer.getProperty('duration', function (duration) {
...
});
読み込んだライブ放送の現在の視聴者数を取得します。
viewer.getProperty('viewers', function (viewerNumber) {
...
});
再生中の保存動画の進行状況を、秒単位の値で取得します。
viewer.getProperty('progress', function (progress) {
...
});
このコンテンツの種類とIDを、配列形式の値で取得します。
viewer.getProperty('content', function (content) {
// content == ['channel', 1524]
// or
// content == ['recorded', 123456]
...
});
埋め込み再生プレイヤーは、動作再生中にいくつかのイベントを発生させます。 このメソッドでは、それらのイベントに対してイベントハンドラを追加したり削除したりできます。
イベントハンドラに設定するコールバック関数は、以下二つの引数を受け取ります:
type
イベントの種類data
optional 発生したイベントに沿って送られてくるデータaddListener
と removeListener
で使用できるイベントは下記の通りです。:
読み込んだチャンネルが放送停止状態から放送状態になった時に実行されます。
viewer.addListener('live', function (type, data) {
...
});
読み込んだチャンネルが放送状態から放送停止状態になった時に実行されます。
viewer.addListener('offline', function (type, data) {
...
});
読み込んで再生中の保存動画が終了したときに実行されます。
viewer.addListener('finished', function (type, data) {
...
});
読み込んだコンテンツが再生開始されるか停止されるかした時に実行されます。
data引数には再生中か停止中を表すboolean型の値が入ります。:
playing
(boolean型)
viewer.addListener('playing', function (type, data) {
...
});
放送サイズが使用可能になった時、もしくは変更されたときに実行されます。(変更にはフラッシュモードの場合にのみ通知されます)
data引数には、再生プレイヤーの幅と放送のアスペクト比を元に算出した埋め込みiframeのサイズが入ります。 再生プレイヤーの操作用バーが使える状態では、その操作バーの高さもサイズに含まれています。
data引数に入るのは、再生プレイヤーのサイズ(高さ,幅)をピクセル単位で表す配列型の値です:
size
(配列型) ピクセル単位で表された [width
, height
]
viewer.addListener('size', function (type, data) {
...
});
放送画質の設定が使用可能になった時に実行されます。
data引数として取得される画質オブジェクトには、"label"や"active"といったその品質を表すステータスが格納されています。 画質オブジェクトが複数取得される場合は、"0"や"1"といった品質を識別するためのIDも付けられます。:
label
(文字列型) "480p"のように、ユーザーの操作画面上に表示される値が入ります。 active
(booelan型) この画質が使われているか、もしくは設定されているかを表します。
viewer.addListener('quality', function (type, data) {
...
});
// example quality object
{
"0":{"label":"240p","active":false},
"1":{"label":"360p","active":false},
"2":{"label":"480p","active":false},
"16":{"label":"BEST","active":true}
}
放送や録画に埋め込まれている同期用メタデータを受信した場合に実行されます。ウェブサイト上での演出をライブ配信や録画放送と同期させるために使います。
取得される引数: data (オブジェクト型)
viewer.addListener('syncedmeta', function (type, data) {
...
});
再生しているコンテンツが何らかの理由で変更された場合に実行されます。 getProperty('content')メソッドで取得できる値と同じ値が、data引数に入ります。
取得される引数: data (配列型)
viewer.addListener('content', function (type, data) {
...
});