Displaying Television Broadcasts in Web Pages

June 09, 1999

 

There are two main components of an interactive television show. The first is the interactive TV link that is broadcast with the TV program (see Creating Interactive TV Links). The second is the Web content specified by those links. When interactive TV content originates from the Web, it is essential to make sure the video is displayed properly in the Web page. To do this, you need to use Hypertext Markup Language (HTML) extensions designed specifically for interactive TV to define how and where the video should appear within the Web page.

When creating Web content for interactive TV shows, consider developing for both the TV and computer receivers, in order to reach a wider audience. The HTML extensions described in this article were created specifically for displaying content on WebTV-based Internet Receivers, and are not needed for display in Microsoft® WebTV® for Windows®. Web pages that contain these extensions can also be displayed on WebTV for Windows, but the extensions are ignored.

For examples of code designed to work on any supported receiver, see Microsoft's Interactive Television Web site.

 

Contents

HTML Extensions for Interactive TV—Technical descriptions of the code used to define the video components of Web pages that are a part of interactive TV shows.

Creating Web Pages with Live Television Components—Technical instructions for creating Web pages that contain live TV broadcasts.

HTML Extensions for Interactive Television

Because interactive television involves displaying Web content and television simultaneously, we need to help the receiver determine how to display the information. Web pages are created using HTML, which is a collection of tags that describe how to handle the information between the tags. We have created two new components (also called extensions) that are used in the HTML of Web pages that will display TV. One tells the receiver if it should display information as TV or as Web content. The other defines the package of files that make up the interactive TV program and tells the receiver where to find it.

The View Attribute

In HTML, an attribute is a component of HTML that modifies a tag. For example, the [font] tag can have a color and a size attribute, and may look like this:

<font size="+1" color="blue"> This Is Large Blue Text </font>

An anchor tag, or other selectable item, may contain a view=web attribute. This lets the receiver know that the resource referenced by the link should be displayed as a Web page.

Example: <a href="http://webtv.net/" view=web>

If you follow this link from a TV program by selecting the interactive TV link icon, the display will change from TV mode to Web mode, which is the only way to display Web pages on a WebTV-based Internet Receiver.

Note: If the "view" attribute is not included, the view remains unchanged. The view attribute is used only on pages that are already displaying TV.

CDF Files and the Link Tag

Because interactive TV programs usually consist of many Web pages and graphics, they can be listed in a single file so the receiver can preload pages and store them locally when content is delivered via a direct Internet connection.

These files are defined by the Channel Definition Format (See, CDF W3C Proposal), and have the file extension .cdf.

The CDF file that contains the interactive TV content is referenced via an HTML <LINK> tag on the main content Web page.

Example: <LINK rel=package src="http://webtv.net/superpkg.cdf">

Channel Definition Format Example

In this example, "http://webtv.net/superpkg.cdf" is the Uniform Resource Locator (URL) address of the interactive TV link. When the receiver sees this URL it retrieves the "superpkg.cdf" file and reads it. It then downloads everything listed in that CDF file (including all dependent resources, like images) and stores them locally (often in a cache).

Example: 


<?XML Version="1.0" Encoding="iso-8859-1" ?>
<Channel HREF="overlay.html" BASE="http://webtv.net/" SELF="channel.cdf">

<!-- Each <Item> designates a part of the TV application.
The WebTV client will use this information to cache the 
complete TV application. -->

<Item HREF="http://webtv.net/itv/demo1/re_overlay_01.htm">
  <A HREF="http://webtv.net/itvl/demo1/re_overlay_01.htm"></A>
  <Title>TV Overlay Demo Page</Title>
</Item>

<Item HREF="http://webtv.net/itv/demo1/re_embed_01.htm">
  <A HREF="http://webtv.net/itv/demo1/re_embed_01.htm"></A>
  <Title>Embedded TV Demo Page</Title>
</Item>   

</Channel>
Back to Contents

Creating Web Pages with Live Television Components

It's easy to create compelling interactive TV shows by integrating live TV broadcasts in your Web pages. To do this, you use HTML tags that tell the receiver how to display the TV. The result is seamless, fully integrated interactive programming.

Technical Information

When you create interactive television programming, you are introducing relevant Web content into the television experience, not simply inserting a random TV show into a Web page. This means coordination between the TV broadcast and the Web pages. On a WebTV-based Internet Receiver, you need to do two things to successfully show a Web page with live TV to your television audience:

  • use the [view:tv] trigger attribute in the interactive TV link that specifies the content Web page. This tells receivers to display this particular content as video (see Creating Interactive TV Links for detailed information).
  • use the "tv:" URL in the HTML of the Web page to specify how the video component appears on the page (described below).

Defining TV in Web Pages with the "tv:" Attribute

After navigating to the Web page specified in the interactive TV link, the receiver needs to know that a specific embedded object within an HTML page should be displayed as video. The "tv:" URL is used for this purpose.

Within the "tv:" attribute, you can reference your TV station by channel number, network, or broadcast call letters. For example, the tag "tv:13" indicates the current broadcast on tuner channel 13, where "tv:xyz" indicates that the tuner should find the current broadcast by the XYZ network, and "tv:xzzy" should tune to the broadcast by the station XZZY. The tag "tv:" indicates that broadcast video should be displayed where specified without changing the current tuning settings.

For more information about interactive TV specifications (and specifically the "tv:" URL) , see the IETF (Internet Engineering Task Force) draft.

Embedding TV in Web Pages

To embed broadcast television content in a Web page, use the "tv:" attribute in conjunction with other common HTML tags such as <IMG>, <OBJECT>, and <BACKGROUND>. The effect is a Web page that fills the screen with a video object of the specified size embedded in it.

Example:

<img src= "tv:13" height=90 width=120>
<object data= "tv:XYYZ" height=90 width=120>
<body background="tv:">

Layering TV on Web Pages

TV images can also be layered on top of Web pages, using z-ordered (three-dimensional) cascading style sheets. In this case, the video should be set to "Z= -1" to make it the bottom layer.

Example:

<div style="POSITION: ABSOLUTE; Z-INDEX:-1">
<object data="tv:" height=100% width=100%>
</object>
</div>

Linking with "tv:" Attributes

The "tv:" attribute can also be used to display a television channel without any Web page enhancement.

For example, if you include an <A HREF="tv:"> in your Web page, the current channel will be tuned in and displayed as full-screen television.

Generally, it is best to simply use "tv:" to tune back to full-screen video (from a Web page with a reduced-size TV display) without specifying a channel. This is because viewers may be watching your show on videotape or on channels other than the one you specified in the tag (for instance, on cable).

Back to Contents