2007.12.12
category
tag
comments

AS3のFlvPlayBackを試してみる

AS2の時とコードの記述が少し変わったみたい。ポイントはメタデータの取得方法とムービー状態(再生・停止・シークなど)をどう捕まえるか。メタデータに関してはMetadataEventのMETADATA_RECEIVED をリスナーに登録しておいて、受け取るハンドラの中でそれぞれ取り出してやればよい(左上の白文字)。次にムービー状態に関してはVideoEventに捕まえたいイベントオブジェクトを登録しておくだけ。あとはハンドラ内でムービーの再生時間などを処理してやればよい。playheadPercentageを使うと、現在の再生ヘッドが全体の何パーセントなのかを示してくれる。トータルタイムにこのパーセンテージを乗算すれば現在の再生時間が簡単に出せる。

デフォルトのシークバーコンポーネントには再生ヘッドまでのプログレス表示をしてくれない。今回はシークバーと同じ幅のムービークリップをあらかじめシークバーコンポーネントの中に配置しておいてscaleXにplayheadPercentageの値を入れて動作させてみた(シークバーの白い部分)。

package
{
	import flash.display.MovieClip;
	import fl.video.MetadataEvent;
	import fl.video.FLVPlayback;
	import fl.video.VideoEvent;
	import flash.text.TextField;

	public class Main extends MovieClip
	{
		//------------------------------
		//    コンストラクタ
		//------------------------------
		public function Main()
		{
			player.source = "test.flv";

			player.addEventListener(MetadataEvent.METADATA_RECEIVED, onMetadata);
			player.addEventListener(VideoEvent.READY, onReady);
			player.addEventListener(VideoEvent.PLAYING_STATE_ENTERED, onPlaying);
			player.addEventListener(VideoEvent.PLAYHEAD_UPDATE, onPlayHead);
			player.addEventListener(VideoEvent.PAUSED_STATE_ENTERED, onPause);
			player.addEventListener(VideoEvent.COMPLETE, onComplete);

			player.playPauseButton = playBtn;
			player.muteButton = muteBtn;
			player.backButton = backBtn;
			player.seekBar = seekBar;
			player.fullScreenButton = fullScreenBtn;
		}

		//------------------------------
		//    メタデータの取得
		//------------------------------
		private function onMetadata(e:MetadataEvent):void
		{
			meta.appendText("FrameRate = " + player.metadata.framerate + "\n");
			meta.appendText("VideoDataRate = " + player.metadata.videodatarate + "\n");
			meta.appendText("Height = " + player.metadata.height + "\n");
			meta.appendText("Width = " + player.metadata.width + "\n");
			meta.appendText("Duration = " +player.metadata.duration + "\n");
		}

		//------------------------------
		//    FLVの初期化
		//------------------------------
		private function onReady(e:VideoEvent)
		{
			var time = String(Math.floor(player.totalTime));
			var minute = String(Math.floor(time / 60));
			var second = String(time % 60);

			if (minute < 10)
			{
				minute = "0" + minute;
			}

			if(second < 10)
			{
				second = "0" + second;
			}

			total.text = "/ " + minute + ":" + second;
			now.text = "00:00";
			stateText.text = "PAUSE";

			seekBar.seekProgress.scaleX = 0;
		}

		//------------------------------
		//    FLVの再生時
		//------------------------------
		private function onPlaying(e:VideoEvent)
		{
			stateText.text = "PLAY";
		}

		//------------------------------
		//    FLVの再生中
		//------------------------------
		private function onPlayHead(e:VideoEvent)
		{
			var time = Math.floor(player.totalTime * player.playheadPercentage / 100);
			var minute = Math.floor(time / 60);
			var second = time % 60;

			if (minute < 10)
			{
				minute = "0" + minute;
			}

			if(second < 10)
			{
				second = "0" + second;
			}

			now.text = minute + ":" + second;

			//-----[再生ヘッドまでのプログレスバー]
			seekBar.seekProgress.scaleX = player.playheadPercentage / 100;
		}

		//------------------------------
		//    FLVの一時停止時
		//------------------------------
		private function onPause(e:VideoEvent)
		{
			stateText.text = "PAUSE";
		}

		//------------------------------
		//    FLVの再生終了時
		//------------------------------
		private function onComplete(e:VideoEvent)
		{
			stateText.text = "FINISH";
		}
	}
}

14 Comments

  1. simo Says

    フルスクリーンモードを実装するときはSWFObjectに1行追加するだけ。

    so.addParam(“allowFullScreen”, “true”);

  2. kung Says

    private function onReady(e:VideoEvent)

    と、この行でエラーが発生している

  3. simo Says

    >kungさん
    どんなエラーが出てますか?こちらではエラーは出てませんので、教えて頂ければ、解決できるかもしれません。

    ちなみにonReady()の中でTextFieldへの参照があるので、これが原因ではないでしょうか?ステージにこれらのインスタンス名でTextFieldを配置しているでしょうか?

    total.text = "/ " + minute + ":" + second;
    now.text = "00:00";
    stateText.text = "PAUSE";
    seekBar.seekProgress.scaleX = 0;
    
  4. kung Says

    出力の後でno
    now.text
    total.text
    meta.appendTextはす
    べてヌルです

  5. simo Says

    >kungさん
    うーん、よく分からないですね。もしかしてflvにメタデータが埋め込まれていないとか?

  6. end Says

    初歩的な質問で申し訳ありません。
    コンパイル時に”未定義のプロパティplayerへのアクセスです”
    となってしまうのですが、どこかで定義しなくてはいけないのでしょうか。

  7. simo Says

    >endさん
    FLVPlaybackをステージに配置して、インスタンス名を「player」にして下さい。それで参照が通るはずですー。

  8. end Says

    ありがとうございます!
    まだ参照が通りませんが
    いろいろと試して見ます。

  9. end Says

    simoさん
    先日はありがとうございました。
    インスタンス名を「player」に設定したり、いろいろと試してみましたが
    やはり「1120:未定義のプロパティplayerへのアクセスです」が返ってきてしまいます。

    AS3.0に移行するのも大変ですね・・・orz

  10. simo Says

    >endさん
    ステージにFLVPlaybackコンポーネントを配置してるんですよね?おかしいですねー。Flaファイルをアップしましたので、こちらで確認してみて下さい。

  11. end Says

    simoさん

    度々ありがとうございます!
    simoさんのファイルだとしっかり通っていますね。
    環境等チェックしてもsimoさんと同じなんですが
    自分のはサッパリです・・・orz

    参考にさせていただき、とことんデバッグしてみます。
    本当にありがとうございました!

    P.S.
    新婚旅行、気をつけて行ってきてくださいね〜

  12. simo Says

    >endさん
    むー。何が原因なんでしょねー。原因が分ったら教えて欲しいです!

    新婚旅行、楽しんできます!ありがとうございます!w
    豚インフルとか不安ですが。(違

  13. AS3のFLVPlaybackメモ

    FLVPlaybackのメモ
    ・フルスクリーンにした時に、勝手に全画面にならないようにする

    flvPB.fullScreenTakeOver = false;

    ・再生ヘッドのポインタ(SeekBarHandle)が消えない
    タイムラインのフレームを…

  14. [...] http://www.5ive.info/blog/archives/65 コメント (0) [...]

Post a comment




Comment

Trackbacks

この記事のコメント・トラックバックRSS