Web developer living in New York. Familiar with Galaga and ZX81 BASIC. Haik Sahakian
The player's Flash CS4 and XML source code can be downloaded here, and the Gadget can be viewed running in iGoogle.
- Google Gadget Basics
- Playing a YouTube Video
- Embedding a SWF into a Gadget
- Placing images on Google Sites
- Example Code
Google Gadget Basics
Here is a simple "Hello, World" example, that replaces the word "World" with the user's name if it has been entered into the gadget's settings dialog box:
<?xml version="1.0" encoding="UTF-8"?>
<ModulePrefs title="hello world example" />
<UserPref name="userName" display_name="Your Name" default_value="world" />
var thePrefs = new gadgets.Prefs();
var userName = thePrefs.getBool("userName");
A user can enter their name through the settings dialog box. The link to the dialog box ("Edit Settings") is created automatically by iGoogle when it detects that a UserPref tag is present.
Playing a YouTube video
YouTube videos can be played in a Google Gadget by using the YouTube player itself. It's easy to generate the HTML to embed the standard YouTube player from any YouTube page. But if you'd like your player to have a different set of controls from YouTube's player you will need to build a custom Flash video player.
Playing a video from YouTube introduces two challenges for a custom Flash video player:
- The URL to a YouTube FLV changes hourly.
- The query string in a YouTube FLV URL confuses Flash's FLVPlayback component into thinking it points to an XML playlist rather than a video.
Here's how to work around these two issues.
Obtaining a URL to a YouTube video's FLV file
The URL to a YouTube video's underlying video file changes hourly. This is to prevent YouTube from being used as a simple file storage server. Google owns YouTube and makes the following technique available for Google Gadget developers to reliably obtain a URL to a YouTube video.
For example, here is a YouTube video page's URL and the video's corresponding ID:
Video URL: http://www.youtube.com/watch?v=3HrSN7176XI
Video ID: 3HrSN7176XI
var YouTubeURL = '__YOUTUBE_VIDEO_URL(3HrSN7176XI)__';
Using the FLVPlayback component with URLs containing query strings
As we have just seen, YouTube video URLs include a query string as a security mechanism. The FLVPlayback component in Flash, which is typically used to play video in a Flash application, assumes that Flash video files end in extensions such as ".flv" and do not contain query strings. URLs containing query strings are assumed to point to XML playlists. As a result, without modification the FLVPlayback component will think that a YouTube dynamic URL points to an XML playlist rather than an FLV file, and will try to parse the FLV file as XML. This will cause a Flash runtime error.
To update the FLVPlayback component to properly accept YouTube URLs as video files you must modify its source code. Download and place the latest Adobe source code for FLVPlayback into your project. When you download FLVPlayback into your project, your directory structure will typically look like this:
After downloading FLVPlayback, you will need to update the part of it that manages its network connections. Open NCManager.as and make the following change to the "connectToURL" function (line 665 in the file as of February 2010):
if ( name.indexOf("?") < 0 &&
if ( name.indexOf(".flv") > 0 &&
Below is an example of the new NCManager.as class, with this change having been made. The 2 changed lines are highlighted in yellow.
var YouTubeURL = '__YOUTUBE_VIDEO_URL(3HrSN7176XI)__';
YouTubeURL += '&dummy=1.flv';
You must now tell the your Flash application to use this customized version of NCManager.as. Add the following lines to your FLA's ActionScript just before you create an FLVPlayback component:
flash.video.VideoPlayer.iNCManagerClass = flash.video.NCManager;
Here is the change in my example FLA's ActionScript, highlighted in yellow. (The package name is different from the lines above as I saved the FLVPlayback component in a directory called "fl" rather than "flash".)
After making this change your Flash video player will be able to play back files from YouTube.
Embedding a SWF into a Gadget
Google provides the embedFlash() helper function to embed a Flash file into a gadget. It works similarly to SWFObject, and automatically caches your SWF on Google's servers to improve performance. It appears that previous version of iGoogle offered the embedCachedFlash() function to embed a cached copy of your SWF, but this function is no longer necessary or available as caching is now always enabled.
One thing to watch out for in the embedFlash() function is that it cannot pass parameters from the gadget's html to the SWF via the FlashVars variable. To work around this, pass them as name-value pairs on the URL to the SWF itself.
Placing images on Google Sites
Just as your gadget's videos can be served by YouTube, your gadget's images can be hosted by Google Sites, so that your web server will not need to handle your gadget's image requests. To do this, create a web page on Google Sites, and place images that you wish to use in your gadget into the page. You can use the URL to these images on your Google Site page directly in your Google Gadget as well. For example, this image comes from this web page on Google Sites.
The Flash source code for the custom YouTube video player example can be downloaded here. Its ActionScript Code follows on page 2 of this article. The gadget built with it is viewable on iGoogle, and its source code is on page 3.
ToolsThe Google Gadget Editor is a basic text editor that can upload and publish gadgets onto google.com. It's good for writing quick gadgets, and convenient for uploading written gadgets onto iGoogle for testing. It's browser-based and is a gadget itself.
The Google Developer Gadget allows you to configure which gadgets on your iGoogle page are cached. iGoogle usually caches gadgets which can be a problem when you want to view recently made changes. To keep your gadget uncached, install the "My Gadget" developer gadget and uncheck caching for gadgets you are working on. Without the developer gadget you'll have to save the gadget under a new name to work around this.