FX

Explore how to add animated cartoon 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 shown in the following figure.

Figure 1: Structure of the Embedded Player

1. Define the Media object and specify the source file to play. For this example, use the Big Buck Bunny animated cartoon located at sun.edgeboss.net or specify your own file.

var media = Media {
    source: "http://sun.edgeboss.net/download/sun/media/1460825906/1460825906_2956241001_big-buck-bunny-640x360.flv"
                    }

2. Create a MediaPlayer object by specifying the media. Set the autoPlay variable to true so that the cartoon can start immediately.

var mediaPlayer =  MediaPlayer {
    autoPlay: true
    media: media
                }	

3. Add the media player to the Node-based viewer, specifying the width and the height of the media panel.

var mediaView = MediaView {
    fitWidth: 200
    fitHeight: 100
    mediaPlayer: mediaPlayer
            }

4. Add the media viewer to the scene's content.

Stage {
    title: "Embedded Player"
    width: 200
    height: 100
    scene: Scene {
    content: mediaView

    }
}

5. Compile and run your application. Remember to add all the required import statements to your code. Find the complete application code in EmbeddedPlayer.fx
   
   
6. Deploy the sample by using the Run in Browser Execution Model.
   
   
7. After the media player is built and deployed, you can embed it into your HTML content. Copy the following code from the MediaSamples.html file automatically generated by the IDE to the target web page.

<script src="http://dl.javafx.com/dtfx.js"></script>
<script>
javafx(
        {
		archive: "MediaSamples.jar",
		draggable: true,
		width: 200,
		height: 100,
		code: "mediasamples.EmbeddedPlayer",
		name: "MediaSamples"
        }
    );
</script>

The following is a typical use case of an embedded media panel. It shows a movie thumbnail accompanied by some production details.

In order to play the media content used in this application, ensure that the required codecs are installed in your system.

We welcome your participation in our community. Please keep your comments civil and on point. You may optionally provide your email address to be notified of replies—your information is not used for any other purpose. By submitting a comment, you agree to these Terms of Use.