- 2010-03-01 (月) 14:00
- action script
再生コントロールバーのない、高画質垂れ流し動画を使うケースは、なるたけロード時間を短くすることを心がけると思います。
FLVPlayback コンポーネントを使う場合、
- 再生の途中で途切れない程度に十分にダウンロード(バッファ)できたら再生開始
- それでも途中でバッファがなくなったら「ローディング中ですよ」アイコンとか表示
- そこからある程度バッファが貯まったら再生開始
という実装が良さそう。
まず1は FLVPlayback コンポーネントのデフォルトのバッファ時間は0.1らしい(via:godagoda.net)ので、5秒ぐらいにする。僕もプログレッシブダウンロードなんで「低速環境で画質アップ」効果を期待。
//バッファタイムをデフォルト0.1から5秒に変更 my_flvPlayback.bufferTime = 5;
2は bufferingStateEntered イベントを監視して、途中でバッファの為に動画が一時停止したらローディングアイコンをaddChildして表示する。bufferingStateEntered は途中で止まる時だけじゃなく、しょっぱなも呼び出されるイベントだということに注意。
再び再生が開始されたら playingStateEntered イベントでローディングアイコンを消す。
このときの再生って、また bufferTime で設定した秒数ぶん(5秒)バッファできたら再開するってことでいいのかな。
(※今から2,3を実装するところ)
FLVPlayback コンポーネント上に FLV ロードするような場合、ローカル環境上の「ダウンロードのシュミレート」ではシュミレートできないらしく、サーバーにアップして試すんだけど、今時ネットも高速回線なので、なかなかこういった低速回線用のデバッグが面倒。
追記:Firefox Throttle(Windowsのみ) というアドオンを使えば、回線速度を低速シミュレートできると kinkuma_design さまに教えていただきました。
追記2:上記2,3も実装。シークバーのないビデオコンテンツだとしても、ローディング状況を確認しつつ開発したい時は、コンポーネントインスペクタから、SeekBarをステージ上に配置して、インスタンス名 sb(任意)とした時
my_flvPlayback.seekBar = sb;
とするだけでローディング状況をバーで知ることができて簡単。あとはお好みで BufferingBar も使えます。こちらはバッファ状態になった時だけ床屋のくるくるみたいなのが表示されるというパーツ。
別方法として FLVPlayback コンポーネントにスキンをあてる方法もあるけど、なぜか当て込むと コンポーネントのwidthが2倍に算出されておかしかったのでやめた。スキンの場合はスキン用のswfも別途アップロードするのを忘れずに。
追記3:バッファ状況も十分なのに映像が止まることがある。裏側でガベージコレクションが発動してる疑惑。もしそうなら、動画再生中は強制的に GC を止めたい。できるのか?
追記4:ここまでの記事を全部見直し。再生が始まった後で、ダウンロード待ちの状態に戻して十分にダウンロードされてから自動的に再生を再開するには、pause() メソッドを使用し、次に playWhenEnoughDownloaded() メソッドを使用します。とある。3 の playingStateEntered も「バッファリング状態に移行してから再生状態に移行することが多いので、play() メソッドを呼び出した直後または対応するコントロールをクリックした直後には、イベントが発生しない場合があります。」とあるので、上記リスト通りの実装すると信頼性低くなるなこりゃ。
playingStateEntered がデリケートなんだったら stateChange で監視しようと思ったんだけど、同じ動画を再度見ようとすると STATE_CHANGE すら動かない場合がある。困った。
ここまでわかったのは、VideoEvent.READY だからといって、即 playWhenEnoughDownloaded() とは限らないので、playWhenEnoughDownloaded() で再生スタートしたタイミングで任意メソッドを動かしたいんだけど、playingStateEntered も stateChange も(ローカルでは動くのに、ネットに上げると)バッファされないケース(でもstateは変わってるのになぁ?)で呼び出されないケースがあるからこれから独自実装しようとしている。
- Newer: ActionScript 3.0 イメージエフェクト
- Older: UIと面白さが結びつくケース