Technology Demos & Downloads

A great checklist to keep in mind when designing for TV. [Read more...]

Media and visual effects

Your Google TV site can look great with the right mix of video, audio, and visual effects. HTML5 provides this kind of rich content and more, and it’s supported in Google TV’s Chrome browser.

Fonts

There are a variety of methods for using additional typefaces on your Google TV web site.

CSS3

Use CSS3′s @font-face, which accepts TrueType (.ttf) and OpenType (.otf) fonts:

@font-face
{
  font-family: Bonzai;
  src: "Bonzai.ttf";
}

.font-demo-css {
  font-family: 'Bonzai', sans-serif;
  font-size: 36px;
}

Google Font API

Use a font from the Google Font Directory with the Google Font API:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<style>
.font-demo-google {
  font-family: 'Tangerine', serif;
  font-size: 36px;
  text-shadow: 4px 4px 4px #aaa;
}
</style>

Flash Optimization

Google TV supports Adobe Flash Player 10.1 Beta. Adobe’s Flash TV web site features various sites that demonstrate optimized Flash content on TV. You can view it here.

Delivering Content on TV

You can read Adobe’s guide to Delivering video and content for the Flash Platform on TV . This guide covers the new StageVideo API, tips on optimizing the performance of your video player and your application, and more, with sample code to walk you through.

Flash optimization

For general tips on optimizing Flash performance on your web site, please read the Adobe Flash optimization guide , which provides a wide range of tips and best practices.

H.264 Video Playback

The hardware in the Google TV supports a maximum of two H.264 decoders and thus has a limit of two decompressor instances. If a site tries to create a third decompressor instance, Google TV will shut down the least recently used of the two existing instances. In order to operate correctly on the Google TV, your site should be designed such that it never needs more than two instances.

Overlaying Flash Plug-ins

If you have Flash plug-ins that either rely on transparency to show through content beneath or that overlap each other on a page (one over the other, separated by z-index), you will have to make modifications.

• Transparency in the SWF will be ignored (content underneath the plug-in will never show through).
• When two plug-ins overlap, the z-index will be ignored, meaning that the actual plug-in shown is indeterminate, and changing the z-index will have no effect.

If you have a page that flips between two plug-ins by changing the z-index, this will not work on Google TV. The best alternative is to move the plug-in not being displayed off of the page, and swap them by moving the off-page plug-in onto the page and the on-page plug-in off of it. If the page loads with one of the plug-ins off-page, you will also need to set the CSS value display:block in order to being playback in that plug-in.

Keyboard and keycodes

D-pad Navigation

The D-pad is an essential part of navigating a page using Google TV. Many users will prefer it to the mouse pointer, which can be difficult to aim accurately from a sofa.

jQuery

Developers using jQuery might consider using an existing plug-in, such as:

• Mike Hostetler’s keyboard navigation plug-in

If not, the basic Javascript for processing the D-pad looks something like this:

window.onload = function() {

  document.onkeydown=function(e){

    if (!e) e=window.event;

    switch(e.keyCode) {

      case 37:
        alert("Left arrow");
        break;

      case 38:
        alert("Up arrow");
        break;

      case 39:
        alert("Right arrow");
        break;

      case 40:
        alert("Down arrow");
        break;

      case 13:
        alert("Enter/select");
        break;
    }
  }
}

Auto-zoom

Google TV implements an auto-scaling algorithm that attempts to scale web pages so that they display properly on TV (accounting for overscan, etc). If your site attempts to be “pixel-perfect”, the algorithm may over-zoom your content.

If this happens to your pages, you have two options:

Disable Autozoom

If you are designing a site specifically for display on Google TV, you can elect to disable auto-zoom and handle all of the content layout, sizing for the 10-foot experience, etc, by yourself. You can do this by adding a <meta> tag to your page as follows:

<meta name="gtv-autozoom" content="off" />

Adjust auto-zoom

If you want to take advantage of auto-zoom, but modify the amount that it zooms, you can use the following code to do so.

jQuery

If your site uses jQuery, you can include the following code in your ready() function:

$(document).ready(function() {

  var w = screen.width;
  var h = screen.height;

  var bw = $(window).width();
  var bh = $(window).height();

  var wRatio = bw/w;
  var hRatio = bh/h;
  var ratio = (wRatio + hRatio) / 2;

  $('body').css('zoom', ratio);

})

Basic Javascript

Otherwise, the basic Javascript for adjusting the zoom ratio looks something like this:

function init() {

  var w = screen.width;
  var h = screen.height;

  var bw = window.innerWidth;
  var bh = window.innerHeight;

  var wRatio = bw/w;
  var hRatio = bh/h;
  var ratio = (wRatio + hRatio) / 2;

  document.getElementsByTagName('body')[0].style.zoom = ratio;
}

Site architecture and URL structure

Given that you’re modifying several pages, you might be wondering where to serve the TV version. Same domain? Separate domain? In our opinion, it’s best to serve both the TV and desktop versions on the same domain, though you’re of course free to do what works best for you.

Build the TV version on your existing site/domain

In most cases, it’s better to build the TV optimized version of your content on your existing site (i.e. build on example.com rather than buy a new domain or TLD)

• Simplifies maintenance for administrators
• Keeps the brand consistent for users (they only need to remember one URL)
• Strengthens indexing signals, such as PageRank, to the main site (rather than diluting signals between a TV and desktop version)

For example:

• Desktop users browse example.com/great-vid with the corresponding stylesheet

  <link rel="stylesheet" href="my-existing-css.css" type="text/css" media="screen" />

• TV users browse the same URL, example.com/great-vid, but with TV stylesheet

  <link rel="stylesheet" href="tv.css" type="text/css" media="tv" />

Use existing URLs with CSS change OR create new URLs including rel=”canonical”

You have two main options for your URL structure.

1. Keep it all the same.
2. Add new URLs for TV that contain rel=”canonical” to corresponding desktop/original version.

For example:

• Desktop users browse

  example.com/great-vid

• TV users browse

  example.com/great-vid&media=tv

• Add rel=”canonical” to consolidate indexing and ranking signals to the original version
  • TV version of page at example.com/great-vid&media=tv contains

    <link rel="canonical" href="example.com/great-vid" />

    to keep example.com/great-vid as the displayed URL in search results with consolidated PageRank and indexing signals.

Click here for more information on the use of rel=”canonical” and its benefits.

Redirecting TV users to the right version

Because you’re either using your existing URL structure, or you’re creating new URLs and including rel=”canonical”, it’s expected that Google search results will display your desktop URLs, such as example.com/great-vid.Therefore, when a TV user clicks this result, this request should either display the page with the TV CSS or redirect them to the TV-optimized version.

1. Detect the Google TV user-agent string by looking for the sub-strings Large Screen and GoogleTV instead of trying to match the entire string. Here’s an example of a recent user-agent string:

   Mozilla/5.0 (X11; U; Linux i686; en-US) AppleWebKit/533.4 (KHTML, like Gecko) Chrome/5.0.375.127 Large Screen Safari/533.4 GoogleTV/161242

2. Perform one of two options depending on whether your TV version is through CSS or you’ve created new URLs:
   • Display URL with TV CSS
   • Redirect (temporary 302) to TV version

Google provides a good outline for design considerations for the Interactive TV space. [Read more...]