AIR for Mobile で StageVideo を使う


StageVideo は今までのVideoとは違い、デバイスのハードウェアアクセラレーション機能が使用可能な場合は使用されるので、再生パフォーマンスの向上が期待できます。StageVideoとVideoの違いについては、リファレンスガイドに詳しく載っています。

さて、今回はFlashBuilder4.6+FlexSDK4.6を使って、Android(GalaxyNexus/SonyTabletP/S)とiPad(1st)で
StageVideoを再生するまでをまとめてみました。ポイントとしては以下のとおりです。

  • 動画ファイル形式
  • アプリケーション記述ファイルの設定
  • AS3/MXML
  • その他


動画ファイル形式

まず、動画ファイルについては、リファレンスに「AIR 3 for iOS は、ハードウェアデコード機能付き H.264 ビデオ対応 StageVideo オブジェクトを使用する」とあるので、今回はAdobe Media EncoderでH.264のmp4ファイルに変換したものを使いました。
参考:「ビデオ形式について
参考:「Recommendations for encoding H.264 video for Flash Player 10.2 on mobile devices

アプリケーション記述ファイルの設定

iOS/Android共通

<renderMode>direct</renderMode>

Android 色深度(色深度 16 bit の StageVideo の使用はサポートされていません)

<colorDepth>32bit</colorDepth>

Android ハードウェアアクセラレーションを有効(Android 3.0 SDK 以降)

<android>
<manifestAdditions>
<![CDATA[
<manifest>
<application android:hardwareAccelerated=”true”/>
</manifest>
]]>
</manifestAdditions>
</android>

AS3/MXML

StageVideoはFlashのDisplayListの後ろで再生されるので、背景色を透明にします。
実際のコードや詳細は「StageVideo API の使用」 をご確認ください。

<s:Application  backgroundAlpha=”0″ applicationComplete=”onViewActivate(event)”>

1:StageVideoAvailabilityEvent.STAGE_VIDEO_AVAILABILITYをリッスンする。

protected function onViewActivate(event:Event):void
{
stage.addEventListener(StageVideoAvailabilityEvent.STAGE_VIDEO_AVAILABILITY, onStageVideoState);
}

2:ステージビデオが利用可能であることを確認する。

protected function onStageVideoState(event:StageVideoAvailabilityEvent):void
{
if (event.availability == StageVideoAvailability.AVAILABLE)
{
//StageVideoに対応
nc = new NetConnection();
nc.addEventListener(NetStatusEvent.NET_STATUS, onNetStatus, false, 0, true);
nc.connect(null);
}
else
{
//StageVideoに非対応 > Videoで対応する
trace(“NOT SUPPORT STAGE VIDEO”);
}
}

3:NetStream オブジェクトをattachNetStreamして、再生する。

protected function onNetStatus(evt:NetStatusEvent):void
{
switch (evt.info.code)
{
case “NetConnection.Connect.Success”:
ns = new NetStream(nc);
var client:Object = {};
client.onMetaData = onMetaData;
ns.client = client;
nc.client = client;

var v:Vector. = stage.stageVideos;
if (v.length >= 1)
{
var stageVideo:StageVideo = v[0];

//StageVideoの表示領域の設定
stageVideo.viewPort = new Rectangle(0, 0, Capabilities.screenResolutionX, Capabilities.screenResolutionY);

//ビデオ再生のステータスを確認するためにリッスン
stageVideo.addEventListener(StageVideoEvent.RENDER_STATE, onStageVideoRENDERState);

stageVideo.attachNetStream(ns);
}
else
{
trace(“no video!”);
}
if (videoUrl) {

//再生開始
ns.play(currentVidUrl);
}
break;
case “NetStream.Publish.BadName”:
break;
default:
break;
}
}

上記のコードで、StageVideoEvent.RENDER_STATEをリッスンしていますが、
このイベントでビデオ再生の状態が確認できます。

  • VideoStatus.ACCELERATED:デコードも表示もハードウェアで実行
  • VideoStatus.SOFTWARE:表示はハードウェアで、デコードはソフトウェアで実行
  • VideoStatus.UNAVAILABLE:GPU リソースがない。Videoを利用して!

ちなみに今回検証に使った、Android(GalaxyNexus/SonyTabletP/S)とiPad(1st)では、

  • GalaxyNexus:SOFTWARE
  • SonyTabletP/S:ACCELERATED
  • iPad:ACCELERATED

という結果でした。

その他注意事項

Android の場合、StageVideo は Android 3(Honeycomb)で動作するデバイスでのみサポートされていますので、
サポート外の端末で動画再生する際は、従来のVideoを使うことになります。

また、AIR デスクトップ または extendedDesktop プロファイルでは、StageVideo クラスはサポートされません。
通常のWebブラウザ(FlashPlayer)上では利用可能です。

参考「Flash Player 10.2コンテンツ制作入門:Stage Video