Simon’s Blog

Yesterday, in a “break” from a lovely weekend filled with work (oh joy!), I decided to see if I could find an answer to a question about JavaFX that I’ve been wondering about for a while.  What was the question?  It’s this: will JavaFX be able to compete with Flash when it comes to rich media in general, and video in particular?

As you may know, Flash revolutionized video on the web.  It enabled developers and designers to build compelling, custom video players – unique to their own companies – that “just work”.   Prior to using Flash, video playback on the web was pretty clunky, using Windows Media Player or Real Player, which often didn’t seem to work. There are a few key ingredients in Flash that went to making that possible:

1. A built-in, cross-platform video codec (if you’ve got Flash in your browser, you’ve got the Flash codec)
2. Easy to develop a custom piece of software that plays video
3. The ability to rapidly build elegant UIs that integrate with the video and make the player easy to use. For example transparent, potentially animated, controls displayed on top of the video, such as a message saying, “Click to play”.

Where does JavaFX stand with regard to the above?  Well, in terms of point #1, while the JavaFX Preview SDK doesn’t have built-in cross-platform codecs, version 1.0 will (the preview SDK uses codecs that are native to the computer you’re running the app on).  So, we can tick that box.

Points #2 and #3 go to the core of the platform, and can be evaluated with the Preview SDK.   To find an answer to my question, I set about building a toy JavaFX app that could play video, and have a fancy animated, transparent graphical doodle running on top of the video.   I was pleased to find that building this toy app took me just five minutes in total – and, I can report that it worked great.  It took a handful of lines of JavaFX code (around thirty lines, pretty much cut and pasted from an example app I found on the Web) to create a super-simple video player (click a button to play the video); with a handful of lines of code to create a pretty fancy transparent doodle running on top of the video ( around 20 lines).

Based on what I’ve seen so far, it looks to me that it will be possible to build some pretty compelling video players, pretty easily, by using JavaFX.   So, to answer my original question – will JavaFX be able to compete with Flash, when it comes to video?   I’d say it’s most certainly headed in the right direction…

Update: As per Sam’s request, here’s the code (and a screen shot) – yes, I’m sure I’m doing lots of things sub-optimally.  I’m only a beginner with JavaFX.

/*
 * Main.fx
 *
 * Created on 02-Aug-2008, 12:29:32
 */

package toyplayer;

import javafx.ext.swing.*;
import javafx.scene.paint.*;
import javafx.scene.geometry.*;
import javafx.scene.media.*;
import javafx.scene.text.*;
import javafx.scene.*;
import java.lang.*;
import javafx.input.*;
import javafx.scene.*;
import javafx.scene.paint.*;
import javafx.scene.geometry.*;
import javafx.application.*;
import javafx.scene.transform.*;
import javafx.input.*;
import javafx.animation.*;
import java.lang.System;

var angle = 0.0;

/**
 * A toy application to see if transparent animated
 * graphics can be rendered on top of a video
 * It's heavily based on bits of code
 * gathered from the Web. Sorry for no attribution,
 * I wasn't intending to make this code public
 * - particularly as my code is almost certainly
 *  not very well written!
 *
 * @author Simon Brocklehurst
 */
public class ToyVideoPlayer {

   //hard-coded reference to a video
   //on my hard-drive.
   //The one I'm playing is an mpeg4
   //of Diggnation from Revision3

   //Works with audio files as well as video

    private attribute mediaURL = "C://test.mp4";

    private attribute player:MediaPlayer = MediaPlayer {

        media: Media {
            source: mediaURL;
        }

        autoPlay: false
        repeatCount: MediaPlayer.REPEAT_FOREVER
    }

    attribute frame:SwingFrame = SwingFrame {

        content: Canvas {
            content: [
                MediaView {
                    mediaPlayer: player
                },

                Group {
                    content: [
                        Rectangle {
                            width: 100 height: 40 arcHeight: 20 arcWidth: 20;
                            fill: Color.rgb(0,0,0, 0.4);
                            onMousePressed: function(e:MouseEvent):Void {
                                player.play();
                            }
                        },

                        Text {
                            content: "Click to Play";
                            fill: Color.WHITE;
                            translateX: 15;
                            translateY: 25;
                        },
                        for(i in [0..10]) {
                            // Binding
                            Rectangle {
                                fill: Color.rgb(255,25 * i,0, i / 10.0);
                                width: 40 height: 10 arcHeight: 10 arcWidth: 10;
                                stroke: Color.BLACK strokeWidth: 1;
                                translateX: 150;
                                transform: bind [
                                    Transform.rotate(-i * 36 + angle / 2,30,30),
                                    Transform.translate(angle / 8,0),
                                ];
                            }
                        }
                    ]
                    translateX: 110
                    translateY: 190
                }
            ]
        }

        visible: true

        closeAction: function() {
            player.pause();
            frame.close();
            System.exit(0);
        }
        title: "Toy Video Player - Close the window to quit"
    }
}

var anim = Timeline { keyFrames: [
        KeyFrame { time: 0s values:
                angle => -360 tween Interpolator.EASEBOTH },
        KeyFrame { time: 2.5s values:
                angle => 360 tween Interpolator.EASEBOTH },
    ]
    autoReverse: true
    repeatCount: Timeline.INDEFINITE
};
anim.start();

var app:ToyVideoPlayer = ToyVideoPlayer{}

That’s it…