FLV

AirでFLVプレイヤー作りました。

>>ダウンロードはコチラ

マイコミさんでやらせてもらってるセミナーで受講生からの希望があったんで、Flvプレイヤーを公開します。
一応ちょこっとだけ改造して、flv f4v mp4(H264のみ)に対応しています。

一応ソースコード（CS3形式）も添付してるんで、ご参考までに見てみてください。

一応コチラにもソースをぺとり

import fl.video.*;
import flash.events.*;
import flash.display.Sprite;
import flash.filesystem.File;
import flash.net.FileFilter;
import flash.desktop.*;

stage.quality = "best";
flle_txt.visible = false;

//ステージの拡大モードを設定
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

//widhtを基準とした、heightのアス比
var aspect:Number;

//コントロールを設定
player.playPauseButton = control_mc.playPauseButton_mc;
player.stopButton = control_mc.stopButton_mc;
player.seekBar = control_mc.seekBar_mc;
player.muteButton = control_mc.muteButton_mc;
player.volumeBar = control_mc.volumeBar_mc;
player.fullScreenButton = control_mc.fullScreenButton_mc;
//下マージン
var bottomMargin:int = 3;
//プレイヤーとコントロールのマージン
var ctrlMargin:int = 4;

//プレイヤーの初期設定
player.autoRewind = true;
player.x = 5;
player.y = 30;

//player.source = "test.flv";

//メタを取得できたら、コントロールをビデオの下に吸着
player.addEventListener(MetadataEvent.METADATA_RECEIVED , moveControl);
//吸着用のメソッド
function moveControl(event:MetadataEvent):void{
    aspect = player.metadata.height/player.metadata.width;
    windowFit();
}

//ステージのサイズに合わせてアス比固定で拡大縮小
stage.addEventListener(Event.RESIZE , videoResize);
function videoResize(event:Event):void{
    var playerWidth:Number = stage.stageWidth - 10;
    var playerHeight:Number = playerWidth * aspect;
    var ctrlsHeight:Number = control_mc.height + bottomMargin + player.y;
   
    if(playerHeight + ctrlsHeight < stage.stageHeight){
        player.setSize(playerWidth , playerHeight);
        //ドラッグターゲットのサイズ設定
        dragTarget_mc.width = playerWidth;
        dragTarget_mc.height = playerHeight;
        //BGのサイズ指定
        bg_mc.width = stage.width;
        bg_mc.height = stage.height;
    }else{
        playerHeight = stage.stageHeight - ctrlsHeight;
        playerWidth = playerHeight/aspect;
        player.setSize(playerWidth , playerHeight);
        //ドラッグターゲットのサイズ設定
        dragTarget_mc.width = playerWidth;
        dragTarget_mc.height = playerHeight;
        //BGのサイズ指定
        bg_mc.width = stage.width;
        bg_mc.height = stage.height;
    }
    ctrlMove();
}

//ウィンドウを操作するためのオブジェクト
var window:NativeWindow = this.stage.nativeWindow;

//ウインドウを初期サイズにフィットさせる
function windowFit(){
    window.height = 34 + player.y + player.metadata.height + ctrlMargin + control_mc.height + bottomMargin;
    window.width = 18 + player.metadata.width;
   
    flle_txt.text = window.height + "　" + window.width;
   
    player.setSize(player.metadata.width , player.metadata.height);
   
    ctrlMove();
}

//コントロールを右下に吸着
function ctrlMove():void{
    control_mc.y = player.y + player.height + 5;
    close_btn.x = (player.width+5) - close_btn.width - 4;
   
    var mov:Number = control_mc.x = (player.width+5) - 318;
   
    if(mov >= 7){
        control_mc.x = mov;
    } else {
        control_mc.x = 7;
    }
}

//ボタン設定
open_btn.buttonMode = true;
fit_btn.buttonMode = true;
close_btn.buttonMode = true;
//フィットボタンでムービーサイズを元に戻す
fit_btn.addEventListener(MouseEvent.CLICK , fitVideo);
//ムービーリサイズ
function fitVideo(event:MouseEvent){
    windowFit();
}
//クローズボタン
close_btn.addEventListener(MouseEvent.CLICK , winClose);
function winClose(event:MouseEvent){
    window.close();
}

//オープンボタンでのファイル選択処理
open_btn.addEventListener(MouseEvent.CLICK , fileOpen);

//ファイルタイプをFLVのみに設定
//ファイルブラウズ処理
var fileLoader:File = new File();
fileLoader.addEventListener(Event.SELECT , fileSelected);
var filter:FileFilter = new FileFilter("Flvファイル", "*.flv; *f4v; *mp4");

function fileOpen(event:MouseEvent):void{
    fileLoader.browseForOpen("ファイルの選択", [filter]);
}
function fileSelected(event:Event){
    player.source = fileLoader.url;
    flle_txt.text = fileLoader.url;
}

//ドラッグ＆ドロップ処理
dragTarget_mc.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER, onDragIn);
dragTarget_mc.addEventListener(NativeDragEvent.NATIVE_DRAG_DROP, onDrop);

//ドラッグ許可
function onDragIn(event:NativeDragEvent):void{
    flle_txt.text = "Drag";
    var dropData:Clipboard = event.clipboard;

    if (dropData.hasFormat(ClipboardFormats.FILE_LIST_FORMAT)) {
        NativeDragManager.acceptDragDrop(event.target);
    }
}

//ドロップ処理
function onDrop(event:NativeDragEvent):void{
   
    var droppedData:Array = event.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT);
   
    var file:File = droppedData[droppedData.length -1];
    if(file.extension == "flv" || file.extension == "FLV" || file.extension == "F4V" || file.extension == "f4v" || file.extension == "mp4" || file.extension == "MP4"){
        player.source = file.url;
    }
}

今更な感がありますが、AS3.0から、簡単にフルスクリーン機能を実装できるようになりました。

その方法は

1. FlvPlaybackコンポーネントから、フルスクリーンボタンが配置されたコンポーネントを選択する。
2. FLV Playback カスタム UI コンポーネントのFullScreenButtonを配置する。
3. enterFullScreenDisplayState () メソッドを実行する
4. スクリプトで実装する。

の4パターンが考えられるでしょう。

しかし、この4パターンのうち、1～3は、Flvムービーにしか適用できず。
さらに、FlvPlaybackコンポーネントを利用し、かつ、ディスプレイカードによるハードウェアアクセラレーションを利用する場合、コンポーネントの矩形範囲で拡大されてしまい、ビデオソースの解像度は無視されます。

例えば

1. 実際のビデオのソースは、1920×1080のフルHDサイズだが、初期起動時は480×270で表示する。
2. 画面に配置されたひとつのFlvPlaybackコンポーネントで、480×270画面内表示と、1920×1080フルスクリーンを切り替える。

上記のケースだと、フルHDの映像を480×270に縮小表示している場合、フルスクリーンにした際に
480×270で表示している画面をスケーリングしてしまうため（小さい動画をハードウェア側でスムージングを掛けて表示される）ソースがフルHDの映像だとしても、表示上480×270などに縮小している場合は、縮小された画面を引き伸ばしてしまい、小さい動画をただ引き伸ばしただけになってしまいます。

どうやらコレは、上記1～3のフルスクリーン実装方法だと、FlvPlaybackコンポーネントのメソッドを呼び出すかたちになるみたいなのですが（FlvPlaybackのenterFullScreenDisplayState () メソッド）どうやらこのメソッドを実行すると、FlvPlaybackコンポーネントの矩形範囲をハードウェアアクセラレーションでスケーリング表示するようです。（予想ですが！！）

結果、小さいサイズの動画をただ引き伸ばしたような映像になってしまいます。

そこで、FlvPlaybackコンポーネントの機能を使わずに、4の「スクリプトで実装する」ことにしましょう。
スクリプトで実装すると、Flvコンテンツだけでなく、実際のFlashコンテンツもFullScreenで表示することが出来るので、こちらで実装するほうが汎用性がありそうですしね。

さて、その方法ですが

stage.displayState = StageDisplayState.FULL_SCREEN;

と、stageのdisplayStateプロパティを、フルスクリーンなパラメータに設定するだけで、とりあえずFullScreenに出来ます。簡単です。プロパティにパラメータが入ったと同時にフルスクリーンが実行されます。
しかし問題が、コレだけではハードウェアアクセラレーションがかかりません。

なので、上記のコードを実行する前に、

stage.fullScreenSourceRect = new Rectangle(0, 0, 1920, 1080);

上記のコードを実行し、フルスクリーンで拡大する矩形エリアを設定します。

fullScreenSourceRectプロパティを設定すると
可能な場合、拡大 / 縮小は、ユーザーのコンピュータ上でグラフィックカードやビデオカードを使用してハードウェアで行われます。

てことで、こういうコードになります。

stage.fullScreenSourceRect = new Rectangle(0, 0, 1920, 1080);
stage.displayState = StageDisplayState.FULL_SCREEN;

FlvPlaybackコンポーネントのfullScreenTakeOverプロパティがtrueの場合（通常デフォルトでture）フルスクリーンに移行すると、自動的にFlvPlaybackコンポーネントは前面に表示され、フルHDのビデオのエリア「Rectangle(0, 0, 1920, 1080);」に対して、フルスクリーンのディスプレイアクセラレーションが実行されます。

この方法を利用すれば、Flvではなく、通常のFlashコンテンツに対してフルスクリーン機能を実装できますし、fullScreenTakeOverプロパティにfalseを設定した場合は、FlvPlaybackを含んだFlashコンテンツのデザインを、そのままフルスクリーンに出来ます。
その際は、Rectangleに対してRectangle(0, 0, Flashコンテンツの横幅, Flashコンテンツの高さ)を渡してやればOK！

ただし、フルスクリーンを実装する再は、スクリプトで実装する再もFlvPlaybackのメソッドを利用する場合も
必ずマウスクリックまたはキー操作をトリガにする必要がありあますので、ご注意を。

そして、貼り付けるHTML側の、allowFullScreenをtrueに設定してあげるのを忘れないように。