【Flex】FlvPlayer作成 part3【シークバー最終】

前回よりかなり間が開いてしまいましたが
シークバーの挙動が完成しました(ホントはもっと前に完成していました…)

前回のFlvPlayerではシークした際にブルブルと変な挙動で動いていましたのでそれを
修正した形になります。
基本的に前回よりばっさりと変わっている所があります。
特にMain.mxmlの方は中身自体ほとんど変わっています。

以下ソースです。

Main.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
  layout="absolute" creationComplete="init()"
  width="320" height="280">

  <mx:Script source="script.as" />
  
  <mx:VideoDisplay
    x="0" y="0"
 width="320" height="240"
 id="player" autoPlay="false"/>
  <mx:Button id="chMode" x="0" y="240" label="再生" enabled="true" width="60" />
  <mx:HSlider 
    x="60" y="240" 
 id="time" value="0"
 width="260" height="15"
 minimum="0" maximum="{player.totalTime}"
 liveDragging="false"
 showTrackHighlight="true"
 allowTrackClick="true"
 />
</mx:Application>
script.as
import mx.controls.*;
import mx.events.VideoEvent;
import mx.events.SliderEvent;
import flash.events.MouseEvent;

// 再生ボタンのフラグ
private var buttonFlg:Boolean;

// 初期化
public function init():void
{
　　　　// 再生する動画の指定
 this.player.source = "sample.flv";
 // 動画の読み込み
 this.player.load();
 // playheadUpdateの発生間隔
 this.player.playheadUpdateInterval = 1;
 // 動画の再生時間とシークバーを同期するイベント
 this.player.addEventListener(VideoEvent.PLAYHEAD_UPDATE, updateSeekbar);
 this.player.addEventListener(VideoEvent.STATE_CHANGE, changeStatus);
 // シークバーによって再生時間を変更するイベント
 this.time.addEventListener(MouseEvent.CLICK, removePlayUpdateEvent);
 this.time.addEventListener(SliderEvent.THUMB_DRAG, pauseVideo);
 this.time.addEventListener(SliderEvent.THUMB_RELEASE, addPlayUpdateEvent);
 this.time.addEventListener(SliderEvent.CHANGE, changePlayheadTime);
    // 再生ボタンのイベント
 this.chMode.addEventListener(MouseEvent.CLICK, changeButtonEvent);
 buttonFlg = true;
}

// 動画の再生時間とシークバーを同期するイベント
public function updateSeekbar(e:VideoEvent):void
{
 this.time.value = this.player.playheadTime;
}

// シークバーによる再生時間の変更イベント
public function changePlayheadTime(e:SliderEvent):void
{
 this.player.playheadTime = this.time.value;
}

// プレイヤーの状態が変化したときに再生ボタンを有効化するイベント
public function changeStatus(e:VideoEvent):void
{
 // プレイヤーが応答可能な場合にボタンを有効化
 if (this.player.stateResponsive == true)
 {
  this.chMode.enabled = true;
 }
}

// シークが開始されたときに動画とシークバーの同期を解除するイベント
public function removePlayUpdateEvent(e:MouseEvent):void
{
 this.player.removeEventListener(VideoEvent.PLAYHEAD_UPDATE, updateSeekbar);
}

// シーク中のイベント 動画が再生中の場合一時停止に変更する
public function pauseVideo(e:SliderEvent):void
{
 if (this.player.playing == true)
 {
  this.player.addEventListener(VideoEvent.PLAYHEAD_UPDATE, updateSeekbar);
  this.player.pause();
 }
 this.time.value = e.value;
}

// シーク終了時に動画とシークバーの同期イベントを新しく付加するイベント
public function addPlayUpdateEvent(e:SliderEvent):void
{
 this.player.addEventListener(VideoEvent.PLAYHEAD_UPDATE, updateSeekbar);
 this.player.playheadTime = e.value;
}

// 再生と一時停止を切り替えるイベント
public function changeButtonEvent(e:MouseEvent):void
{
 if (buttonFlg == true)
 {
  this.player.play();
  buttonFlg = false;
  this.chMode.label = "一時停止";
 }
 else
 {
  this.player.pause();
  buttonFlg = true;
  this.chMode.label = "再生";
 }
}
script.asが非情に見づらくて申し訳ないですが、仕方ないです。
これでシークバー関連は終わりです。
次こそはプログレスバーに入りたいと思います。


終わり