今日は仕事でFLVPlayBackを使ったFLV再生用のFlashに対して、こんな要望が入ってきた。
最終的には次のようなやり方でそれぞれ解決しました。
- 初期状態は一番最後のコマで停止させておく
- 再生が押されたら通常通り再生
- 再生が完了したらリピートさせずに最後のコマで停止させる
最終的には次のようなやり方でそれぞれ解決しました。
1. 初期状態で最終コマに再生ヘッダを持っていく方法
使用したメソッド:
FLVPlayback.seekPercent(): 指定したFLVPlaybackインスタンスの再生ヘッダを引数で指定した値(単位:%)の位置に移動させる
使用したイベント:
FLVPlayback.ready: FLVの読み込みが完了したタイミングに送出されます
説明:
ご覧のとおり、このメソッドでは引数に指定した値通りの割合の位置へ再生ヘッダを移動してくれます。例えば50秒のFLVを扱う「myFLV」というFLVPlaybackインスタンスがあり、それに対してmyFLV.seekPercent(50)と指定すると50秒の50%である25秒の位置に再生ヘッダを移動してくれます。
今回の要件では、「最終コマに移動させたい」ということになるので、autoPlayをfalseにした上でFLVの読み込み完了を示すreadyをイベントとして登録し、seekPercent(100)を指定してあげればよいわけです。
ちなみにこの時点でのFLVの状態を示すstatusプロパティは「seeking」になります。複雑な処理をする場合にはこの状態を判別することが多くなるのかなぁという気がしたので補足しておきます。
関連:
FLVPlayback.seekPercent()
http://livedocs.adobe.com/flash/8_jp/main/00003600.html
2. 再生ボタンが押されたら再生
使用したプロパティ:
FLVPlayback.playheadTime: 再生ヘッダがいる位置の秒数を示す値
FLVPlayback.totalTime: FLV全体の秒数を示す値
使用したイベント:
FLVPlayback.playheadUpdate: FLV再生中、0.25秒ごとに送出される
説明:
ここの考え方が今回いちばん悩んだところ。最初は単純にFLVPlayback.play()で再生スタートすればよいと思っていました。ところが前述のとおり最終コマにヘッダを移動させた状態でplayすると再生ヘッダは最初のコマの位置に移動し終了します。。。よくよく考えると当然といえば当然ですね。通常FLVはリピートがオフのとき最後まで再生したら再生ヘッダを最初のコマに移動させます。つまり最後のコマを越えたplayが終了の条件であり、今回のようにseekPercent(100)で最後のコマに移動させた位置からplayしても一度playが実行されこの終了条件に当てはまり再生ヘッダが最初に戻るだけで処理が終了するんですね。
じゃ、どうしようかと悩んだ挙句、注目したのがplayheadTimeプロパティとtotalTimeプロパティ。これは再生ヘッダの位置の秒数を教えてくれるplayheadTimeとFLV全体の秒数を教えてくれるtotalTimeが同じ値なら現在再生ヘッダが終了地点にいることがわかり、これらを使ってFLVを操作するスキンの再生ボタンに処理を加えればいい感じに行くのでは??と。
が、うまくplayheadTimeの値が取得できず、0となってしまう。seekPercent(30)としてみたりしても0となるのです。どうやら、playheadTimeはstatusがplay中じゃないと取得できないようです。前述のとおりseekPercentで再生ヘッダを動かすとstatusはseekingとなります。これが起因しているようでした。
statusプロパティはリードオンリーのプロパティのため強引にやることもできず、さらにプロパティやメソッドを調べてみるのですがいい感じのものが見つからない。そこで視点を変えてイベントをよーく見渡してみました。そこで見つかったのが、playheadUpdateです!これのおかげで光明が差しました。
playheadUpdateは再生中の0.25秒ごとに発生するイベントです。つまりseekPercent(100)の位置からplayして再生ヘッダが最初に戻ったタイミングで必ず起こるイベントなのです。そこで取った方法はというと、playheadUpdateのイベントの中でplayheadTimeを取得してその値が0且つstateがplaying以外のときに強制的にstartメソッドを実行させるというやり方です。これで見事に最終コマからのスタートが実現されました。
関連:
VideoPlayer クラス
http://livedocs.adobe.com/flash/8_jp/main/00003644.html#849900
FLVPlayback.state
http://livedocs.adobe.com/flash/9.0_jp/main/00003077.html
3. 再生が完了したらリピートさせずに最後のコマで停止させる方法
説明:
いよいよラストの処理です。ここで使用するプロパティやイベントはすべて前述のものです。
使用したイベントはplayheadUpdateです。この0.25秒ごとに発生するイベントの中でplayheadTimeとtotalTimeプロパティを観察しplayheadTimeの値がtotalTime以上になったらseekPercent(100)に再生ヘッダを移動させる形です。
こんな感じでこの要望をクリアさせました。
ところが帰宅前に再生中に一時停止が気かないというバグが...。原因は2のところの処理でstateがplaying以外のときに強制的にstartさせているのが原因かと。これは条件判定ひとつなので明日対応しようと思います。
やってみた感じ、FLVPlaybackを使用する際はイベント、特にplayheadUpdateが肝になる予感がします。複雑になるとこの0.25秒にラグが生じることもありそうで頼りすぎるとはまりそうなので注意が必要かもしれません。
【サンプル】
※スクリプトは会社にあるためちょっと違うかもしれず...。明日、バグの件とあわせアップします。
import mx.video.*;
my_FLVPlybk.autoPlay = false;
var listenerObject:Object = new Object();
listenerObject.ready = function(eventObject:Object):Void {
my_FLVPlybk.seekPercent(100);
};
listenerObject.playheadUpdate = function(eventObject:Object):Void {
if(my_FLVPlybk.playheadTime>=my_FLVPlybk.totalTime)
my_FLVPlybk.seekPercent(100);
else if(my_FLVPlybk.playheadTime==0 && my_FLVPlybk.state == 'rewinding')
my_FLVPlybk.play();
};
my_FLVPlybk.addEventListener("ready", listenerObject);
my_FLVPlybk.addEventListener("playheadUpdate", listenerObject);
結局、else if(my_FLVPlybk.playheadTime==0 && my_FLVPlybk.state == 'rewinding')としました。
再生ヘッダがseekPercent(100)の位置から再生された際に一番初めのコマに戻るのですがそのときのstateがrewindingだったためこうしました。
使用したメソッド:
FLVPlayback.seekPercent(): 指定したFLVPlaybackインスタンスの再生ヘッダを引数で指定した値(単位:%)の位置に移動させる
使用したイベント:
FLVPlayback.ready: FLVの読み込みが完了したタイミングに送出されます
説明:
ご覧のとおり、このメソッドでは引数に指定した値通りの割合の位置へ再生ヘッダを移動してくれます。例えば50秒のFLVを扱う「myFLV」というFLVPlaybackインスタンスがあり、それに対してmyFLV.seekPercent(50)と指定すると50秒の50%である25秒の位置に再生ヘッダを移動してくれます。
今回の要件では、「最終コマに移動させたい」ということになるので、autoPlayをfalseにした上でFLVの読み込み完了を示すreadyをイベントとして登録し、seekPercent(100)を指定してあげればよいわけです。
ちなみにこの時点でのFLVの状態を示すstatusプロパティは「seeking」になります。複雑な処理をする場合にはこの状態を判別することが多くなるのかなぁという気がしたので補足しておきます。
関連:
FLVPlayback.seekPercent()
http://livedocs.adobe.com/flash/8_jp/main/00003600.html
2. 再生ボタンが押されたら再生
使用したプロパティ:
FLVPlayback.playheadTime: 再生ヘッダがいる位置の秒数を示す値
FLVPlayback.totalTime: FLV全体の秒数を示す値
使用したイベント:
FLVPlayback.playheadUpdate: FLV再生中、0.25秒ごとに送出される
説明:
ここの考え方が今回いちばん悩んだところ。最初は単純にFLVPlayback.play()で再生スタートすればよいと思っていました。ところが前述のとおり最終コマにヘッダを移動させた状態でplayすると再生ヘッダは最初のコマの位置に移動し終了します。。。よくよく考えると当然といえば当然ですね。通常FLVはリピートがオフのとき最後まで再生したら再生ヘッダを最初のコマに移動させます。つまり最後のコマを越えたplayが終了の条件であり、今回のようにseekPercent(100)で最後のコマに移動させた位置からplayしても一度playが実行されこの終了条件に当てはまり再生ヘッダが最初に戻るだけで処理が終了するんですね。
じゃ、どうしようかと悩んだ挙句、注目したのがplayheadTimeプロパティとtotalTimeプロパティ。これは再生ヘッダの位置の秒数を教えてくれるplayheadTimeとFLV全体の秒数を教えてくれるtotalTimeが同じ値なら現在再生ヘッダが終了地点にいることがわかり、これらを使ってFLVを操作するスキンの再生ボタンに処理を加えればいい感じに行くのでは??と。
が、うまくplayheadTimeの値が取得できず、0となってしまう。seekPercent(30)としてみたりしても0となるのです。どうやら、playheadTimeはstatusがplay中じゃないと取得できないようです。前述のとおりseekPercentで再生ヘッダを動かすとstatusはseekingとなります。これが起因しているようでした。
statusプロパティはリードオンリーのプロパティのため強引にやることもできず、さらにプロパティやメソッドを調べてみるのですがいい感じのものが見つからない。そこで視点を変えてイベントをよーく見渡してみました。そこで見つかったのが、playheadUpdateです!これのおかげで光明が差しました。
playheadUpdateは再生中の0.25秒ごとに発生するイベントです。つまりseekPercent(100)の位置からplayして再生ヘッダが最初に戻ったタイミングで必ず起こるイベントなのです。そこで取った方法はというと、playheadUpdateのイベントの中でplayheadTimeを取得してその値が0且つstateがplaying以外のときに強制的にstartメソッドを実行させるというやり方です。これで見事に最終コマからのスタートが実現されました。
関連:
VideoPlayer クラス
http://livedocs.adobe.com/flash/8_jp/main/00003644.html#849900
FLVPlayback.state
http://livedocs.adobe.com/flash/9.0_jp/main/00003077.html
3. 再生が完了したらリピートさせずに最後のコマで停止させる方法
説明:
いよいよラストの処理です。ここで使用するプロパティやイベントはすべて前述のものです。
使用したイベントはplayheadUpdateです。この0.25秒ごとに発生するイベントの中でplayheadTimeとtotalTimeプロパティを観察しplayheadTimeの値がtotalTime以上になったらseekPercent(100)に再生ヘッダを移動させる形です。
こんな感じでこの要望をクリアさせました。
ところが帰宅前に再生中に一時停止が気かないというバグが...。原因は2のところの処理でstateがplaying以外のときに強制的にstartさせているのが原因かと。これは条件判定ひとつなので明日対応しようと思います。
やってみた感じ、FLVPlaybackを使用する際はイベント、特にplayheadUpdateが肝になる予感がします。複雑になるとこの0.25秒にラグが生じることもありそうで頼りすぎるとはまりそうなので注意が必要かもしれません。
【サンプル】
※スクリプトは会社にあるためちょっと違うかもしれず...。明日、バグの件とあわせアップします。
import mx.video.*;
my_FLVPlybk.autoPlay = false;
var listenerObject:Object = new Object();
listenerObject.ready = function(eventObject:Object):Void {
my_FLVPlybk.seekPercent(100);
};
listenerObject.playheadUpdate = function(eventObject:Object):Void {
if(my_FLVPlybk.playheadTime>=my_FLVPlybk.totalTime)
my_FLVPlybk.seekPercent(100);
else if(my_FLVPlybk.playheadTime==0 && my_FLVPlybk.state == 'rewinding')
my_FLVPlybk.play();
};
my_FLVPlybk.addEventListener("ready", listenerObject);
my_FLVPlybk.addEventListener("playheadUpdate", listenerObject);
結局、else if(my_FLVPlybk.playheadTime==0 && my_FLVPlybk.state == 'rewinding')としました。
再生ヘッダがseekPercent(100)の位置から再生された際に一番初めのコマに戻るのですがそのときのstateがrewindingだったためこうしました。

コメントする