2011/11/08

【Flex】FlvPlayer作成 part2

FlvPlayer作成Part2ということで今回はシークバーをつけてみようと思います。

今回は前回と同様コンポーネントを配置し別にイベントを作成しました。

以下、ソースです。

起動時にinit()を使ってシークバーにイベントを付加します。
シークバーは動画の再生時間と同期させ、シークバーが変更されたら
動画の再生時間を変更する処理を行います。

script.as
// 必要なものをインポート
import mx.events.VideoEvent;
import mx.events.SliderEvent;

// 初期化
public function init():void
{ 
  // シークバーにイベントを追加
  this.time.addEventListener(SliderEvent.CHANGE, changePlayHeadTime);
}

// シークバーによる再生時間の変更イベント
public function changePlayHeadTime(event:SliderEvent):void
{
  this.player.playheadTime = event.value;
}
main.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
 layout="absolute" width="400" 
 height="400" creationComplete="init()">

    <mx:Script source="script.as" />
 
    <mx:Panel id="panel" x="10" y="10" width="380" height="380" layout="absolute" >
  <mx:VideoDisplay 
   x="20" y="10" 
   source="sample.flv"
   width="320" height="240" 
   id="player" autoPlay="false" 
   autoRewind="false"/>
  <mx:HSlider 
   id="time" 
   x="20" y="250" 
   width="320" height="15" 
   minimum="0"
   maximum="{player.totalTime}"
   value="{player.playheadTime}"
   liveDragging="true"
   showTrackHighlight="true"
   allowTrackClick="true"/>
  <mx:Button id="play" x="158" y="276" label="再生" click="player.play()" />
  <mx:Button id="pause" x="214" y="276" label="一時停止" click="player.pause()" />
  <mx:Button id="stop" x="292" y="276" label="停止" click="player.stop()" />
 </mx:Panel>
 
</mx:Application>
んー、シークはされてるんだけどなんか動きが変だな 他の動画サイトと動きが違う・・・ このへんどうにかしたいなぁ とりあえず、それは次回ということで 終わり

0 件のコメント:

コメントを投稿