2 Embedding Media Into a Web Page

In this section, you'll explore how to add animated media content to your web page by creating a simple media panel. To create a media player you need to implement the structure of the three nested objects that is shown in Figure 2-1.

Figure 2-1 Structure of the Embedded Media Player

Image to represent classes used to embed media in a browser

Description of "Figure 2-1 Structure of the Embedded Media Player"

To Get Started

You can build a JavaFX application using any development tool designed for creating a Java application. The tool used in this document is the NetBeans IDE. Do the following steps before continuing to build this document's sample application that uses the JavaFX Media features:

Download and install the JDK 8 and the latest NetBeans IDE releases from the Java SE Downloads page at http://www.oracle.com/technetwork/java/javase/downloads/.
If necessary, see the Getting Started with JavaFX document to get an overview of the JavaFX features and create simple JavaFX applications.

Create the Application

From the NetBeans IDE, set up your JavaFX project as follows:
1. From the File menu, choose New Project.
2. In the JavaFX application category, choose JavaFX Application. Click Next.
3. Name the project EmbeddedMediaPlayer and ensure the Create Application Class field has the value of embeddedmediaplayer.EmbeddedMediaPlayer. Click Finish.
Copy the import statements in Example 2-1 and paste them in the EmbeddedMediaPlayer.java file, replacing all of the import statements that were automatically generated by the NetBeans IDE.
Example 2-1 Replace Default Import Statements
```
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.media.Media;
import javafx.scene.media.MediaPlayer;
import javafx.scene.media.MediaView;
import javafx.stage.Stage;
```
For now, ignore the warnings on the margin since the lines of code that use the Media classes will be added in the next few steps.
Specify the media file source to be used and the String variable by adding the lines in bold in Example 2-2. For this example, use the animated video located at download.oracle.com or specify your own file. Add the lines after the public class EmbeddedMediaPlayer line.
Example 2-2 Specify the Media File Source
```
public class EmbeddedMediaPlayer extends Application {

     private static final String MEDIA_URL =
 "http://download.oracle.com/otndocs/products/javafx/oow2010-2.flv";
```

Modify the start method so that it looks like Example 2-3. This is will create an empty scene with a group root node and dimension of 540 wide by 210 height.

Example 2-3 Modify the start Method

@Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("Embedded Media Player");
        Group root = new Group();
        Scene scene = new Scene(root, 540, 210);

        primaryStage.setScene(scene);
        primaryStage.sizeToScene();
        primaryStage.show();
    }

Now, define the Media and the MediaPlayer objects by adding the code in Example 2-4 before the primaryStage.setScene(scene) line. Set the autoPlay variable to true so that the video can start immediately.
Example 2-4 Add media and mediaPlayer Objects
```
// create media player
Media media = new Media(MEDIA_URL);
MediaPlayer mediaPlayer = new MediaPlayer(media);
mediaPlayer.setAutoPlay(true);
```
Define the MediaView object and add the media player to the Node-based viewer by copying the comment and two lines of code in Example 2-5 and pasting it right after the mediaPlayer.setAutoPlay(true) line.
Example 2-5 Define MediaView Object
```
// create mediaView and add media player to the viewer
MediaView mediaView = new MediaView(mediaPlayer);
((Group)scene.getRoot()).getChildren().add(mediaView);
```
Right-click on any whitespace and select Format to fix the line formatting after adding the lines of code.
Right-click the EmbeddedMediaPlayer project node in the Projects pane and select Clean and Build.
After a successful build, run your application by right-clicking the project node and selecting Run.

Note:

If you are using the media file source used in this tutorial and you are running the application behind a firewall, you might need to set the application's proxy in order for the application to be able to access the media source file. Right-click the EmbeddedMediaPlayer project node in the Project window, select Properties, and in the Project Properties dialog, select Run. Set the VM Options field with something similar to -Dhttp.proxyHost=yourproxyhost.com -Dhttp.proxyPort=somePort#, where yourproxyhost.com is your company's proxy server and somePort# is a port number you are assigned to use.

2 Embedding Media Into a Web Page

To Get Started

Create the Application

Table of Contents

JavaFX: Incorporating Media Assets Into JavaFX Applications