| Flex 2 開発ガイド > Flex アプリケーションのユーザーインターフェイスの作成 > コントロールの使用 > VideoDisplay コントロール | |||
Flex には、ストリーミングメディアを Flex アプリケーションに組み込む方法として VideoDisplay コントロールが用意されています。これらのコントロールを使用して、Flex では FLV (Flash Video) ファイルをサポートしています。このセクションでは、アプリケーションでの VideoDisplay コントロールの使用方法について説明します。
メディア (ムービーやオーディオクリップなど) が Web ユーザーへの情報提供手段として使用される機会はますます多くなっています。そのため開発者には、メディアをユーザーにストリーミングで送信して制御させるための仕組みが必要とされています。たとえば、メディアコントロールの用途として次のような場合が考えられます。
Flex のストリーミング VideoDisplay コントロールを使用すれば、Flash プレゼンテーションにストリーミングメディアを容易に組み込めます。それらのコントロールにより、Flex では FLV (Flash Video File) ファイルが利用できるようになります。このコントロールはビデオおよびオーディオデータで使用できます。アプリケーションで VideoDisplay コントロールだけを使用する場合、ユーザーがメディアファイルを制御する手段は提供されません。
|
メモ |
|
VideoDisplay コントロールでは、早送りと巻き戻しの機能はサポートされていません。また、VideoDisplay ントロールではアクセシビリティとスタイルには対応していません。 |
Flex で作成される VideoDisplay コントロールには、メディアをユーザーがコントロールするためのユーザーインターフェイスは表示されません。これは単にメディアを格納および再生するためのコントロールです。
|
メモ |
|
何らかのメディアが再生されていない限り、ユーザーには何も表示されません。 |
コントロールの playheadTime プロパティには、ビデオファイル内における再生ヘッドの現在の位置が秒単位で保持されます。このコントロールが送出するイベントの大部分は、関連付けられたイベントオブジェクトに再生ヘッドの位置を含んでいます。再生ヘッド位置を一度使用すると、ビデオファイルが特定の位置に達したときにイベントが送出されます。詳細については、キューポイントの追加を参照してください。
VideoDisplay コントロールでは、volume プロパティもサポートしています。このプロパティは、0.0 ~ 1.00 の値を取ります。0.0 はミュート、1.00 は最大ボリュームです。デフォルト値は 0.75 です。
VideoDisplay コントロールで再生されるビデオメディアの外観は、次のプロパティによる影響を受けます。
maintainAspectRatio height width maintainAspectRatio を true (デフォルト) に設定すると、コントロールのサイズが設定された後に、メディアのサイズが再調整されます。メディアのサイズは、縦横比を維持するように設定されます。
コントロールの width および height プロパティを両方とも省略すると、コントロールのサイズは再生中のメディアと同じサイズになります。一方のプロパティのみを指定し、maintainAspectRatio プロパティが false になっている場合、他方のプロパティの値は再生中のメディアのサイズによって決まります。maintainAspectRatio プロパティが true ならば、サイズが変更されてもメディアの縦横比は維持されます。
次の例は、VideoDisplay コントロールを作成しています。
<?xml version="1.0"?>
<!-- controls\videodisplay\VideoDisplaySimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:VBox>
<mx:VideoDisplay
source="http://localhost:8100/flex/assets/MyVideo.flv"
height="400"
width="400"/>
</mx:VBox>
</mx:Application>
デフォルトでは、VideoDisplay コントロールのサイズはメディアに合わせて調整されます。コントロールの width プロパティまたは height プロパティを指定し、いずれかがメディアのサイズよりも小さい場合、コンポーネントのサイズは変更されません。コンポーネントに合わせてメディアのサイズが調整されます。コントロールの再生領域がメディアのデフォルトサイズより小さい場合、メディアはコントロール内に収まるように縮小されます。
アプリケーションでは、VideoDisplay コントロールの close()、load()、pause()、play()、および stop() の各メソッドを使用できます。次の例では、2 つの Button コントロールのイベントリスナーで pause() メソッドと play() メソッドを使用して、FLV ファイルの一時停止と再生を行っています。
<?xml version="1.0"?>
<!-- controls\videodisplay\VideoDisplayStopPlay.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:VBox>
<mx:VideoDisplay id="myVid"
source="http://localhost:8100/flex/assets/MyVideo.flv"/>
<mx:Button label="Pause" click="myVid.pause();"/>
<mx:Button label="Play" click="myVid.play();"/>
</mx:VBox>
</mx:Application>
キューポイントを使用すると、メディアの再生ヘッドが指定の位置に達した時点でイベントをトリガできます。キューポイントを使用するには、cuePointManagerClass プロパティを mx.controls.videoClasses.CuePointManager に設定してキューポイントの管理を有効にし、次にキューポイントの配列を VideoDisplay コントロールの cuePoints プロパティに渡します。この配列の各エレメントには 2 つのフィールドを含めます。1 つは name フィールドで、キューポイントに付ける任意の名前を指定します。もう 1 つは time フィールドで、キューポイントを関連付ける VideoDisplay コントロールの再生ヘッド位置を秒数で指定します。
VideoDisplay コントロールの再生ヘッドがいずれかのキューポイントに達すると、再生ヘッドから cuePoint イベントが送出されます。次に例を示します。
<?xml version="1.0"?>
<!-- controls\videodisplay\VideoDisplayCP.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.events.CuePointEvent;
import mx.controls.videoClasses.CuePointManager;
private function cpHandler(event:CuePointEvent):void {
cp.text="got to cuepoint: " + event.cuePointName + " " +
String(event.cuePointTime);
}
]]>
</mx:Script>
<mx:VBox>
<mx:VideoDisplay
source="http://localhost:8100/flex/assets/MyVideo.flv"
cuePointManagerClass="mx.controls.videoClasses.CuePointManager"
cuePoint="cpHandler(event);">
<mx:cuePoints>
<mx:Object name="first" time="10"/>
<mx:Object name="second" time="20"/>
</mx:cuePoints>
</mx:VideoDisplay>
<mx:TextArea id="cp"/>
</mx:VBox>
</mx:Application>
この例では、コントロールがキューポイントに達したとき、イベントリスナーで TextArea コントロールにストリングを表示しています。表示するストリングは、キューポイントの名前と時間です。
VideoDisplay コントロールのキューポイントを設定するには、cuePointManager プロパティを使用します。このプロパティの型は CuePointManager であり、キューポイントをプログラムによって操作するために使用するメソッドは、次の例ように CuePointManager クラスで定義されます。
<?xml version="1.0"?>
<!-- controls\videodisplay\VideoDisplayCPManager.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.events.CuePointEvent;
[Bindable]
private var myCuePoints:Array = [
{ name: "first", time: 10},
{ name: "second", time: 20} ];
// Set cue points using methods of the CuePointManager class.
private function initCP():void {
myVid.cuePointManager.setCuePoints(myCuePoints);
}
private var currentCP:Object=new Object();
private function cpHandler(event:CuePointEvent):void {
cp.text="go to cuepoint: " + event.cuePointName + " " +
String(event.cuePointTime);
// Remove cue point.
currentCP.name=event.cuePointName;
currentCP.time=event.cuePointTime;
myVid.cuePointManager.removeCuePoint(currentCP);
// Display the number of remaining cue points.
cp.text=cp.text + "\n" + "Cue points remaining: " +
String(myVid.cuePointManager.getCuePoints().length);
}
]]>
</mx:Script>
<mx:VBox>
<mx:VideoDisplay id="myVid"
initialize="initCP();"
cuePointManagerClass="mx.controls.videoClasses.CuePointManager"
source="http://localhost:8100/flex/assets/MyVideo.flv"
cuePoint="cpHandler(event);"/>
<mx:TextArea id="cp" width="200" />
</mx:VBox>
</mx:Application>
次の例のように、VideoDisplay.attachCamera() メソッドを使用してコントロールを設定すれば、カメラからのビデオストリームをコントロールに表示できます。
<?xml version="1.0"?>
<!-- controls\videodisplay\VideoDisplayCamera.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
// Define a variable of type Camera.
import flash.media.Camera;
public var cam:Camera;
public function initCamera():void {
// Initialize the variable.
cam = Camera.getCamera();
myVid.attachCamera(cam)
}
]]>
</mx:Script>
<mx:VideoDisplay id="myVid"
width="320" height="240"
creationComplete="initCamera();"/>
</mx:Application>
この例では、VideoDisplay コントロールの creationComplete イベントのイベントハンドラに Camera オブジェクトを作成し、その Camera オブジェクトを attachCamera() メソッドに引数として渡しています。
VideoDisplay コントロールを使用すれば、次の例のように、Adobe の Macromedia® Flash® Media Server 2 からメディアストリームを読み込むことができます。
<?xml version="1.0"?>
<!-- controls\videodisplay\VideoDisplayFMS.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:HBox>
<mx:Label text="RTMP FMS 2.0"/>
<mx:VideoDisplay
autoBandWidthDetection="false"
source="rtmp://localhost/videodisplay/bike.flv"/>
</mx:HBox>
</mx:Application>
この例では、"bike.flv" ファイルを Flash Media Server 2\applications\videodisplay\streams\_definst_ ディレクトリに配置しています。
autoBandWidthDetection プロパティは、デフォルト値である false に明示的に設定されています。autoBandWidthDetection プロパティが true の場合、サーバーサイドファイル "main.asc" を Flash Media Server 2\applications\videodisplay\scripts ディレクトリに作成する必要があります。このファイルは次の関数を実装します。
application.onConnect = function(p_client, p_autoSenseBW) {}
application.calculateClientBw = function(p_client) {}
Client.prototype.getStreamLength = function(p_streamName) {}
以下は main.asc の実装の例を示したものです。
application.onConnect = function(p_client, p_autoSenseBW) {
// ここにセキュリティコードを追加します。
this.acceptConnection(p_client);
if (p_autoSenseBW)
this.calculateClientBw(p_client);
else
p_client.call("onBWDone");
}
Client.prototype.getStreamLength = function(p_streamName) {
return Stream.length(p_streamName);
}
application.calculateClientBw = function(p_client) {
// クライアントの BandWidth を設定するコードを追加します。
// bytes_in および bytes_Out を返す p_client.getStats() を使用して
// p_client.call("onBWCheck", result, p_client.payload) により
// 帯域幅を確認します。
p_client.call("onBWDone");
}
main.asc の詳細については、Flash Media Server 2 のマニュアルを参照してください。
NetConnection、NetStream、または SharedObject の各オブジェクトをバイナリデータとして読み込みや書き込みを行うと、使用する AMF (Action Message Format) のバージョンがオブジェクトの objectEncoding プロパティで示されます。これは ActionScript 3.0 フォーマット、ActionScript 1.0 または ActionScript フォーマットです。objectEncoding プロパティの有効な値には次のようなものがあります。
AMF0 オブジェクトは ActionScript 1.0 および 2.0 の AMF 形式を使用して直列化されます。
AMF3 オブジェクトは ActionScript 3.0 の AMF 形式を使用して直列化されます。
DEFAULT オブジェクトは Flash Player のバージョンのデフォルトの形式を使用して直列化されます。
Flash Media Server のすべてのバージョンが、AMF0 のエンコードを使用します。そのため Flex アプリケーションでは、Flash Media Server で使用されるすべての NetConnection オブジェクトおよび SharedObject オブジェクトの objectEncoding プロパティを、AMF0 に設定する必要があります。NetStream では、objectEncoding プロパティは読み取り専用です。自身のサーバーへの FAP または RTMP 接続を行う際は、常に AMF3 を使用できます。
Flex 2.01