プレーヤのボリューム設定を記憶する方法

Video Cloud プレーヤでは、一度設定したボリューム値はプレーヤを貼り付けているページをリロードすると仕様上、初期値(最大)に戻ってしまいます。一度設定したボリューム設定を継続させたいと考えるケースも多くあると思います。
そこで今回は、一度設定したボリューム設定を記憶して復活させるためのプラグインをご紹介します。

このプラグインを用いるとユーザが設定したボリューム設定を Flash Cookie に記憶して、その値をプレーヤがロードされる際に利用してボリューム設定を復活させることができます。
 

設定方法

  1. ここから最新のソースを取得して、プラグイン(SWF ファイル)をビルドします。
  2. 1. で取得したファイルを HTTP アクセス可能な場所に配備します。その際その URL を記録してください。
  3. Video Cloud にログインをして、ブライトコーブ プレーヤの編集画面のプラグイン タブで 2. で記録した URL を追加して保存をしてください。

以上で設定は完了です。
あとはプラグインを設定したプレーヤを所望の場所に貼りつけるだけです。
 

ソースコードについて

ソースコードはここから zip ファイルとして取得できます。

以下にソースコードの初期化部分(ActionScript3)を示します。

override protected function initialize():void
{
    _videoPlayerModule = player.getModule(APIModules.VIDEO_PLAYER) as VideoPlayerModule;

    _currentVolume = _videoPlayerModule.getVolume();
    setupEventListeners();
    setInitialVolume(_volumeSharedObject.data.volume, _volumeSharedObject.data.muted);
 }

private function setupEventListeners():void
{
    _videoPlayerModule.addEventListener(MediaEvent.VOLUME_CHANGE, onVolumeChange);
    _videoPlayerModule.addEventListener(MediaEvent.MUTE_CHANGE, onMuteChange);

    _volumeChangeTimer.addEventListener(TimerEvent.TIMER_COMPLETE, onTimerComplete);
}

private function setInitialVolume(pVolume:Number, pMuted:Boolean):void
{
    if(pMuted)
    {
        _videoPlayerModule.mute();
    }
    else
    {
        _videoPlayerModule.setVolume(pVolume);
    }
}

プラグイン初期時には initialize() メソッドが呼ばれます。ここでは VideoPlayerModule のインスタンスを取得して、現在のボリューム設定を取得します。そして setupEventListeners() メソッドを呼び出し VOLUME_CHANGE, MUTE_CHANGE, 2 つのイベントを監視します(TIMER_COMPLETE は非同期処理を制御するもので直接ボリューム設定とは関係ありません)。
そして、setInitialVolume() メソッドで Flash Cookie の値に基づきボリューム設定を行います。

次にソースコードのイベントハンドラ部分を示します。

private function onVolumeChange(pEvent:MediaEvent):void
{
    _videoMuted = false;
    _currentVolume = _videoPlayerModule.getVolume();

    if(!_volumeChangeTimer.running)
    {
        _volumeChangeTimer.start();
    }
}

private function onMuteChange(pEvent:MediaEvent):void
{
    saveVolumePreference(_currentVolume, _videoPlayerModule.isMuted());
}

private function onTimerComplete(pEvent:TimerEvent):void
{
    trace(_currentVolume);
    saveVolumePreference(_currentVolume);
}

private function saveVolumePreference(pVolume:Number, pMuted:Boolean = false):void
{
    _volumeSharedObject.data.volume = pVolume;
    _volumeSharedObject.data.muted = pMuted;

    _volumeSharedObject.flush(); 
}

VOLUME_CHANGE イベントが発行されると onVolumeChange() メソッドが呼ばれます。現在のボリューム値を取得して、Flash Cookie に保存します。
VOLUME_CHANGE はボリュームスライダーが変化するたびに呼ばれますので必要以上に頻繁に呼ばれる可能性があるため、Timer を使い 1 秒間隔以下でイベントが処理されないように処置がされています。
MUTE_CHANGE イベントが発行されると onMuteChange() メソッドが呼ばれて、ミュートの値(ミュートかアンミュートか)と現在のボリューム値を Flash Cookie に保存します。

非常に簡単な仕組みですのでソースコードを見ると何を行っているのかわかるかと思います。これを応用して様々な状態を記録して復活させることも自由に行えますので是非チャレンジしてみてください。