JavaFX 2 vs. HTML5: Media Support for RIA

JavaFX 2 offers a rich set of graphics and media APIs. When combined with high-performance hardware accelerated graphics and media engines, the Java client platform enables developers to create high-performance rich Internet applications (RIAs) that behave consistently across multiple platforms. Gone are the days of scripting hell for Java developers, who can now use JavaFX 2 to inject new life into their applications.

HTML5 is another blossoming technology in the arena of media streaming. The primary focus of HTML5 was leveraging media streaming to create better user experiences -- a domain so long dominated by Adobe Flash. Though the dust has not yet settled in the standard acceptability of media file formats, I believe JavaFX 2 and HTML5 will be worthy competitors in the RIA development arena.

In this article, I describe the media assets in JavaFX 2.0 and compare them to the equivalent assets in HTML5.

JavaFX vs. HTML5: Media Steaming

JavaFX 2 has the following codec support for audio streaming:

• MP3: MP3 is a digital audio encoding standard for audio compression. Used mostly to transfer music, MP3 uses a lossy compression technique that greatly reduces the amount of data required to represent audio, with minimal auditory distortion.

• AIFF: Audio Interchange File Format uses uncompressed PCM (Pulse Code Modulation), although it has its compressed variant AIFF-C/AIFC. JavaFX does not support its compressed variant yet. This format is particularly useful when working with AudioTrack and AudioEquilizer in JavaFX. It requires much more space than MP3 -- say a sample size of 16-bit audio would require 10MB at the sample rate of 44.1 kHz.

• WAV: Most WAV files are uncompressed, but they can hold compressed audio as well. JavaFX has no support for playing the compressed form yet. So when incorporating WAV files, developers need to make sure that the file format is WAV containing uncompressed PCM.

JavaFX 2 has the following codec support for video streaming:

• FLV: Flash video is basically a container format like zip, containing file with varied encoding audio/video format. Apart from Flash video embedded in SWF files, there are two different video file formats in Flash video: FLV and F4V. Flash videos are usually encoded with codecs such as Sorenson Spark or VP6 video compression formats, other than AAC and MP3 for audio and H.264 for video.
  
  When trying to play back video files in JavaFX, user should be conscious of the format they are trying to play. For example, the media format commonly found on YouTube or Metacafe -- especially the FLV files -- have some issues in JavaFX. JavaFX does not yet support playback of formats that adhere to Sorenson FLV. Also JavaFX still does not have any interface to return a list of supported formats and encodings.

• MPEG-4: MPEG4 includes compression of audio/video data for media streaming in CDs and telephone, videophone and broadcast television applications. H.264/MPEG-4 Part 10 and AVC are the most commonly used formats for distribution of high definition video. For more information, read MPEG-4 multimedia support in JavaFX.

For more information regarding codecs supported by JavaFX 2.1, review the system requirements documentation and the release notes.

Besides limitations in browser support, HTML5 has similar issues as JavaFX in supporting audio/video formats. For more information on these issue, read How to embed video in HTML5.

JavaFX vs. HTML5: Incorporating Media

JavaFX media support is based on the following classes under the package java.scene.media.

• AudioClip: AudioClip represents a segment of audio that can be played almost instantly. Once instantiated, raw uncompressed clips are loaded entirely into memory with only play() and stop() controls at runtime. AudioClipobjects are better suited for short-playing sounds.
  
  AudioClip audioClip=new AudioClip(source); audioClip.play();

• AudioEquilizer: This class provides audio equalization controls. MediaPlayer.getAudioEquilizer() returns an ObservableList of EquilizerBand elements, which can be used for audio equalization.

• AudioTrack: This class describes an audio track, which may be a single or multiple tracks in a piece of digital music.

• EquilizerBand: The EqualizerBand class provides control for each band in the AudioEquilizer.

• Media: This class represents the media resources. Media information such as duration, meta data, tracks and video resolution can be obtained from this instance. The constructor -- Media(String source)-- takes the source parameter as URI. However, if you want to play back media from your local computer, instantiate the Media object as follows:
  
  Media(new java.io.File(filePath).toURI().toString());

• MediaPlayer: This class provides the control for playing media. However, this does not provide any visual elements.

• MediaViewer: This is a child class of Node to view and track video.

• Track: This class represents a track contained in a media resource. A media resource may have multiple parallel tracks, such as a video track with several audio tracks in different languages. The types of tracks supported by the system may be inferred from the existing subclasses of this class.

• VideoTrack: This class describes a video track in an audiovisual media resource.

Here the steps for incorporating media in JavaFX:

1. Create a Media object with appropriate source
2. Create a MediaPlayer object from the Media object.
3. Create a MediaView object like this:

public void start(Stage stage) {

     // Create and set the Scene. 

     Scene scene = new Scene(new Group(), 540, 209); 


     stage.setScene(scene); 


     stage.show();



     // Create the media source. The source may be an URI or local file

     // for local file

     // String source=new File("c:/abc.flv"").toURI().toString());

     // for URI file

     // String source="http:/aaa/xyz/abc.flv";

    

     Media media = new Media(source); 



     // Create the player and set to play automatically. 

     MediaPlayer mediaPlayer = new MediaPlayer(media); 

     mediaPlayer.setAutoPlay(true); 



     // Create the view and add it to the Scene. 

     MediaView mediaView = new MediaView(mediaPlayer); 

     ((Group) scene.getRoot()).getChildren().add(mediaView); 

 }

Here is a screenshot of the output from the above code.

Incorporating media in HTML5 is simple and straightforward. The <video> tag can be used to embed video/movie on the Web page as follows:

<video width="320" height="240" controls="controls">

      <source src="mymovie.mp4" type="video/mp4" />

      <source src="mymovie.ogg" type="video/ogg" />

      Browser does not support the video tag. 

</video>

Optional attributes may be used with <video> element:

• autoplay="autoplay" -- specifies that the video will start playing as soon as it is ready
• controls="controls" -- specifies that video controls such as a play/pause button
• height="pixels value" -- sets the height of the video player
• width="pixels value" -- sets the width of the video player
• loop="loop" -- specifies that the video will start over again, every time it is finished
• muted="muted" -- specifies that the audio output of the video should be muted
• poster="URL" -- specifies an image to be shown while the video is downloading, or until the user hits the play button
• preload= "auto/metadata/none" -- specifies if and how the author thinks the video should be loaded when the page loads
• src="URL" -- specifies the URL of the video file

Here is a screenshot from a sample Web page with video embedded in HTML5.

Click here for larger image

Similarly, the <audio> tag can be used to embed audio/music on the Web page as follows:

<audio controls="controls">

      <source src="mymusic.ogg" type="audio/ogg" />

     <source src="mymusic.mp3" type="audio/mpeg" />

     Browser does not support the audio element.

</audio>

Here are some optional attributes that may be used with the <audio> element:

• autoplay="autoplay" -- specifies that the video will start playing as soon as it is ready
• controls="controls" -- specifies that video controls such as a play/pause button
• loop="loop" -- specifies that the video will start over every time it is finished
• preload= "auto/metadata/none" -- specifies if and how the author thinks the video should be loaded when the page loads
• src="URL" -- specifies the URL of the video file

The HTML5 DOM for audio/video has methods, properties, and events for the <audio> and <video> elements, which can be accessed through JavaScript.

Conclusion

JavaFX and HTML5 face a few main challenges in trying to support media encoding:

1. The variety of audio/video encoding techniques, including quite a number of proprietary and closed ones
2. The variety of different media file formats -- incorporating every type is virtually impossible
3. Accepting one standard leaves the possibility of excluding another that may eventually become ubiquitous

Do these challenges end up raising the same age-old problem of that plugins do, which these two technologies are trying overcome? Time will tell.

Average developers do not like to concern themselves with what technology supports what encoding technique. They just want their applications to function well, at least in the sense that the applications support most of the available media file formats. Since JavaFX is a pure programming language, creating a customized media player would be easy for a developer. The same is not true for HTML5, which in addition to the codec support challenges also contends with limitations in browser support. The only consolation seems to be that both are young technologies with the opportunity to resolve these issues.