FX

JavaFX メディアブラウザアプリケーションを起動する NetBeans プロジェクトをダウンロードする

はじめに

このタスクは、壁にあるサムネールをクリックしてビデオを起動できる機能を追加します。このチュートリアルでは、JavaFX メディアプレイヤコンポーネントを使用して、ビデオの再生をサポートします。

MetaData には、メディアタイプ用の新しい属性が含まれています。

• メディアタイプがビデオである場合、プレースホルダはビデオアイコンとなり、再生の透かしが画像にオーバーレイ表示されてメディアタイプが示されます。ビデオアイコンをクリックすると、そのビデオがプレーヤユーティリティーで再生されます。
  
  
• メディアタイプが画像である場合、プレースホルダは画像アイコンとなります。画像アイコンをクリックすると全画面表示になります。
  
  

次の図 1 では、壁が読み込まれるとともに、読み込み済みのサムネイルとプレースホルダが表示されるのが分かります。これらは、画像用の単純な矩形と、ビデオ用の三角形の再生アイコンです (最初の 3 つの列に表示されます)。

図 1

JavaFX メディアプレイヤコンポーネント

JavaFX メディアプレイヤコンポーネントは、アプリケーションにビデオコンテンツを簡単に組み込めるようにします。このコンポーネントは、サイズ変更可能なビデオ再生ウィンドウと、オン/オフ可能なコントロールバーで構成されます。コントロールバー機能には、再生/一時停止のトグル、進捗状況インジケータ、現在の再生位置時間、合計所要時間、およびボリュームコントロールが含まれます。

このコンポーネントは、JavaFX プラットフォームによって現在サポートされているすべてのクロスプラットフォームおよびネイティブなメディア形式を再生します (詳細は、メディアサポートのマトリックスを参照してください)。ビデオコンテンツを JavaFX によってサポートされているクロスプラットフォーム形式でエンコードする手順については、「JavaFX テクノロジを使用してクロスプラットフォームメディアをどのようにして作成し、使用しますか?」を参照してください。

JavaFX メディアプレイヤコンポーネントは、現在のところバイナリファイルとして入手できます (ビデオを再生するチュートリアルプロジェクト内に lib/mediabox.jar があります)。JavaFX メディアプレイヤコンポーネントのソースコードと詳細な説明は、javafx.com でまもなく利用可能になる予定です。

プロジェクトの実行

アプリケーションを実行して、ビデオ機能を表示します。

1. モジュール 1 タスク 4 NetBeans プロジェクトを読み込んで、NetBeans IDE を開きます。
   
   
2. プロジェクトを実行します。プロジェクトが読み込まれると、いくつかのプレースホルダおよびサムネイルに三角形の再生アイコンが表示されることを確認します。
   
   
3. 再生アイコンをクリックして、ビデオを起動します。図 2 に、メディアコンポーネントで実行されているビデオを示します。
   
   

   図 2

4. プレーヤのウィンドウをクリックし、プレーヤを停止して閉じます。

画像の動作は前述のタスクと同じで、マウスをサムネイルの上に置くと、そのサムネイルが拡大されます。クリックすると画像の完全なビューが壁の中央に表示され、拡大された画像をクリックするとその画像が非表示になります。

アーキテクチャー

オブジェクトをビデオまたはメディアとして分類し、それに従って処理できることは、このタスクの新しい機能です。アーキテクチャーは、図 3 で青く表示されているように変化します。

図 3

Media.fx は、メディアを処理するための新しい基本クラスです。実際のところ、これは画像またはビデオの表示を処理できることを除いては、Photo が担当していたすべてのことです。現在では、Photo.fx および Video.fx はメディアクラスを拡張するため、特定のメディアタイプに関連するタスクのみを処理します。Photo.fx は全画面の画像の表示を処理し、Video.fx はビデオの再生を処理します。

Thumbnail.fx には小さな変更 (透かしの追加) が 1 つあることに注意してください。これは、このようなアーキテクチャーの利点の 1 つです。

メディアコンポーネントの統合

前述のように、複数のメディアタイプをサポートできるようにするには、いくつかのアーキテクチャーの変更が必要です。

Media.fx は新しいカスタムノードですが、このチュートリアルに従ってきた場合、コードはかなり似ています (コードの大部分は前述の Photo.fx から取得されています)。このクラスは、media 変数とそのコンテナを定義します。そのコンテナ (グループ) は、画像またはビデオ、ラベルテキスト、および周囲の非表示の矩形 (メディアとその装飾の合計寸法を表す) を保持します。この情報により、メディアを壁に正確に配置することができます。create() 関数は Media.fx で呼び出します。

     init {
            media = mediaBox
     }

Photo.fx および Video.fx は create() を使用しないことに注意してください。これらはメディアを定義してから、より小さな呼び出しで初期化します。

MetaData.fx には、メディアタイプをサポートするために作成された新しい変数があることがわかります。それらは type_video、type_image、media_url、および media_type です。前述のタスクと同様に、サンプルデータはテストをサポートするためのものであるため、ここでは説明しません。

このプロジェクト全体で、従来の showPhoto() および hidePhoto() への参照は、現在では showMedia() および hideMedia() となり、変数 photo への参照は変数 media への参照となっています。これは Main.fx で確認することができ、ほとんどの変更は名前の更新であり、新しいコードはメディアタイプに基づく if-then-else 構文だけです。このコードでは、if および else コードはほとんど同じで、相違点は Photo.fx または Video.fx に対する呼び出しだけです。この方針の説明については、if() の呼び出しで始まるコメントを参照してください。

マウスイベントの追加 (クリックして再生)

Video.fx を調べて、プレーヤの起動と停止の方法を確認します。画像の完全なビューをクリックするとサムネイルのビューに戻るのと同じように、ビデオの再生中にプレーヤをクリックして閉じることができます。

        onMouseClicked: function(evt : MouseEvent) : Void {
            (media as MediaBox).pause();
            hide();
        }

上の文は JavaFX でのキャストを示しています。as キーワードは、media を mediaBox タイプにキャストします。このキーワードは pause() を MediaBox に呼び出して非表示にします。

ビデオのサムネイルに透かしを追加する

Thumbnail.fx は、ビデオのサムネイルに透かしを追加するように変更されています。画像のプレースホルダ属性によって if else 構文が追加され、メディアタイプに応じてプレースホルダが表示されます。

def watermark: Node を見つけて、ImageView 用のコードを調べます。

    def watermark: Node =
        if (metaData.media_type == MetaData.type_video ) {
            ImageView {
                // Image.progress indicates how much of the image is loaded.
                // Until the image is loaded, the watermark is transparent.
                // Once the image is loaded, the watermark's opacity is set to 90%.
                opacity: bind if ( image.progress == 100 ) .9 else 0
                translateX: bind (boundingRect.boundsInLocal.width 
                                  - watermark.boundsInLocal.width)/2
                translateY: bind (boundingRect.boundsInLocal.width 
                                  - watermark.boundsInLocal.height)/2
                image: Constants.VIDEO_WATERMARK
            }
        } else {
            // If the media is not a video, there is no watermark
            null
        }

不透明度の使用と、それが image.progress にどのように関係するのか注意してください。この動作は、テストファイルが小さい場合は見分けにくくなります (画像と透かしが同時に読み込まれるように見えます)。ただし、このコードがないと透かしはプレースホルダ画像に表示されます。

create() 関数と、このグループ内でのコードの順序に注目してください。

    protected override function create() : Node {
        Group {
            effect: if (reflect) then reflection else null;
            content: [
                boundingRect,
                imageView,
                watermark
            ]
        }
    }

画像の倍率変更は、すべて透かしが適用される前に行われ、反射効果は透かしが追加された後に適用されます。

試してみましょう

透かしのテストは NetBeans プロジェクトで実行できます。

1. Constants.fx で、VIDEO_WATERMARK を別の URL に変更します。
   
   
2. Thumbnail.fx で、不透明度の値を変更します。
   
   
3. アプリケーションを実行し、ビデオを再生して、透明度の変化を検知できるか確認します。