Video Menu Entries | Installing channel.zip files
Active TV Widescreen
The information below is for an example TV-web channel supporting TV advertising. The example TV image above is widescreen and requires a widescreen monitor to be fully viewed. An older version of the example TV web-channel with a 4x3 screen image is available. See the section below "Installing channel.zip files" for the quick steps required for TV-web channel installation. Some older channel.zip files follow a slightly different procedure, described in the 4x3 example page.
A ‘channel’ page like this can be viewed on any active-TV technology-enabled TV or Set-Top Box (STB), such as the recently upgraded D-Link DSM-520.
This page is for those taking a quick look at an example layout before trying it on a TV; it is also for software engineers who may wish to modifying the example to better understand how it all works.
The actual code used in this PC-web page is modified from the TV-web code described below. (Note: by definition, PC-web content can be accessed and navigated through using a keyboard and mouse; TV-web content can be navigated through using just a TV infra-red remote.
This is because TV-web code cannot be displayed in a Windows XP browser as the former is formatted for a Media Center Edition (MCE) PC or active-TV technology-enabled PC. For this example page, I have removed the extra components so as to make the TV-web channel compatible with the Windows XP or Vista-based browser normally used to display PC-web pages.
There is more information on this at the active-TV technology blog site.
Some other functions have also been disabled to make it possible to view the TV-web page on a PC using a common browser such as Firefox or IE. For instance, the ‘settings’ button is not enabled, as it is used to personalize the TV channel layout, including disabling the left-right swapping effect (see the side-by-side panels below). Some Plasma TV owners may use this setting to help protect against TV damage. The swapping effect is achieved with a ‘snap-action’. (Note: gliding from side-to-side was tried, but some of the graphics engines in the low-cost TV chips had a hard time keeping up with the drawing speeds.) Under normal operation, the video ‘window’ is highlighted and the ‘enter’ button is pressed on the TV remote to cause the video to go ‘full-screen’.
Normally, Web applications run in the PC’s browser and the image is sent to the PC’s graphics engine for rendering and ultimately display on the PC monitor. With TV-web ecosystem support, the TV-web applications still run on the PC browser, but the image instead is sent over the network for display by the TV SOC graphics engine.
This approach supports the option of combining video streams (decoded by the video engine) with TV-web images rendered by the graphics engine to create overlay TV web. This is particularly useful when supporting new forms of TV advertising. In anticipation of its popularity, this approach is under evaluation by several active-TV technology developers. It is important to understand that a TV which does not support overlay TV-web cannot display graphics images over the video image. Most current active-TV technology-enabled TVs do not support overlay TV-web. For this reason the example TV-web channel does not draw any graphics images over the video image. In contrast, PC-web sites do not have to deal with this limitation.
The video image decode by the SOC’s video decoder is displayed in an area known as the “viewport”. The viewport for the example above has been turned off. To enable the video to be displayed above, a window containing a Flash video player should replace the missing viewport. This is not a big task, but the work has not yet been completed as its only priority is in support of this PC demonstration. This explains why there is no video displayed. If you want to see video play-back working on your PC, install the TV emulation software from the blog site described above.
Support Code
A link to the actual files for the example channel is available at the active-TV technology blog [upper right corner]. If you want to try them out on a PC then you have to first install software to allow the PC to emulate a TV. There is a link to this software at the top-right corner of the active-TV technology blog site. Note, navigation is via the left-right arrows and F12 is used for 'back'.
There are four files needed to support a TV-web channel. The names can all be changed but their function is necessary:
- active_TV_16x9_ch1.htm, this is the HTML layout for the TV-web channel. It is possible to completely build a TV-web channel using only HTML, but the example also makes use of Flash.
- active_TV_16x9.swf, this is the Flash file used to support the channel. The tasks performed in the Flash file and HTML files have been carefully divided. This will enable those who do not have Flash building tools to modify the channel by only working with the simpler HTML.
- active_TV_16x9_ch1.jpg, this is a small Icon used to identify the TV-web channel. With PC-web, a text string is used to identify a web page – such as “Yahoo page”.
- active_TV_16x9_ch1.mcl [Media Center Link], this is the MCE conformant file used to “install” the channel into the TV’s channel listings. Let’s take a look at it first.
<application> url="C:\Program Files\Common Files\TV-Websites\active_TV_16x9_ch1.htm" name="active-TV technology channel 1" thumbnailImage="C:\Program Files\Common Files\TV-Websites\active_TV_16x9_ch1.jpg" </application>
Below are three example channel thumbnail images. A PC must have an .mcl file for each TV-web channel added. PC-web pages are listed as ‘favorites’ and accessed via a pop-down menu. Currently, most TVs are using a TV-web page from Media Mall which displays the TV’s ‘favorite’ TV-web channels. With this system, the PC detects the .mcl file and installs the new channel under the ‘more programs’ heading. It is possible to use the example TV-web channel many times with different .mcl files and different channel icons. Each channel would access different video material; this is further explained below.
The TV image at the top is formatted for a traditional 4x3 TV. It is also possible to format for a 16x9 or wide screen TV. The .swf for a wide screen example channel is included.
A TV-web page is formatted for TV viewing and access by a TV’s IR remote, not a keyboard or mouse. It is important that TV-web pages (or channels) not be confused with PC-web pages. This is accomplished by adding the code below to the TV-web .html file. This prevents search engines such as Google returning the TV-web page when the PC user is expecting to access only PC-web. Normally, PC-web pages are not linked to TV-web pages.
function IsMCEEnabled() {
return true;
}
Similarly, a TV user expects to access only TV-web. The TV has no keyboard or mouse so would not support access to a PC-web page. If a TV tries to navigate to a PC-web page, the window shown below appears on the TV screen. Using the ‘enter’ key on the IR remote will clear the box. This is a result of the PC-web page not being formatted for the TV and technically speaking, not containing the ISMCEEnabled marker. The wording “create a shortcut” refers to placing an icon on the PC desktop -- this is not a shortcut for TV use!
PC browser calls on TV-web HTML
Beside IsMCEEnabled() function, there are other functions which should be included in the .htm file. They are listed below. The onScaleEvent() is called when the size of the display is changed to fit TV requirements. In PC terms, this can occurs when the window is dragged to a new size. The OnRemoteEvent() is called whenever the TV IR remote is pressed. As you can see from below, the example TV-web channel passes this information directly to the Flash .swf code. The onPlayStateChange() is called when there is a change in the video play-sate, such as the end of a video is reached. Flash development tools were originally intended to support navigation via a mouse. The TV-web example has been carefully built to also support navigation via a TV remote.
onScaleEvent( ScaleAmount )
onRemoteEvent( keycode ) { active_TV_16x9.onRemoteEvent( keycode );
onPlayStateChange( playState )
Flash code calls on TV-web HTML
Sometimes the .swf Flash code makes calls on the .htm code. The calls are listed below. The most obvious is PlayVideo(). The network address, or URL, for the video is supplied. The HTML code calls MCE support objects which ensure the video is played in the viewport. MCE objects support two locations of the viewport. One is known as the shared viewport and generally appears in the lower left corner of the TV screen. The other is the custom viewport. This can be resized and positioned anywhere on the screen. This is accomplished with the setViewport() procedure-call. The GoToFullScreen() routine is used to switch the viewport from the view above to the TV full-screen. The TV remote’s ‘back’ or ‘return’ button is used to restore the menu selection view shown at the top this page.
playVideo( videoURL ) GoToFullSceen() setViewport( x, y, w, h )
Four more functions of interest are getColumnHeadings(), getChannelIcon(), nextAdvert() and fillVideoArray(). There are easy to understand. The getColumnHeadings() supplies the text for the top of the column menus. Look again at the TV screen example above. The text such as “YouTube” or “BBC News”, exactly fits with the array of text strings returned by the function. Just re-edit this array to change the column text on the TV. The getChannelIcon() is used to supply an alternative logo to the active-TV technology logo appearing in the top-left corner of the screen. If no icon information is supplied, then the active-TV technology logo is used. It is possible to supply an icon per-column. Each call to getChannelIcon() returns the path to the channel icon image. The example applies an image from local file bbc.png to the “BBC News” column 2. Images can be in JPEG, PNG and GIF format. They should be 200x65 pixels on a black or transparent background.
function getColumnHeadings( number_of_columns ) {
column_heading[0] = "YouTube";
column_heading[1] = "BBC News";
column_heading[2] = "Music Video";
column_heading[3] = "advertising"; // used below the "video advert" box
return column_heading;
}
Function GetChannelIcon( column ) {
if ( column == 2) return "bbc.png"; }
The nextAdvert() function is used to obtain information about the next advert to display. The information is similar to a video menu entry (see next topic). But there is also a still-image and a possible navigation link to a new TV-web channel.
function nextAdvert()
function advert ()
{ this.image; // currently 130x97 pixels
this.title;
this.description;
this.url;
this.rating;
this.duration;
this.date;
this.link; // for TV-web navigation
};
The last of the four functions, fillVideoArray(), is used to fill the menu entries for each column. The function returns an array of menuEntry objects. Each menuEntry object contains the URL information used to retrieve the video and descriptive text information relating to the video. The ‘duration’ entry is in seconds. The first_video parameter is an index into the menu array. The fillVideoArray() function may be called several times to gather the necessary video information. [Note: the current YouTube library API sets a limit for XML video entries.]
function fillVideoArray ( column, first_video, quantity )
function menuEntry ()
{ this.title;
this.description;
this.url;
this.rating;
this.duration;
this.date;
};
Video Menu Entries
The example HTML responds to the fillVideoArray() call by parsing the information returned from an “XML call” on the YouTube video library. There is a blog entry on this topic. The URL below is used to find videos for the menu under the “YouTube” menu column. Click on the URL below and open the returned XML data in the browser, to see what an XML data file looks like
http://www.youtube.com/api2_rest?method=youtube.videos.list_by_tag&dev_id=edz1zYzBGMw&tag=comedy
With this simple example, the YouTube response is parsed to extract the relevant data for the menuEntry array. There are lots of ways to enhance this system. The simplest is to edit the ‘comedy’ tag at the end of the search string (see above). There is no need to restrict the video source only to YouTube. All the video sharing systems have alternative distribution methods which are also based on XML. There are also continually updated RSS video syndication feeds which could be accessed. A more elaborate, tool could be built to accomplish this task and hence lead to a superior mash-up of Web 2.0 technology. Clearly, it is needed to complement this TV-web example. The result is that a user, or TV-web viewer, can control the menu and the required video selection without having to understand any of the engineering details described above. At that point it will be easier to build your own TV-web channels than building a blog.
Installing channel.zip files
The http://active-tv.blogspot.com has links to .zip files which can be used to install new TV-web channels. A un-zip tool such as WinZip is required to extract the contents of the .zip file. Each .zip file contains typically 5 files. They are usually extracted and installed at the c:\ location. Install problems can be avoided by first creating the C:\Program Files\Common Files\TV-Websites directory before extraction. For example, un-zipping YouTube_16x9.zip, the following files will be extracted
C:\Program Files\Common Files\TV-Websites\YouTube_16x9\YouTube_16x9.htm C:\Program Files\Common Files\TV-Websites\YouTube_16x9\YouTube_logo.png C:\Program Files\Common Files\TV-Websites\YouTube_16x9\YouTube.jpg C:\Program Files\Common Files\TV-Websites\YouTube_16x9\active_TV_16x9.swf C:\Program Files\Common Files\TV-Websites\YouTube_16x9.mcl
As described above, the .htm file contains JavaScrip code which calls on a video-share site's API or RSS feed. With some sites, you may have to agree with "terms of use" for accessing video and video information. For example, some sites may only allow their video to be accessed from specific geographical locations, or impose some other restrictions. When using the code above, video is requested by your PC. Only you are in a position to know if your PC is allowed to make the request and ultimately enable viewing of the video.
© 2008 Active TV Technology. All Rights Reserved.