Adobe
製品
Acrobat
Creative Cloud
Creative Suite
Digital Marketing Suite
Digital Publishing Suite
Elements
Photoshop
Touch Apps
その他の製品一覧
ソリューション
デジタルマーケティング
デジタルメディア
教育
金融機関
Web Experience Management
その他のソリューション
ラーニング サポート ダウンロード 会社情報
ご購入
アドビストア 安心のサポート& サービス
アカデミックストア 学生、教職員、個人向け
アドビライセンスストア 中小企業向け
ボリュームライセンスについて 企業、教育機関、官公庁向け
販売パートナー
キャンペーン情報
検索
 
情報 サインイン
ようこそ、 さん カート 注文状況 マイアカウント
マイアカウント
注文状況
アカウント情報の変更
コミュニケーションの設定を変更
サインアウト
サインインの目的 お客様のアカウントや体験版ダウンロード、製品の拡張機能、コミュニティエリアへのアクセスなどを管理するため
Adobe
製品 セクション ご購入   検索  
ソリューション 会社情報
サポート ラーニング
サインイン サインアウト 注文状況 マイアカウント
先行予約の提供開始予定日Date. 商品が発送されるまで、クレジットカードには課金されません。提供開始の予定日は変更される場合があります。 先行予約の提供開始予定日Date. ダウンロードの準備が整うまで、クレジットカードには課金されません。提供開始の予定日は変更される場合があります。
個数:
ご購入には学生・教職員個人版の購入資格の確認が必要です。
小計
カートの中身を見る
Adobe Developer Connection / Flash Playerデベロッパーセンター /

Flash Playerにおける高解像度H.264ビデオおよびAACオーディオのサポートについての説明

著者 David Hassoun氏

David Hassoun氏
  • RealEyes Media

Content

  • H.264およびAAC圧縮について
  • NetStreamオブジェクトを使用したH.264ビデオとM4Aオーディオの読み込み
  • MPEG-4ファイルからのメタデータの抽出
  • フルスクリーンビデオでのハードウェアスケーリングの使用

更新日

2 December 2007

ページ ツール

Facebookでシェア
Twitterでツイート
LinkedInでシェア
ブックマーク
印刷

タグ

必要条件

この記事に必要な予備知識

Flashの操作およびマルチメディアの開発に関する一般的な経験を持っていることをお勧めしますが、高解像度ビデオとオーディオの表示についての概要お よびFlash Player 9 Update 3での最適化および再生に関する技術に興味をお持ちの方もこの記事の対象となります。

ユーザーレベル

初級

必要な製品

  • Flash Professional CS3 (Download trial)

サンプルファイル

  • hd_media_flash_player_9.zip (99198 KB)

その他の要件

Flash CS3 Professional

注:Flash CS3 Professionalユーザ向けに、Flash Player 9 Update 3のすべてのデバッグ版とリリース版、および H.264をサポートする新しいビデオ再生コンポーネントを含むアップデートをご用意しています。このアップデートは、Adobe Update Managerを通じて入手するか、Flashサポートセンターから直接入手できます。

Flash Player 9 Update 3(9.0.115.0)以上

  • ダウンロード

サンプルファイル:

  • hd_media_flash_player_9.zip(ZIP、96.8MB)

注:このアーカイブファイルには、ActionScript 3.0を使用してAdobe FlashでH.264ビデオプレーヤーおよびMP4プレーヤーを作成するためのサンプルファイルが含まれています。 ビデオとオーディオのサンプルファイルに加え、この記事のそれぞれのチュートリアル用のFLAファイルがあります。 またこのアーカイブファイルには、この記事のActionScript 3.0チュートリアルの代わりとして、ActionScript 2.0のサンプルファイルも用意されています。

ビデオ改革は次なる重要な段階を迎えようとしています。 これまでの優れたビデオサポートにさらに主要な規格であるMPEG-4ビデオが加わったFlash Player 9 Updateは、高解像度(HD)ビデオの領域に踏み込みました。 MPEG-4は、軽快で強力なH.264エンコードを採用したビデオ用の業界標準で、高解像度(HD)配信を行うことができます。 これはまた、オンラインおよび家庭用テレビなどのデバイスのHDコンテンツ用の標準でもあります。

優れた表示能力を備えたH.264エンコードビデオと共に、Flash Player 9 UpdateはMP3の高品質な後継者であるHE-AACオーディもサポートします。 Advanced Audio Coding(AAC)は、ビデオ付きまたはビデオなしで使用できる、高効率(HE)かつ高忠実(HiFi)な低帯域幅のオーディオコーデックです。

ユーザはこれらのコーデックを使用して、低ビットレートで高品質のビデオをストリーミングできます。 また、Flash Playerをこのバージョンに更新すると、Adobe Premiere Pro、Adobe After Effects、Adobe Soundbooth、Adobe Auditionなどの業界標準のツールに加え、Apple Final Cut Proなどのアドビ以外のテクノロジを使用して、高品質なビデオコンテンツを作成および配信できるようになります。 将来はAdobe Creative Suite 3(CS3)も更新され、H.264コンテンツのエンドツーエンドの開発および配布の機能が強化される予定です。 今後の展開に対しては、非常に期待が持てるように思われます。

新しいビデオとオーディオの機能はAdobe Flash Player 9 Update 3(バージョン9.0.115.0)で利用可能で、次回リリースのAdobe AIRに組み込まれます。 この両方のプラットフォームが、2008年の初めにリリースされる次世代のFlash Media Serverからのストリーミング機能を備えています。 新しいAIRアプリケーションであるAdobe Media Playerは、アドビの新しいFlash Media Rights Management Serverを使用して、H.264、HE-AACおよび暗号化されたビデオコンテンツもサポートします。

では、On2 VP6コーデックは、MPEG-4とH.264をサポートするこの新しいFlash Playerによって置き換えられてしまうのでしょうか。 そのようなことはありません。 H.264が追加されることにより、開発者はニーズを最も満たすテクノロジの選択肢が増えることになります。 H.264の現在の実装には、アルファチャンネルに対するサポートがない、SWFファイルにビデオを埋め込むことができないなど、いくつかの制限があります。 On2 VP6は、Flashベースのビデオプロジェクトに対しては確実で高品質な選択肢になります。 またOn2 VP6コーデックは、MPEG-LAで発生する可能性のあるライセンス上の問題もありません (ライセンス情報については、MPEG LAおよびVia Licensingのサイトを参照してください)。 On2 VP6コーデックは、メディアの配信用として今でも一貫性のある有用なオプションです。詳細については、On2 VP6のテクノロジに関するホワイトペーパーを参照してください。 H.264のサポートの追加は、高品質でHD対応のビデオに対するオプションが増え、広範囲な互換性が備えられたことを意味しています。

ここでは、新しいコーデックとFlash Player「Moviestar」でサポートされるファイル形式について説明します。 また、H.264ビデオとAACオーディオの両方をFlashに読み込む方法、新しいFlash Player Updateでハードウェアアクセラレーションを使用する方法およびMPEG-4ファイルに含まれているメタデータを読み込む方法についても説明します。

H.264およびAAC圧縮について

ここでは、H.264ビデオ仕様のガイドラインとAAC/AAC+圧縮について説明します。 H.264で技術的にサポートされる機能、標準のHDビデオサイズ、H.264のコンテナ形式とその説明、AAC/AAC+で提供される機能の基本的な情報に加えて、いくつかの基本的なエンコードリソースについて説明します。

MPEG-4 H.264

MPEG-4(Motion Pictures Expert Group)H.264は、国際標準化機構(ISO)によって認められたビデオ圧縮の国際標準です。 H.264は「MPEG-4 Part 10」またはAVC(Advanced Video Coding)とも呼ばれています。

これは何を意味するのでしょうか。 まず、これは、ビデオをH.264にエンコードすると、Flash Player用にエンコードするだけでなく、Apple iTunesやiPodまたはSony PlayStation Portable(PSP)のような他のソフトウェアを使用しても再生できることを意味します。 Flash Playerでの新しいハードウェアスケーリングおよびマルチスレッドのサポートによって、システムがサポートしている限り、HD 1080pを含む任意の解像度とビットレートでビデオを再生できます(図1を参照)。

現在のビデオ標準で使用できる画面の解像度およびビットレート
図1.現在のビデオ標準で使用できる画面の解像度およびビットレート

MPEG-4コンテナ

MPEG-4標準は、コンテナ形式も規定しています。これは、複数の異なるタイプのデータをトラックとして格納し、1つのファイルに含めることができることを意味します。 ファイル全体が同期され、データがインターリーブされます。 そのため、MPEG-4コンテナ内のビデオまたはオーディオには、メタデータ、カバーアート、字幕およびFlash Playerで抽出できるその他のテキストまたはビジュアルデータを添付することもできます。 また、複数のビデオトラックやオーディオトラックをコンテナに含めることもできますが、現在のところFlash Playerは1つのトラックのみを再生し、他のトラックは無視します。

AAC/AAC+

AAC(Advanced Audio Coding)コーデックを使用してMPEG-4コンテナにエンコードされたオーディオファイルを、Flash Playerで使用できるようになりました。 AACコーデックは、MPEG-2から使用されてきた劣化の大きい圧縮スキーマですが、MPEG-4用に更新されました。 iTunesから販売されるすべての楽曲にAACが使用されているので、このコーデックは多くの人々に知られています。 最高96KHzのキャプチャ、最高48チャンネルおよび逆方向予測がサポートされるので、技術に精通しているユーザは、より高い品質を実現できます。 AACではMP3より高いオーディオ品質が達成される一方で、ファイルサイズは同等か小さくなります。 AAC+またはHE-AAC(High Efficiency AAC)は、パラメトリックステレオとスペクトル帯域複製により、ストリーミングオーディオなどの用途に対して低いビットレートで高品質のオーディオが提供されるように最適化されているAACコーデックです。 MPEG-4ファイルにAACエンコードオーディオを導入することにより、Flash Playerでこのファイル形式を利用できるようになりました。

ビデオエンコーディング

Flash PlayerがH.264対応に更新されたため、Adobe Creative Suite 3ファミリーを含むすべてのビデオエコシステムにわたってビデオエンコーディングが標準化されました。 Adobe PremiereやAfter Effectsなどのツールを使用して、追加のプラグインを使用せずにコンテンツを配信できるようになりました。

H.264導入の一環として、市場のソリューションが数多く利用されています。 新しいFlash Player 9 Update 3でサポートされる形式のビデオのエンコーディングに対応する、業界標準のツールを提供している企業の一部を次に示します。

  • Anystream
  • Digital Rapids
  • Kulabyte
  • On2 Technologies
  • Rhozet
  • Sorenson Media
  • Telestream
  • x264

サポートされるファイル形式

Flash Player 9 Update 3では、H.264ビデオやHE-AACオーディオが含まれた標準のMPEG-4コンテナ形式から取り出した、F4V、MP4、M4A、MOV、MP4V、3GP、3G2などのファイルを再生できます。 ただし、iTunesからダウンロードしたファイルやFairPlayでデジタル暗号化されたファイルなど、保護されたMP4ファイルはサポートされません。

Flash Player 9 Update 3の詳細については、Flash Player製品のページを参照してください。

オンライン開発者のコミュニティでFlash Player 9 Update 3について意見を交換するには、Flashサポートフォーラムのメインページを参照してください。

NetStreamオブジェクトを使用したH.264ビデオとM4Aオーディオの読み込み

ここでは、ActionScriptの機能を使用してH.264ビデオとAAC/AAC+オーディオを統合する手順について説明します。 これらの例では、AAC/AAC+エンコードされたM4Aファイルを使用します。 NetConnection、NetStreamおよびVideoの各クラスの機能を使用して、オーディオコンテンツとビデオコンテンツを再生する方法を理解できます。

NetStreamを使用したH.264コンテンツの再生

MPEG-4コンテンツはNetStreamオブジェクトを介して取り込む必要がありますが、FlashムービーでH.264コンテンツの再生にかかる時間はほとんど変わりません。ただし、いくつかのサポートされないコンテンツに関するメッセージに注意する必要があります。 新しいステータスメッセージは、NetStream.FileStructureInvalidおよびNetStream.NoSupportedTrackFoundです。 MPEG-4ファイル構造が無効の場合はNetStream.FileStructureInvalidメッセージが送信され、サポートされるオーディオトラックおよびビデオトラックがMPEG-4ファイルにない場合はNetStream.NoSupportedTrackFoundメッセージが送信されます。

また、ファイル拡張子を.flvに変更することにより、FlashのビデオコンポーネントでH.264ビデオファイルを再生することもできます。 現在のビデオコンポーネントは、再生対象として拡張子が.flvのファイルを探しますが、アドビは仕様を変更する作業を進めており、将来のアップデートでは拡張子の変更は不要になります。

プログレッシブダウンロードを使用してビデオを再生する従来の方法は次のとおりです。

  1. 新しいActionScript 3.0 Flashファイルを作成します。 H264_Video_AS3.flaという名前を付けてファイルを保存します。
  2. タイムラインで、レイヤー1の名前を~AS:Mainに変更します(図2を参照)。>
新しいActionScript 3.0ファイルの作成
図2.新しいActionScript 3.0ファイルの作成
  1. タイムラインでフレーム1を選択し、アクションパネルを開きます(WindowsはF9キー、MacはOption + F9キー)。
  2. コードの先頭でビデオ変数を宣言します。
var video:Video;
  1. 新しいNetConnectionオブジェクトを作成し、接続方法のパラメータとしてnullを渡します。
var connect_nc:NetConnection = new NetConnection(); connect_nc.connect(null);
  1. 新しいNetStreamオブジェクトを作成し、NetConnectionオブジェクトをパラメータとしてコンストラクタに渡します。
var stream_ns:NetStream = new NetStream(connect_nc);
  1. ActionScript 3.0では、NetStreamにクライアントオブジェクトを指定して、ストリームイベントを処理する必要があります。指定しないと、コンパイルエラーが発生します。 ハンドラメソッドを実際に作成する必要はありませんが、クライアントオブジェクトは必要です。 タイムラインでNetStreamのイベントを処理できるように、クライアントオブジェクトをthisに設定します。 NetStreamビデオをビデオオブジェクトに関連付ける前にこのコードを追加します。
stream_ns.client = this;
  1. 次に、イベントリスナーを作成します。 次に示すように、NetStatusEvent用のハンドラ関数を作成します。
function netStatusHandler(p_evt:NetStatusEvent):void { }
  1. netStatusHandler関数の内部に、if条件式を作成します。 この条件式は、イベントオブジェクトのcodeプロパティがストリング値NetStream.FileStructureInvalidに等しいかどうかをチェックします。
if(p_evt.info.code == "NetStream.Play.FileStructureInvalid") { }
  1. if条件式の内部で、trace()メソッドを使用して、ファイル構造が無効であることを示すストリングを出力します。
trace("The MP4's file structure is invalid");
  1. if条件の後に、else条件を作成します。 else条件は、イベントオブジェクトのcode値がストリングNetStream.NoSupportedTrackFoundに等しいかどうかをチェックします。
else if(p_evt.info.code == "NetStream.Play.NoSupportedTrackFound") { }
  1. else条件の内部で、trace()メソッドを使用して、サポートされるトラックがMP4に含まれていないことを示すストリングを出力します。
trace("The MP4 doesn't contain any supported tracks");

完成したnetStatusHandler()関数は、次のようになります。

function netStatusHandler(p_evt:NetStatusEvent):void { if(p_evt.info.code == "NetStream.Play.FileStructureInvalid") { trace("The MP4's file structure is invalid."); } else if(p_evt.info.code == "NetStream.Play.NoSupportedTrackFound") { trace("The MP4 doesn't contain any supported tracks"); } }
  1. このイベントハンドラをNetStreamオブジェクトに関連付けます。
stream_ns.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
  1. イベントハンドラを追加した行の下で、ビデオをダイナミックに作成します。
video = new Video(); addChild(video);
  1. ActionScript 2.0で使用されていた古いattachVideoメソッドの代わりにVideoクラスのattachNetStreamメソッドを使用します。
video.attachNetStream(stream_ns);
  1. H.264ビデオのURLまたはパスをNetStreamオブジェクトのplayメソッドに渡します。
stream_ns.play("backcountry_bombshells_4min_HD_H264.mp4");

注:H.264ビデオファイルをプログレッシブダウンロードとして再生する場合に重要なのは、moov atomをファイルの先頭に配置することです。このように配置しないと、ファイル全体をダウンロードしてから再生を開始する必要があります。 moov atomは、ファイル全体のインデックス情報を保持しているファイルの一部です。 Adobe PremiereやAfter Effectsなどのツールでは、この情報はファイルの末尾に配置されてしまいますが、アドビは、CS3ビデオ作成ツールの将来のアップデートでこの問題を修正するよう作業を進めています。 ただし、これはH.264ビデオファイルのストリーミングに関する問題ではないため、Flash Media Serverのユーザには影響ありません。

ActionScriptを使用したAACファイルの再生

ActionScript 2.0とActionScript 3.0でのAAC(M4A)ファイルの再生方法は同じです。 NetStreamオブジェクトだけを使用してファイルを再生します。

  1. 新しいActionScript 3.0 Flashファイルを作成します。 AAC_Audio_AS3.flaという名前を付けてファイルを保存します。
  2. タイムラインで、レイヤー1の名前を~AS:Mainに変更します(図3を参照)。
新しいActionScript 3.0ファイル~AS:Mainの作成
図3.新しいActionScript 3.0ファイル~AS:Mainの作成
  1. タイムラインでフレーム1を選択し、アクションパネルを開きます(WindowsはF9キー、MacはOption + F9キー)。
  2. connect_ncという名前で新しいNetConnectionオブジェクトを作成し、パラメータとしてnullのみを渡してconnect()メソッドを呼び出します。
var connect_nc:NetConnection = new NetConnection(); connect_nc.connect(null);
  1. 新しいNetStreamオブジェクトを作成し、NetConnectionオブジェクトをパラメータとしてコンストラクタに渡します。
var stream_ns:NetStream = new NetStream(connect_nc);
  1. AAC(M4A)ファイルのURLまたはパスをNetStreamオブジェクトのplayメソッドに渡します。
stream_ns.play("RE-Sample.m4a");

完成したコードは、次のようになります。

var connect_nc:NetConnection = new NetConnection(); connect_nc.connect(null); var stream_ns:NetStream = new NetStream(connect_nc); stream_ns.play("RE-Sample.m4a");
  1. ブラウザでムービーをテストします。 オーディオの再生が開始されます。

Soundオブジェクトを使用したAACファイルの制御

前のセクションでは、ActionScriptを使用してAACファイルを再生する方法について説明しました。 Soundオブジェクトを使用してM4Aオーディオを制御する方法は少し複雑です。 Soundオブジェクトは、MP3ファイルの場合と同じ方法でM4Aファイルをロードすることはできません。そのため、NetStreamを使用してファイルを取り込み、そこでファイルを操作する必要があります。

  1. 最初のオーディオサンプル(AAC_Audio_AS3.fla)で操作した同じFlashファイルを開くか、サンプルファイルフォルダ内のAAC_Audio_AS3_Sound_complete.flaファイルを開きます。
  2. タイムラインで~AS:Mainレイヤーのフレーム1を選択し、アクションパネルを開きます(WindowsはF9キー、MacはOption + F9キー)。
  3. コードの先頭でSoundTransform変数を宣言します。
var mySound:SoundTransform;
  1. NetStreamのSoundTransformオブジェクトのプロパティには直接アクセスできませんが、オブジェクト自体を参照することはできます。 そのため、NetStreamでビデオの再生を開始した後、次のように、mySound変数をNetStreamのsoundTransformプロパティと同じ値に設定します。
stream_ns.play("RE-Sample.m4a"); mySound = stream_ns.soundTransform;
  1. 0~1の数値を使用して、mySoundの音量を設定します。
mySound.volume = .5;
  1. NetStreamのsoundTransformプロパティをmySoundで上書きし、音量に対する変更を適用します。
mySound.volume = .5; stream_ns.soundTransform = mySound;

完成したActionScriptは、次のようになります。

var mySound:SoundTransform; var connect_nc:NetConnection = new NetConnection(); connect_nc.connect(null); var stream_ns:NetStream = new NetStream(connect_nc); stream_ns.play("RE-Sample.m4a"); mySound = stream_ns.soundTransform; mySound.volume = .5; stream_ns.soundTransform = mySound;
  1. ブラウザでムービーをテストします。 元の約半分の音量レベルで、オーディオの再生が開始されます。

SoundTransformオブジェクトを使用したH.264ファイルの制御

ActionScript 3.0では、Soundオブジェクトが変更されてサウンドをビデオに添付できなくなったので、ビデオのオーディオの制御にSoundオブジェクトは使用できません。 代わりに、NetStreamに関連付けられたSoundTransformオブジェクトを使用する必要があります。 手順は次のとおりです。

  1. ビデオサンプル(H264_Video_AS3.fla)で操作した同じファイルを開くか、サンプルファイルフォルダ内のH264_Video_AS3_Audio.flaファイルを開きます。
  2. タイムラインで~AS:Mainレイヤーのフレーム1を選択し、アクションパネルを開きます(WindowsはF9キー、MacはOption + F9キー)。
  3. コードの先頭でSoundTransform変数を宣言します。
var mySound:SoundTransform;
  1. 通常は、ここで宣言は行いません。 NetStreamのSoundTransformオブジェクトのプロパティには直接アクセスできませんが、オブジェクト自体を参照することはできます。 そのため、NetStreamでビデオの再生を開始した後、次のように、mySound変数をNetStreamのsoundTransformプロパティと同じ値に設定します。
mySound = stream_ns.soundTransform;
  1. 0~1の数値を使用して、mySoundの音量を設定します。
mySound.volume = .5;
  1. NetStreamのsoundTransformプロパティをmySoundで上書きし、音量に対する変更を適用します。
stream_ns.soundTransform = mySound;

ActionScript 3.0とFlexを使用したH.264コンテンツの再生

H.264コンテンツはFlexでもサポートされます。 手順は次のとおりです。

  1. UIComponentクラスを拡張するカスタムクラスを作成します。 H264Videoを呼び出し、videoという名前のサブフォルダに格納します。
  2. コンストラクタの前で、次のようにいくつかの変数を宣言します。
private var _video:Video; private var _connection_nc:NetConnection; private var _stream_ns:NetStream; private var _client:Object; private var _filePath:String;
  1. コンストラクタで、super()メソッドとinit()メソッドを呼び出します。
public function H264Video() { super(); init(); }
  1. initメソッドを次に示すように記述して、Video、NetConnectionおよびNetStreamの各オブジェクトを作成します。
public function init():void { _video = new Video(); _connection_nc = new NetConnection(); _connection_nc.connect(null); _stream_ns = new NetStream(_connection_nc); }
  1. _stream_ns = NetStream(_connection_nc);の行の下に、オブジェクトをNetStreamのクライアントとして設定するコード行を追加します。 処理は不要ですが、クライアントオブジェクトを作成する必要があります。
_client = new Object(); _stream_ns.client = _client;
  1. また、NetStreamからステータスイベントを処理するコード行も追加します。
_stream_ns.addEventListener(NetStatusEvent.NET_STATUS, onStatus);
  1. init()メソッドで、NetStreamをビデオに関連付け、そのビデオを表示リストに追加して、_filePathが存在する場合はビデオファイルの再生を開始します。 完成したメソッドは、次のようになります。
public function init():void { _video = new Video(); _connection_nc = new NetConnection(); _connection_nc.connect(null); _stream_ns = new NetStream(_connection_nc); _client = new Object(); _stream_ns.client = _client; _stream_ns.addEventListener(NetStatusEvent.NET_STATUS, onStatus); _video.attachNetStream(_stream_ns); this.addChild(_video); if(_filePath) { _stream_ns.play(_filePath); } }
  1. ステータスイベントを処理する関数を作成します。 具体的には、H.264ビデオを追跡できる次の2つの新しいステータスイベントを処理します。
private function onStatus(p_evt:NetStatusEvent):void { if(p_evt.info.code == "NetStream.Play.FileStructureInvalid") { Alert.show("The MP4's file structure is invalid.", "Status"); } else if(p_evt.info.code == "NetStream.Play.NoSupportedTrackFound") { Alert.show("The MP4 doesn't contain any supported tracks", "Status"); } else if(p_evt.info.level == "error") { Alert.show("There was some sort of error with the NetStream", "Error"); } }
  1. _filePathプロパティのgetter/setterメソッドを作成します。 filePathの設定では、NetStreamインスタンスのplay()メソッドを呼び出し、filePathの値に渡します。 また、次のように、getterの上に[Bindable]メタデータタグを追加します。
[Bindable] public function get filePath():String { return _filePath; } public function set filePath(p_path:String):void { _filePath = p_path; _stream_ns.play(_filePath); }
  1. ファイルを保存します。

これで、ActionScript単独またはMXMLを使用して、Flexアプリケーションにビデオを取り込むことができます。 MXMLファイルでは、H264VideoのStageにタグを作成し、id、x、yなどの値を指定します。 Adobe AutoComplete Input Flexコンポーネントを使用してコードヒントを取得している場合、Flexは、このタグを使用するための名前空間を作成します。 また、MXMLタグに、ビデオファイルを指すfilePathプロパティも設定します。

<video:H264Video id="video_h264" x="10" y="10" filePath="myVideo.mov" />

MPEG-4ファイルからのメタデータの抽出

以前は、Flashベースのビデオを操作するときに、再生時に使用するための追加のデータをビデオファイルに挿入できました。 このデータは、通常、実行時にonMetaDataイベントを使用して取得しました。 データには、トラックの長さやビデオのサイズなど、簡単な関連情報が含まれていました。 これらの種類の情報は、新しくサポートされるビデオ形式でも使用できます。

MPEGは、多くの異なる項目の情報を1つのファイルにまとめて格納できるコンテナ形式なので、そのコンテナ内の様々な各情報にアクセスできます。 NetStreamのonMetaDataイベントを使用すると、サイズ、長さ、コーデック、シークポイントに加え、カバーアート、字幕、オーディオブックチャプター、その他のテキストやイメージなど、様々な情報をH.264ファイルとM4Aファイルの両方から抽出できます。

メタデータにシークポイントが含まれていない場合、ファイルをシークすることはできません。 また、オーディオファイルとビデオファイル両方のこのメタデータを処理する新しいonImageDataイベントとonTextDataイベントもあります。 ActionScript 3.0の場合にのみ、onImageDataはGIF、PNGまたはJPEGデータをByteArrayとして返します。 onTextDataは、字幕などのテキストデータを返します。 カバーアートもオーディオファイルまたはビデオファイルにエンコードできます。カバーアートは、onMetaDataイベントを介して最も頻繁にアクセスされるファイルです。 次のチュートリアルで、この手順について説明します。

ビデオファイルからメタデータを抽出する手順は次のとおりです。

  1. ビデオサンプル(H264_Video_AS3.fla)で操作した同じファイルを開くか、サンプルファイルフォルダ内のH264_Video_AS3_MetaData.flaファイルを開きます。
  2. ~AS:Mainレイヤーの下のタイムラインに新しいレイヤーを作成し、outputという名前を付けます(図4を参照)。
下に新しいレイヤーoutputを作成
図4.下に新しいレイヤーoutputを作成
  1. outputレイヤーのフレーム1が選択されているときに、ステージ上にダイナミックテキストフィールドを作成します。
  2. 選択したテキストフィールドで、プロパティインスペクタを開きます(WindowsはCtrl + F3キー、MacはCommand + F3キー)。
  3. テキストフィールドのxプロパティを5に設定します。
  4. テキストフィールドのyプロパティを5に設定します。
  5. テキストフィールドのwidthプロパティを175に設定します。
  6. テキストフィールドのheightプロパティを300に設定します。
  7. テキストフィールドにインスタンス名output_txtを設定します。
  8. ~AS:Mainレイヤーのフレーム1を選択し、アクションパネルを開きます(WindowsはF9キー、MacはOption + F9キー)。
  9. ActionScript 3.0では、onMetaDataイベントはNetStreamのclientオブジェクトを介して処理する必要があります。 そのため、まずメタデータを処理する関数を記述し、その関数でイベントオブジェクトを唯一のパラメータとして受け取ります。 次のコードを記述してnetStatusHandler関数を作成します。
function onMetaData(p_info:Object):void { }
  1. onMetaDataイベントハンドラの内部に、p_infoオブジェクトのプロパティをループ処理してダイナミックテキストフィールドに表示するforループを作成します。 コードは、次のようになります。
for(var propName:String in p_info) { output_txt.appendText(propName + "=" + p_info[propName] + "\n"); }
  1. メタデータを使用して、ビデオオブジェクトのサイズを設定します。 onMetaDataイベントハンドラのforループの後で、ビデオオブジェクトのwidthプロパティを次のようにp_info.widthの値に設定します。
video.width = p_info.width;
  1. ビデオオブジェクトのheightプロパティをp_info.heightの値に設定します。
video.height = p_info.height;

注:サンプルファイルのビデオファイルのサイズは1280 x 720です。このサイズが表示されるようにFlashプロジェクトのサイズを調整できます。 幅と高さのサイズとして1465 x 720を使用して、サンプルファイルのサイズを調整してください。

完成したonMetaDataハンドラは次のようになります。

function onMetaData(p_info:Object):void { for(var propName:String in p_info) { output_txt.appendText(propName + " = " + p_info[propName] + "\n"); } video.width = p_info.width; video.height = p_info.height; }
  1. ブラウザでムービーをテストします。 ビデオが出力テキストフィールドの上にロードされ、テキストフィールドが見えないことがあります。 この問題を解決するには、上のビデオを移動します。 addChild(video);行の直前で、ビデオのx値を185に設定し、ビデオのy値を5に設定します。
video.x = 185; video.y = 5;
  1. ファイルを保存し、ブラウザでもう一度ムービーをテストします。 表示される出力テキストフィールド内にメタデータが表示され、ソースビデオのサイズと一致するようにVideoオブジェクトのサイズが変更されます。

オーディオファイルからメタデータを抽出する手順は次のとおりです。

  1. 前で操作したオーディオファイル(AAC_Audio_AS3.fla)を開くか、サンプルファイルフォルダのAAC_Audio_AS3_MetaData.flaファイルを開きます。
  2. 既存の~AS:Mainレイヤーの下のタイムラインに新しいレイヤーを作成し、outputという名前を付けます(図5参照)。
新しいレイヤーoutputを作成
図5.新しいレイヤーoutputを作成
  1. outputレイヤーのフレーム1が選択されているときに、ステージ上に2つのダイナミックテキストフィールドを作成し、インスタンス名としてlength_txtおよびcopy_txtを設定します。
  2. インスタンス名がlength_txtのテキストフィールドを選択し、x座標を10、y座標を5に設定します。 テキストフィールドのwidthを240に設定し、heightを21に設定します。 また、プロパティインスペクタの「テキストの周囲にボーダーを表示」ボタンをクリックして、テキストフィールドの周囲にボーダーを追加します。 プロパティインスペクタの表示は図6のようになります。
テキストフィールドの設定の更新
図6.テキストフィールドの設定の更新
  1. インスタンス名がcopy_txt TextFieldのテキストフィールドを選択し、x座標を10、y座標を31に設定します。 また、widthを240、heightを21に設定し、プロパティインスペクタの「テキストの周囲にボーダーを表示」ボタンをクリックします。 これらの変更を行うと、ステージは図7の例に示すような表示になります。
2つのテキストフィールドの設定を更新
図7.2つのテキストフィールドの設定を更新
  1. タイムラインで~AS:Mainレイヤーのフレーム1を選択し、アクションパネルを開きます(WindowsはF9キー、MacはOption + F9キー)。
  2. NetStreamオブジェクトを宣言した後、NetStreamオブジェクトのclientプロパティを参照値thisに設定します。これによりルートのタイムラインがNetStreamからのイベントを処理します。 ActionScript 3.0では、onMetaDataイベントはNetStreamのclientオブジェクトを介して処理する必要があります。
var stream_ns:NetStream = new NetStream(connect_nc); stream_ns.client = this;
  1. onMetaDataイベントのイベントハンドラを作成します。 関数には、Objectと入力されたp_infoという名前の1つのパラメータを渡す必要があります。
function onMetaData(p_info:Object):void { }
  1. オーディオソースファイルの長さを表示するために、onMetaDataイベントハンドラ内部で、length_txtテキストフィールドのtextプロパティを設定します。 オーディオの長さはイベントオブジェクトのdurationプロパティに秒単位で格納されます。そのため、その数値に1000を掛けると、メディアのミリ秒単位の所要時間を求めることができます。
length_txt.text = "Length: " + (p_info.duration*1000) + " ms";
  1. オーディオソースファイルのエンコードに使用するコーデックを表示するために、copy_txt TextFieldのテキストを設定します。 このコーデック情報は、onMetaDataイベントハンドラが受け取るp_infoオブジェクトのaudiocodecidプロパティに格納されます。
copy_txt.text = "Codec: " + p_info.audiocodecid;

完成したコードは、次のようになります。

var mySound:SoundTransform; var connect_nc:NetConnection = new NetConnection(); connect_nc.connect(null); var stream_ns:NetStream = new NetStream(connect_nc); stream_ns.client = this; function onMetaData(p_info:Object):void { length_txt.text = "Length: " + (p_info.duration*1000) + " ms"; copy_txt.text = "Codec: " + p_info.audiocodecid; } stream_ns.play("RE-Sample.m4a"); mySound = stream_ns.soundTransform; mySound.volume = .5; stream_ns.soundTransform = mySound;
  1. ブラウザでムービーをテストすると、ファイルのメタデータから抽出された基本的な情報が表示されます。 これでも十分ですが、さらに見栄えのするものにできます。
  2. ブラウザウィンドウを閉じ、Flashに戻ります。 アクションパネルを開きます。
  3. カバーイメージを表示する関数を記述します。 カバーイメージデータは、onMetaDataイベントハンドラでByteArrayの配列として受け取ります。onMetaDataイベントハンドラの下で、handleCoverImageという名前の関数を作成し、パラメータとしてp_dataという名前のArrayを受け入れます。
function handleCoverImage(p_data:Array):void { }

注:取り込むカバーデータのサイズは320 x 240です。そのため、このサイズに一致するようにFlashムービーのサイズを変更する必要があります。

  1. handleCoverImage()関数の内部で、新しいLoader変数を作成し、その値を新規のLoaderに設定します。
var loader:Loader = new Loader();
  1. 新しいLoaderを作成した後、loadBytesメソッドを呼び出して配列の最初のインデックスにあるデータをロードし、その値をByteArrayとしてキャストします。 また、ビデオにカバーアートメタデータが関連付けられている場合は、オーディオだけでなくビデオのこの情報も取得できます。
loader.loadBytes(p_data[0] as ByteArray);
  1. ロードしたイメージが表示されるように、関数の最後の行で、表示リストのインデックス0にLoaderを追加する必要があります。 これを行うには、addChildAt()メソッドを呼び出し、最初のパラメータとしてloader、2番目のパラメータとして0を渡します。
addChildAt(loader, 0);

完成したhandleCoverImage()関数は、次のようになります。

function handleCoverImage(p_data:Array):void { var loader:Loader = new Loader(); loader.loadBytes(p_data[0] as ByteArray); addChildAt(loader, 0); }
  1. onMetaDataイベントハンドラの既存のコードの上に、if条件式を作成します。 このif条件式は、covrとして格納されたカバーデータがタグオブジェクト内に存在するかどうかをチェックします。
if(p_info.tags.covr) { } length_txt.text = "Length: " + (p_info.duration*1000) + "ms"; copy_txt.text = "Codec: " + p_info.audiocodecid;
  1. length_txt TextFieldのtextプロパティを設定したコードを、次のようにif条件式の上に移動します。
length_txt.text = "Length: " + (p_info.duration*1000) + " ms"; if(p_info.tags.covr) { }
  1. elseステートメント内で、copy_txtのテキストプロパティを設定したコードを折り返します。
if(p_info.tags.covr) { } else { copy_txt.text = "Codec: " + p_info.audiocodecid; }
  1. if条件式の内部で、length_txt TextFieldのhtmlTextプロパティを設定し、オーディオの著作権情報を、メディアに関連付けられたURLへのハイパーリンクとして表示します。 この情報は、サンプルメディアファイルの©cpy属性および©url属性として格納されています。
if(p_info.tags.covr) { copy_txt.htmlText = "© <a href='"+ p_info.tags["©url"] + "'>" + p_info.tags["©cpy"] + "</a>"; }
  1. covr変数を宣言し、covrメタデータの値に設定して、この値をArrayとしてキャストします。 理論的には、複数のイメージをカバーデータとしてメディアに関連付けることができるため、covrプロパティをArrayとして処理する必要があります。
var covr = p_info.tags.covr as Array;
  1. covr変数を、前で記述したhandleCoverImage関数にパラメータとして渡します。
handleCoverImage(covr);

完成したonMetaDataハンドラは次のようになります。

function onMetaData(p_info:Object):void { length_txt.text = "Length: " + (p_info.duration*1000) + "ms"; if(p_info.tags.covr) { copy_txt.htmlText = "© <a href='"+ p_info.tags["©url"] + "'>" + p_info.tags["©cpy"] + "</a>"; var covr = p_info.tags.covr as Array; handleCoverImage(covr); } else { copy_txt.text = "Codec " + p_info.audiocodecid; } }
  1. ブラウザでムービーをテストします。 オーディオの長さとメディアに関する著作権情報が含まれたカバーアートが表示されます(図8を参照)。
ブラウザでムービーをテストするときに表示されるオーディオソースファイルのメタデータ
図8.ブラウザでムービーをテストするときに表示されるオーディオソースファイルのメタデータ

フルスクリーンビデオでのハードウェアスケーリングの使用

Flash Player 9 Update 3のもう1つの画期的な新機能に、Flash Playerによるハードウェアスケーリングのサポートがあります。この機能は、フルスクリーンでHDビデオの再生を簡単に操作できるようにするために役立ちます。特に、HD 1080pビデオ(1920 x 1080)を操作する場合に役立ちます。 新しいハードウェアアクセラレーションは、新しいH.264ビデオ機能専用に作成されたわけではありません。 ハードウェアアクセラレーションは、大きいOn2 VP6ビデオファイルや一般的なSWFコンテンツの表示にも使用できます。

ブラウザウィンドウでFlash Playerコンテンツの内部を右クリック(Windows)またはコントロールクリック(Mac)してFlash Playerコンテキストメニューを表示し、「設定」オプションを選択してAdobe Flash Playerの設定パネルにアクセスします。 最初に表示されるのは「ディスプレイ」タブです(図9を参照)。

ハードウェアアクセラレーションのオンとオフを切り替えるFlash Playerの設定パネルの「ディスプレイ」タブ
図9.ハードウェアアクセラレーションのオンとオフを切り替えるFlash Playerの設定パネルの「ディスプレイ」タブ

「ディスプレイ」タブには、ハードウェアアクセラレーションを有効にするかどうかを指定するチェックボックスのみがあります。 このチェックボックスがオフになっている場合はオンにして、ハードウェアアクセラレーションを有効にします。ハードウェアアクセラレーションは、コンテンツが新しいActionScript APIを使用してトリガすると使用状態になります。 このオプションをオフまたは無効にしてスケーリングAPIを使用すると、ソフトウェアアクセラレーションが使用されます。 ハードウェアアクセラレーションを有効にしてAPIを使用すると、Flash Playerはハードウェアアクセラレーションを使用します。 ハードウェアアクセラレーションが最も効果を発揮するするのは、ムービーの一部をフルスクリーンまたはムービー全体に拡大するフルスクリーンモードです。

ここでは、新しいハードウェアアクセラレーションを利用して、SWFの一部をフルスクリーンに拡大します。 ムービーをフルスクリーンにする場合の考慮事項に関する全体的なアドバイスについては、Tracy Stampfliの記事「Flash Player 9のフルスクリーンモードの説明」を参照してください。 フルスクリーンビデオの視覚的な効果の例を確認するには、Adobe Labsのデモを参照してください。

ムービーの部分をフルスクリーンビデオにスケーリングする手順は次のとおりです。

  1. ビデオメタデータサンプル(H264_Video_AS3.fla)で操作した同じファイルを開くか、サンプルファイルフォルダ内のH264_Video_AS3_FullScreen.flaファイルを開きます。
  2. ~AS:Mainレイヤーのフレーム1を選択し、アクションパネルを開きます(WindowsはF9キー、MacはOption + F9キー)。
  3. ActionScriptの先頭で、RectangleクラスとStageクラスを読み込みます。
import flash.geom.*; import flash.display.Stage;
  1. ステージをフルスクリーンにするには、onReleaseイベントやonKeyDownイベントなどのユーザ操作に応答する必要があります。 ただし、ここでは、関数を記述してムービーをフルスクリーンにすることができます。 goFullScreen()関数は、唯一のパラメータとしてイベントオブジェクトを受け取ります。
function goFullScreen(p_evt:Object):void { }
  1. 関数内部で、ビデオと同じサイズのRectangleを作成し、同じx座標およびy座標に配置します。
var scalingRect:Rectangle = new Rectangle(video.x, video.y, video.width, video.height);
  1. ステージのfullScreenSourceRectプロパティを、作成したRectangleに設定します。 そのプロパティは正式にはまだクラスではないため、角括弧を使用してクラスにする必要があります。
stage["fullScreenSourceRect"] = scalingRect;
  1. StageクラスのNORMALプロパティと照合することでステージが標準の表示状態かどうかを確認するif条件式を、上のコード行の後に次のように作成します。
if(stage.displayState == StageDisplayState.NORMAL) { }
  1. 条件式の内部でFULL_SCREENプロパティを使用して、ステージの表示状態をフルスクリーンに変更します。
stage.displayState = StageDisplayState.FULL_SCREEN;
  1. ステージの表示状態を再び標準に設定するelseステートメントを追加して、if条件式を拡張します。
else { stage.displayState = StageDisplayState.NORMAL; }

完成したgoFullScreen()関数は、次のようになります。

function goFullScreen(p_evt:Object):void { var scalingRect:Rectangle = new Rectangle(video.x, video.y, video.width, video.height); stage["fullScreenSourceRect"] = scalingRect; if(stage.displayState == StageDisplayState.NORMAL) { stage.displayState = StageDisplayState.FULL_SCREEN; } else { stage.displayState = StageDisplayState.NORMAL; } }
  1. タイムラインに戻り、outputレイヤーの上に新しいレイヤーを作成します。 新しいレイヤーにcontrolという名前を付けます(図10を参照)。
outputレイヤーの上にcontrolという名前で新しいレイヤーを作成
図10.outputレイヤーの上にcontrolという名前で新しいレイヤーを作成
  1. controlレイヤーのフレーム1が選択されているときに、ステージ上に約30 x 30の矩形を作成します。 矩形を選択し、シンボルに変換ダイアログボックスを呼び出します(F8キーを押す)。 フルスクリーンボタンとして機能する矩形に設定する種類としてムービークリップを選択します。 新しいシンボルにButtonという名前を付け、「OK」をクリックします(図11を参照)。
矩形をButtonという名前のムービークリップシンボルに変換
図11.矩形をButtonという名前のムービークリップシンボルに変換
  1. プロパティインスペクタを使用して、x値が40、y値が320の位置にボタンを配置します。
  2. ボタンにfullScreen_mcというインスタンス名を付けます。
  3. ~AS:Mainレイヤーのフレーム1を選択し、アクションパネルを開きます(WindowsはF9キー、MacはOption + F9キー)。
  4. 「fullScreen_mc」ボタンは、addEventListenerメソッドを使用してgoFullScreen()関数を呼び出す必要があります。 goFullScreen()関数の後に次の行を追加します。
fullScreen_mc.addEventListener("click", goFullScreen);
  1. ファイル/パブリッシュ設定を選択し、パブリッシュ設定ダイアログボックスにアクセスします。 「HTML」タブを選択します。 テンプレートドロップダウンメニューで、「Flash のみ - フルスクリーンサポート」を選択し(図12を参照)、「OK」をクリックします。
「Flash のみ - フルスクリーンサポート」オプションを選択
図12.「Flash のみ - フルスクリーンサポート」オプションを選択
  1. ブラウザでムービーをテストします。 「fullScreen_mc」ボタンをクリックします。 ビデオがフルスクリーン表示モードになります。

次のステップ

Flash Player 9 Update 3でのその他のビデオ操作については、Tinic Uroのブログを参照してください。 高解像度の標準およびコーデックの詳細については、WikipediaのH.264およびAACに関する記事を参照してください。

Flash Player 9 Update 3にH.264とAACのサポートが追加されたことにより、業界標準の高解像度ビデオおよびオーディオを簡単に使用できます。 Flash Playerのこのアップデートにより、Web上のビデオの品質レベルが向上し、様々な種類のデバイスでビデオを表示できるようになりました。 Adobe AIRやAdobe Media Playerなどの新製品に加え、将来のAdobe Creative SuiteワークフローのアップデートをFlash Playerの新しいビデオ機能と組み合わせることで、さらなる可能性が期待できることは確実です。

More Like This

  • Getting started with stage video

製品

  • Acrobat
  • Creative Cloud
  • Creative Suite
  • Digital Marketing Suite
  • Digital Publishing Suite
  • Elements
  • モバイルアプリ
  • Photoshop
  • Touch Apps

ソリューション

  • デジタルマーケティング
  • コンテンツオーサリング
  • Web Experience Management

業種別ソリューション

  • 教育
  • 金融機関

サポート

  • ヘルプ&サポート
  • 注文と返品
  • ダウンロードに関するヘルプ
  • ユーザー登録に関するヘルプ

ラーニング

  • ADC: Adobe Developer Center
  • Adobe TV
  • Design Magazine
  • Photoshop Magazine
  • Focus In

ご購入方法

  • アドビストア
  • アカデミックストア
  • アドビライセンスストア
  • ボリュームライセンスについて
  • 販売パートナー
  • キャンペーン情報

ダウンロード

  • Adobe Reader
  • Adobe Flash Player
  • Adobe AIR
  • Adobe Shockwave Player

会社情報

  • プレスルーム
  • パートナープログラム
  • 企業の社会的責任(英語)
  • 採用情報
  • 投資家の皆様へ(英語)
  • イベント&セミナー
  • Legal(英語)
  • セキュリティ
  • お問い合わせ
国・地域および言語の選択 日本(変更)
国・地域および言語の選択 閉じる

North America

Europe, Middle East and Africa

Asia Pacific

  • Canada - English
  • Canada - Français
  • Latinoamérica
  • México
  • United States

South America

  • Brasil
  • Africa - English
  • Österreich - Deutsch
  • Belgium - English
  • Belgique - Français
  • België - Nederlands
  • България
  • Hrvatska
  • Česká republika
  • Danmark
  • Eastern Europe - English
  • Eesti
  • Suomi
  • France
  • Deutschland
  • Magyarország
  • Ireland
  • Israel - English
  • ישראל - עברית
  • Italia
  • Latvija
  • Lietuva
  • Luxembourg - Deutsch
  • Luxembourg - English
  • Luxembourg - Français
  • الشرق الأوسط وشمال أفريقيا - اللغة العربية
  • Middle East and North Africa - English
  • Moyen-Orient et Afrique du Nord - Français
  • Nederland
  • Norge
  • Polska
  • Portugal
  • România
  • Россия
  • Srbija
  • Slovensko
  • Slovenija
  • España
  • Sverige
  • Schweiz - Deutsch
  • Suisse - Français
  • Svizzera - Italiano
  • Türkiye
  • Україна
  • United Kingdom
  • Australia
  • 中国
  • 中國香港特別行政區
  • Hong Kong S.A.R. of China
  • India - English
  • 日本
  • 한국
  • New Zealand
  • 台灣

Southeast Asia

  • Includes Indonesia, Malaysia, Philippines, Singapore, Thailand, and Vietnam - English

Copyright © 2012 Adobe Systems Incorporated. All rights reserved.

利用条件 | プライバシーポリシーとCookie (更新)

Reviewed by TRUSTe: site privacy statement