
.flvを簡単に自分の作ったSWF内に組み込むためのクラスを作りました。これを使う事で、通常よりはるかに簡単にビデオギャラリーなどのFlashコンテンツを作る事ができます。
こちらがサンプルです。
実用性を重視しておりますので、たくさんの機能を用意しておりやや長めのコード&説明になっていますが、このクラスだけで「指定する.flvを指定するVideoオブジェクトで再生」「オーディオトラックを指定のムービークリップに割り当てる」「ローダー」「再生」「一時停止」「早送り」「頭出し」「リプレイ」「時間0秒点に移動」「ボリュームコントロールスライダー」「シークタイムスライダー」必要だと思われる機能全てを網羅しました。
ただし、onMetaDataでflvのメタデータを取得しているので、メタデータが記述されている.flvしか機能を使う事ができません(今時メタデータが書いてないflvなんかそうそう見ない気がしますしまぁいいかなと)。
このクラスは、ビデオを再生する内部処理を行うという振る舞いをします。そのため再生ボタンやスライダーなどの「UI部分」に関しては別に作らなければなりません。ただ、その分柔軟なクラスになっていると思います。
VideoClip.as
ストリーミングflvを再生する一連の内部処理を一括して担うクラスとそのサンプル
これをFLASHで組み込むには例えば以下のようなフレームアクションを作ります。
例)VideoClip.fla
var videoClip = new VideoClip(this); //コンストラクタでインスタンスを生成
videoClip.init("video.flv", video, this, loader_mc);
//再生するビデオへのファイルパス、対象のビデオインスタンス、
//NetStreamの音を割り当てるムービークリップのターゲット、ローダー用ムービークリップ
play_btn.onRelease = function(){
//再生
videoClip.play();
time_mc.onEnterFrame = function(){
//再生位置をパーセントで取得
this._xscale = videoClip.getPositionPercent()*100;
}
}
pause_btn.onRelease = function(){
//一時停止
videoClip.pause();
}
rw_btn.onPress = function(){
this.onEnterFrame = function(){
//巻き戻し
videoClip.rw();
}
}
rw_btn.onRelease = function(){
delete this.onEnterFrame;
}
ff_btn.onPress = function(){
this.onEnterFrame = function(){
//早送り
videoClip.ff();
}
}
ff_btn.onRelease = function(){
delete this.onEnterFrame;
}
stop_btn.onRelease = function(){
//停止
videoClip.stop();
}
replay_btn.onRelease = function(){
//リプレイ
videoClip.replay();
}
v100_btn.onRelease = function(){
//音量を100(最大)に
videoClip.audioVol100();
}
v0_btn.onRelease = function(){
//音量を0に
videoClip.audioVol0();
}
vol_mc._active = false;
vol_mc.onPress = function(){
this.startDrag(false,281,172,365,172);
this._active = true;
}
vol_mc.onRelease = vol_mc.onReleaseOutside = function(){
this.stopDrag();
this._active = false;
}
vol_mc.onMouseMove = function(){
if(this._active){
//音量をスライダー位置で変更
videoClip.audioVol(281,365,this._x);
}
}
seek_mc._active = false;
seek_mc.onEnterFrame = function(){
if(!this._active){
//再生位置をスライダーに反映
this._x = videoClip.getPositionPercent()*(380-258) + 258;
}
}
seek_mc.onPress = function(){
this.startDrag(false, 258, 122, 380, 122);
this._active = true;
}
seek_mc.onRelease = seek_mc.onReleaseOutside = function(){
this.stopDrag();
this._active = false;
}
seek_mc.onMouseMove = function(){
if(this._active){
//再生位置をスライダー位置で変更
videoClip.seekAt(258, 380, this._x);
}
}
せっかくMetaDataを取得するんだからObjectで返すメソッドを作ってもよかったかもね。しばらくしたら更新するかも。


コメント (6)
これ、flv埋め込みじゃなくて、外部flvを読めたら最高なんですが。
投稿者: uumma | 2008年03月26日 15:33
すいません 最近スパムが多くて返信遅れちゃいました。。。
これは埋め込みじゃなくて外部FLVを読むクラスですよー。ビデオオブジェクト(インスタンス)はステージ上に置く必要があるのですが。
というか埋め込みFLVの操作=MovieClipの操作ですよね。
投稿者: feb19 | 2008年04月01日 08:50
はじめまして、サンプルをダウンロードさせていただいたのですが、
わからないところがあるので質問をさせてください。
外部FLVの読み込みの部分で、
読み込むFLVをFlashVarsで指定したいと思うのですが、
自分の力では出来そうにないのです。
出来ないものなのでしょうか。。
可能であるのならどうすれば出来るのかを教えていただけたらうれしいです。
よろしくお願いします。
投稿者: akira | 2008年09月30日 15:02
連続投降申し訳ありません。。
FlashVarsでの設定の件なのですが、自己解決いたしました。
お手数おかけしましてすみませんでした。
投稿者: akira | 2008年10月01日 20:52
はじめまして。
そして解決おめでとうございます。
そしてスパムだらけで申し訳ありません。
そしてレス遅くて申し訳ありません。
コメントをいただくのが久し振りだったのであります。
もう少し悩んでいただければ・・・(笑
投稿者: feb19 | 2008年10月03日 15:54
これ、ローダーが機能していませんよね?
空欄の状態からいきなりバカっとゲージが満タンになる感じなのですが。
投稿者: aoki | 2010年02月21日 10:20