JavaFX – YouTube


In previous blog I gave a simple example for JavaFX – JavaScript communication. Here we will see how to utilize this feature so as to integrate YouTube with JavaFX browser deployment. YouTube provides Data and Player APIs. We can utilize them to integrate YouTube presentation layer to JavaFX.

Given below is JavaFX app which uses YouTube Data APIs to search for videos with specified tag and displays the thumbnail images. User can click on thumbnail to view the video. The video can be controlled from JavaFX using JavaScript APIs. I’m sure a good designer can provide a much better seamless integration

Click on above image to launch the applet.
Note: Require JavaSE 6 Update 10 or above.
I’m not responsible for content shown in video

I have used YouTube Search APIs. It provides output in various formats – atom, rss, json and json-in-script. I have used the default ATOM format. Even though its using ATOM format, most of required attributes are provided in custom tags as shown below. Hence even though I used AtomTask to parse the feed, I still had to parse the custom tags in onForeignEvent : function(:Event):Void method. Details of parser is available in YTDataTask.fx.


<media:group>
    <media:category label='Science &amp; Technology' scheme='.../categories.cat'>Tech</media:category>
    <media:content url='http://...app=youtube_gdata' type='application/x-shockwave-flash' yt:format='5'/>
    <media:content url='rtsp://rtsp2.youtube.com/.../video.3gp' type='video/3gpp' yt:format='1'/>
    <media:content url='rtsp://rtsp2.youtube.com/.../video.3gp' type='video/3gpp' yt:format='6'/>
    <media:credit role='uploader' scheme='urn:youtube'>terrencebarr</media:credit>
    <media:description type='plain'>Terrence Barr...</media:description>
    <media:keywords>JavaFX, JavaFX Mobile</media:keywords>
    <media:player url='http://www.youtube.com/watch?v=6LdFq8T0Uys'/>
    <media:thumbnail url='http://i.ytimg.com/.../default.jpg' height='90' width='120' time='00:04:25.500'/>
    <media:thumbnail url='http://i.ytimg.com/.../2.jpg' height='90' width='120' time='00:04:25.500'/>
    <media:thumbnail url='http://i.ytimg.com/.../1.jpg' height='90' width='120' time='00:02:12.750'/>
    <media:thumbnail url='http://i.ytimg.com/.../3.jpg' height='90' width='120' time='00:06:38.250'/>
    <media:thumbnail url='http://i.ytimg.com/.../hqdefault.jpg' height='360' width='480'/>
    <media:title type='plain'>Getting Started with JavaFX Mobile...</media:title>
    <yt:aspectRatio>widescreen</yt:aspectRatio>
    <yt:duration seconds='531'/>
    <yt:uploaded>2009-07-28T21:45:00.000Z</yt:uploaded>
    <yt:videoid>6LdFq8T0Uys</yt:videoid>
</media:group>

YouTube provides “Chromeless Player” with JavaScript API support. We can obtain the videoid using above Data APIs and pass this to player using JavaScript APIs. We can perform operations such as – load video, play, pause, stop, seek, mute/un-mute – on video. Refer to JavaScript API documentation for more information.

All these APIs are encapsulated in a file – JavaYT.js. A Java wrapper for this javascript file is provided so as to invoke these APIs from Java – JavaYTUtil.java. This in turn uses JavaScriptUtil.java as shown in previous post.

Both YouTube player and JavaFX is added to a Table so as to render them together. Please refer to JavaFXYT.html for more information.

Try it out and let me know feedback

About these ads

About Rakesh Menon
-

7 Responses to JavaFX – YouTube

  1. Raghu Nair says:

    Absolute beauty!!!
    I like the way you have created a impression the whole stage is JavaFX :)

  2. Rakesh Menon says:

    @Raghu Nair Thanks! :)

  3. Ganesh Faterperkar says:

    Hi
    Does fx support rtsp protocol on mobile device (Existing device available in the market MIDP 2.0 ). so that it play youtube video on mobile?

  4. Rakesh Menon says:

    @Ganesh Faterperkar rtsp is not supported on mobile yet.

  5. Goes They says:

    Can u teach me and give a tutorial how using twitter API and facebook API in JavaFX..Thanks..

  6. jiggy360 says:

    Hi,

    Why high resolution videos getting opened in new window? is there a way to prevent it?

    • Rakesh Menon says:

      Looks like JavaFX bug.. Can you file a JIRA Bug or query in forum (may be others are facing same issue). Please specify JRE version, OS, browser and media-type info.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 45 other followers

%d bloggers like this: