「ニコニコ動画をダウンロードするには」で、保存した flv を再生してみよう。という習作。というかメモ。そんな感じのもの。です。
「Flashでflvプレーヤーを作る」「AIR flv 再生」とかで検索した結果、flex で作るのがひとまず簡単であると理解しました。簡単に作れると言うだけあって、どのページでも同じようなコードになっていました。
正直言うと、「Flex カスタムコンポーネントを AS3 で作るには」で、AS3での作成方法は理解したのですが、そもそも Flex の勘所が全くわからない程度の経験しかないので「Flex の方法をしっかり理解するべく mxml で作ってみた」と言うのが本音だったりします。
「Flashでflvプレーヤーを作る」「AIR flv 再生」とかで検索した結果、flex で作るのがひとまず簡単であると理解しました。簡単に作れると言うだけあって、どのページでも同じようなコードになっていました。
正直言うと、「Flex カスタムコンポーネントを AS3 で作るには」で、AS3での作成方法は理解したのですが、そもそも Flex の勘所が全くわからない程度の経験しかないので「Flex の方法をしっかり理解するべく mxml で作ってみた」と言うのが本音だったりします。
flv動画再生 Flexコンポーネント
一応、Flex カスタムコンポーネントとして使えます。本来ならば？該当Flexコンポーネントを貼り付けた swf をこのページで公開するなりして実演したいところですが、残念ながらオリジナルな動画を直ぐに用意出来そうにも無いのであしからず。
当たり障りのなさそうな再生中の静止画です。
flex の特色である bindable機能を使い、少ないコード量でそれっぽい flex コンポーネントを作成できたと思います。
public なのはプロパティ１つのみ。「public function set source(path:String):void」で、flv のパスを与えるだけです。自動再生などはありません。自力でなんとかしてください。簡単なハズですから。
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" mouseMove="onMove()" rollOut="onRollout()">
<mx:Script>
<![CDATA[
// ボタンイメージ（16x16）
[Embed(source = 'play.png')][Bindable] public var imgPlay:Class;
[Embed(source = 'pause.png')][Bindable] public var imgPause:Class;
// 再生＆停止
private function playBtn():void
{
if ( !playstop.selected )
{
mainScreen.pause();
}
else
{
if ( ! !mainScreen.source )
{
mainScreen.play();
}
else
{
playstop.selected = false;
}
}
}
// 再生ヘッドシーク
private var pressingPlayStatus:Boolean = false;
private function onThumbPress():void
{
pressingPlayStatus = playstop.selected;
mainScreen.pause();
}
private function onThumbRelease():void
{
if ( pressingPlayStatus ) mainScreen.play();
}
// コントロールのフェードイン＆フェードアウト
private function onMove():void
{
if ( playstop.selected )
{ // 再生中ならばフェード処理をする
var d:Number = ctrl.height - mouseY;
if ( d < 64 )
{
var a:Number = (64 - d) / 24;
ctrl.alpha = a > 1 ? 1: a;
}
else
{
ctrl.alpha = 0;
}
}
else
{
ctrl.alpha = 1;
}
}
private function onRollout():void
{
ctrl.alpha = playstop.selected ? 0 : 1;
}
// 動画指定メソッド
public function set source(path:String):void
{
mainScreen.source = path;
}
]]>
</mx:Script>
<mx:VideoDisplay id="mainScreen" width="100%" height="100%" source="" autoPlay="false" />
<mx:HBox id="ctrl" width="100%" height="100%" verticalAlign="bottom">
<mx:Button id="playstop" click="playBtn()"
toggle="true"
upSkin="{imgPlay}"
overSkin="{imgPlay}"
downSkin="{imgPlay}"
selectedUpSkin="{imgPause}"
selectedOverSkin="{imgPause}"
selectedDownSkin="{imgPause}"/>
<mx:HSlider id="time"
width="100%"
liveDragging="true"
showTrackHighlight="true"
allowTrackClick="false"
thumbPress="onThumbPress()"
thumbRelease="onThumbRelease()"
maximum="{mainScreen.totalTime}"
minimum="0"
change="{if(mainScreen.stateResponsive) mainScreen.playheadTime = time.value}"
value="{mainScreen.playheadTime}" />
<mx:VSlider id="volume"
height="48"
liveDragging="true"
allowTrackClick="false"
showTrackHighlight="true"
maximum="1"
minimum="0"
snapInterval="0.01"
change="{if(mainScreen.stateResponsive) mainScreen.volume = volume.value}"
value="{mainScreen.volume}" />
</mx:HBox>
</mx:Canvas>
→参考：http://d.hatena.ne.jp/japanrock_pg/20080514/1210777368
再生の基本機能は、言ってしまえばコピペ状態です。むしろ、機能が「flv再生プレーヤー」なので、どう作っても似たようなコードになってしまうほど、内容は簡単であると思われます。
コード中でボタンの画像を指定していますが、ここから拝借しました。
このままでは、あまりに参考リンク先記事の受け売りでしかなくなってしまうので、なんとか捻って以下のオリジナリティ？！を付加したつもりです。
- 再生と停止をトグルにして一つのボタンに集約した。
- 再生中は、ボタン、シークバー、音量バーのコントロールがフェードアウトする。マウスカーソルが近づかないとコントロールは現れない。僅かであってもトゥイーンアニメーションを待たなければならないようなイライラ感を排除する為に、マウスカーソルの位置でフェードを指定している。
さいごに？
「再生中のシークバー操作がカクつく」とか「動画指定直後に再生せずにシークバーを弄るとエラーが出る」とか、非常につめが甘いです。そういう些細？な部分を徹底的に対応するとなると、Flex より Action Script 3 で直接書いた方がバイトコード的に無駄がなくなるんじゃないかとも思っています。が、それをもって余りある「コンポーネントとしての柔軟さ」が Flex には有るように感じています。
実際、コンポーネントのテストに30分の動画を指定したが為に作業の進行が鈍行でしたが、大して悩みもせずに作れました。Flex はお手軽で良いですね。
AS3でリサイズイベントとか書くのが面倒・・・というのは秘密です。
コメントする