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

<script src="http://dl.javafx.com/1.2/dtfx.js"></script> <script src="/rakeshmenonp/resource/JavaFXYT/JavaFXYT.js"></script>

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


<script type="text/javascript">var dzone_style = '2';</script> <script language="javascript" src="/rakeshmenonp/resource/JavaFXYT/zoneit.js"></script>

Comments:

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

Posted by Raghu Nair on August 03, 2009 at 08:32 AM IST #

@Raghu Nair Thanks! :)

Posted by Rakesh Menon on August 03, 2009 at 09:36 AM IST #

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?

Posted by Ganesh Faterperkar on October 30, 2009 at 08:23 PM IST #

@Ganesh Faterperkar rtsp is not supported on mobile yet.

Posted by Rakesh Menon on November 02, 2009 at 09:51 AM IST #

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

Posted by Goes They on December 04, 2009 at 12:00 AM IST #

Hi Rakesh,

How about using the video in our hardisk and show the thumnail?

Posted by Ro7 on February 20, 2010 at 11:55 PM IST #

Java Plug-in 1.6.0_19
Using JRE version 1.6.0_19-b04 Java HotSpot(TM) Client VM
User home directory = C:\\Users\\AlbertSpijkers

----------------------------------------------------
c: clear console window
f: finalize objects on finalization queue
g: garbage collect
h: display this help message
l: dump classloader list
m: print memory usage
o: trigger logging
q: hide console
r: reload policy configuration
s: dump system and deployment properties
t: dump thread list
v: dump thread stack
x: clear classloader cache
0-5: set trace level to <n>
----------------------------------------------------

exception: Cache must be enabled for nativelib or installer-desc support.
BadFieldException[ Cache must be enabled for nativelib or installer-desc support,http://dl.javafx.com/javafx-rt-natives-windows-i586__V1.2.3_b36.jar]
at com.sun.javaws.jnl.XMLFormat.handleResourceElement(Unknown Source)
at com.sun.javaws.jnl.XMLFormat.access$800(Unknown Source)
at com.sun.javaws.jnl.XMLFormat$2$1.visitElement(Unknown Source)
at com.sun.javaws.jnl.XMLUtils.visitChildrenElements(Unknown Source)
at com.sun.javaws.jnl.XMLFormat$2.visitElement(Unknown Source)
at com.sun.javaws.jnl.XMLUtils.visitElements(Unknown Source)
at com.sun.javaws.jnl.XMLFormat.buildResourcesDesc(Unknown Source)
at com.sun.javaws.jnl.XMLFormat.parse(Unknown Source)
at com.sun.javaws.jnl.LaunchDescFactory.buildDescriptor(Unknown Source)
at com.sun.javaws.jnl.LaunchDescFactory.buildDescriptor(Unknown Source)
at com.sun.javaws.LaunchDownload.downloadExtensionsHelper(Unknown Source)
at com.sun.javaws.LaunchDownload.downloadExtensions(Unknown Source)
at sun.plugin2.applet.JNLP2Manager.prepareLaunchFile(Unknown Source)
at sun.plugin2.applet.JNLP2Manager.loadJarFiles(Unknown Source)
at sun.plugin2.applet.Plugin2Manager$AppletExecutionRunnable.run(Unknown Source)
at java.lang.Thread.run(Unknown Source)
Exception: BadFieldException[ Cache must be enabled for nativelib or installer-desc support,http://dl.javafx.com/javafx-rt-natives-windows-i586__V1.2.3_b36.jar]

Posted by albert spijkers on April 07, 2010 at 06:44 AM IST #

@albert "Cache must be enabled for nativelib or installer-desc support" looks like you have disabled Java cache in Java-Control-Panel. Launch Java-Control-Panel, in "General" Tab click "Settings...", Check "Keep temporary files on my computer." Also ensure sufficient disk space.

http://java.sun.com/javase/6/webnotes/install/jcp.html

Posted by Rakesh Menon on April 07, 2010 at 06:59 AM IST #

Post a Comment:
Comments are closed for this entry.
About


The views expressed on this blog are my own and do not necessarily reflect that of my organization

Search

Categories
Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today