2 Embedding Media Into a Web Page

https://docs.oracle.com/javafx/2/media/simpleplayer.htm

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

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:

1. Use the JavaFX Release Documentation page to find the System Requirements document that you need to verify that your system meets the minimum requirements, including the version of NetBeans IDE.

2. Use the Installation Guide on the JavaFX Release Documentation page to get the information on how to install the version of JavaFX SDK software you plan to use.

3. Install the required NetBeans IDE using the NetBeans information provided in the JavaFX System Requirements documents available from the JavaFX Release Documentation page.

4. If necessary, get acquainted with the following documents to get familiar with JavaFX:

   • What Is JavaFX

   • Getting Started with JavaFX

   • JavaFX Architecture and Framework

Create the Application

1. 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.

2. Copy the import statements in Example 2-1 and paste them in theEmbeddedMediaPlayer.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.

3. Specify the media file source to be used and the String variable by adding the lines in bold inExample 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";
   

4. 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.show();
       }
   

5. 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);
   

6. 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 themediaPlayer.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);
   

7. Right-click on any whitespace and select Format to fix the line formatting after adding the lines of code.

8. Right-click the EmbeddedMediaPlayer project node in the Projects pane and select Clean and Build.

9. 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.

   
   

10. Deploy the sample application you just built to a browser by embedding it into your HTML content using the instructions in the Deployment in the Browser document. Copy the code from the EmbeddedMediaPlayer.html file that was automatically generated by the IDE to the target web page.