FLVPlaybackのSeekBarHandleにハマりまくりました


　
何回使っても良くわからないFLVPlaybackに今回もどっぷりハマりました。

FLVPlaybackのSeekBarHandleはムービーの再生位置を示してくれるもの。ドラッグして左右に動かすとビデオの巻き戻しや早送りができます。自分でこの機能を実装しようと思ったら少々面倒くさい（というかできるかあんまり自信ない）ので、FLVPlayback備え付けのSeekBarHandleがちゃんと使えれば便利なのですが、このSeekBarHandle、ちゃんと指定しているのに出てこないことが度々あったのです。

その原因が今まで解明できていなかったので、SeekBarHandleを仕事で使うのは極力避けていたのですが、つい最近原因を解明せざるを得ない場面に遭遇したので、この機会にきちんとSeekBarHandleと向かい合ってみました。
　
まず以下のような、FLVPlaybackを使用してムービーを再生させるFlvPlayerクラスを作成しました。FLVPlaybackおよびPlayPauseButtonなど各FLVPlaybackカスタムUI コンポーネントをnewして、割り当てているだけのシンプルなものです。

[以下のページなどを参考に]
FLV Playback カスタム UI コンポーネントの使用
http://www.gcommerce.com/jp/devnet/flash/articles/custom_flvcomp_03.html

PLAIN TEXT
ACTIONSCRIPT:
  1. package {
  2.     import flash.display.Sprite;
  3.     import flash.events.Event;
  4.     import flash.events.MouseEvent;
  5.     import fl.video.MetadataEvent;
  6.     import fl.video.FLVPlayback;
  7.     import fl.video.VideoEvent;
  8.    
  9.     public class FlvPlayer extends Sprite {
  10.         private var _path:String;
  11.         private var flvplayback:FLVPlayback;
  12.         private var playpauseBtn:PlayPauseButton;
  13.         private var mutebtn:MuteButton;
  14.         private var seekbar:SeekBar;
  15.        
  16.         public function FlvPlayer(path:String) {
  17.             _path = path;
  18.             addEventListener(Event.ADDED_TO_STAGE, _onAdded);
  19.         }
  20.        
  21.         private function _onAdded(e:Event):void {
  22.             removeEventListener(Event.ADDED_TO_STAGE, _onAdded);
  23.            
  24.             flvplayback = new FLVPlayback();
  25.             flvplayback.width = 400;
  26.             flvplayback.height = 300;
  27.             flvplayback.x = 50;
  28.             flvplayback.source = _path;
  29.             //自動再生
  30.             //flvplayback.autoPlay = false;
  31.            
  32.             // playpauseBtn
  33.             playpauseBtn = new PlayPauseButton();
  34.             playpauseBtn.buttonMode = true;
  35.             playpauseBtn.x = 50;
  36.             playpauseBtn.y = 310;
  37.             //seekbar
  38.             seekbar = new SeekBar();
  39.             seekbar.x = 89;
  40.             seekbar.y = 317;
  41.             //mutebtn
  42.             mutebtn = new MuteButton();
  43.             mutebtn.buttonMode = true;
  44.             mutebtn.x = 427;
  45.             mutebtn.y = 310;
  46.            
  47.             flvplayback.playPauseButton = playpauseBtn;
  48.             flvplayback.muteButton = mutebtn;
  49.             flvplayback.seekBar = seekbar;
  50.            
  51.             addChild(playpauseBtn);
  52.             addChild(mutebtn);
  53.             addChild(seekbar);
  54.             addChild(flvplayback);
  55.            
  56.             addEventListener(Event.REMOVED_FROM_STAGE, _onRemoved);
  57.         }
  58.        
  59.         private function _onRemoved(e:Event):void {
  60.             removeEventListener(Event.REMOVED_FROM_STAGE, _onRemoved);
  61.             flvplayback.stop();
  62.             removeChild(seekbar);
  63.             removeChild(playpauseBtn);
  64.             removeChild(mutebtn);
  65.             removeChild(flvplayback);
  66.             seekbar = null;
  67.             playpauseBtn = null;
  68.             mutebtn = null;
  69.             flvplayback = null;
  70.         }
  71.        
  72.     }
  73. }

　
各コンポーネントはFlashデフォルトのものです。それぞれ1フレーム目に書き出す、にチェックをつけるのを忘れずに。
これでFlashの1フレーム目に以下を書いて書き出したものが

PLAIN TEXT
ACTIONSCRIPT:
  1. var flvplayer:FlvPlayer = new FlvPlayer("mov01.flv");
  2. addChild(flvplayer);

　

↓このswfです。きちんと三角のSeekBarHandleが表示されています。（autoPlayはflaseにしています）
　

　
ところがMouseEventのイベントハンドラに同じことを書いた場合はSeekBarHandleが表示されなくなるのです。

PLAIN TEXT
ACTIONSCRIPT:
  1. movie01_btn.addEventListener(MouseEvent.CLICK, _onClick);
  2. function _onClick(e:MouseEvent):void {
  3.     var flvplayer:FlvPlayer = new FlvPlayer("mov01.flv");
  4.     addChild(flvplayer);
  5. }

　
↓書き出したswf。
　

　
で、結論まで長かったですが試行錯誤した結果、クリックしてすぐFlvPlayerをnewするのではなく、1フレーム間を置いてからFlvPlayerをnewすれば回避できることがわかりました。

PLAIN TEXT
ACTIONSCRIPT:
  1. movie01_btn.addEventListener(MouseEvent.CLICK, _onClick);
  2. function _onClick(e:MouseEvent):void {
  3.     addEventListener(Event.ENTER_FRAME, _onEnter);
  4. }
  5. function _onEnter(e:Event):void {
  6.     removeEventListener(Event.ENTER_FRAME, _onEnter);
  7.     var flvplayer:FlvPlayer = new FlvPlayer("mov01.flv");
  8.     addChild(flvplayer);
  9. }

　
以下のような感じでSeekBarHandleがちゃんと出てくるようになりました。最終的には2つのムービーを切り替えれるようにしています。
　

PLAIN TEXT
ACTIONSCRIPT:
  1. var flvplayer:FlvPlayer;
  2. var path:String;
  3. var moviePath:Object = {movie01_btn:"mov01.flv", movie02_btn:"mov02.flv"};
  4.  
  5. movie01_btn.addEventListener(MouseEvent.CLICK, _onClick);
  6. movie02_btn.addEventListener(MouseEvent.CLICK, _onClick);
  7. function _onClick(e:MouseEvent):void {
  8.     if (flvplayer!=null) {
  9.         removeChild(flvplayer);
  10.         flvplayer = null;
  11.     };
  12.     path = moviePath[e.target.name];
  13.     addEventListener(Event.ENTER_FRAME, _onEnter);
  14. }
  15. function _onEnter(e:Event):void {
  16.     removeEventListener(Event.ENTER_FRAME, _onEnter);
  17.     flvplayer = new FlvPlayer(path);
  18.     addChild(flvplayer);
  19. }

　

※サンプルの動画は、ニコニ・コモンズにアップされているものを使わせていただきました。

COMMENTS [3]

  1. TaoGOGO :

    看起来像个flash控件。很佩服你哦，我紧紧学过as2，没学过AS3.0。我觉得做flash既需要美术功底，又需要有编程能力，佩服下

    11 月 26th, 2010 at 14:22:17
  2. web前端寒风 :

    技术不分国界，虽然看不懂日文，呵呵

    12 月 9th, 2010 at 13:45:09
  3. technical analysis of stock market :

    MarketPitFall, a tool that predicts market trends of Stock Market to boost your investment.Merely wanna input on few general things, The website style and design is perfect, the subject material is really superb. “The sun sets without thy assistance.” by The Talmud.,

    7 月 15th, 2012 at 0:19:15

トラックバック URL :