Google TV

Implementation Tips

  1. Media and effects
  2. Flash Optimization
  3. Keyboard and keycodes
  4. Autozoom
  5. Site Architecture

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.

For ideas, tutorials, and guidance, check out HTML5 Rocks.

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;
}

Here's a text sample using this class:

Font test using CSS3's @font-face

(If the above text was displayed in the default sans-serif typeface, your browser does not support the @font-face directive.)

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>

Font test using Google's Font API

Font: Tangerine from the Google Font Directory.

Commercial Font Services

Font services such as TypeKit offer access to their online font libraries for a fee.

Flash Optimization

Google TV supports Adobe Flash Player 10.2 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:

Below is a demonstration using the keynav plug-in:


Basic Javascript

Otherwise, 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;
    }
  }
}
  

Media Keys

The Google TV keyboard includes media keys for Play, Pause, Previous, and Next. Users will be accustomed to having these keys work during playback operations from various web sites. If your web site plays back content like video, music, speech, etc, it should recognize these media keys and act accordingly.

Key codes:

  • Play/Pause: 179
  • Stop: 178
  • Skip Back: 177
  • Skip Forward: 176
  • Rewind: 227
  • Fast Forward: 228

jQuery

See the jQuery documentation for .keydown(), which will send key press events but not repeat them if the key is held down.

Javascript

Use code similar to that in the D-pad Navigation section.

Keycode Tester

Select the following textarea and press a key from your keyboard to have it print out the keycode:

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)

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 signature string GoogleTV instead of trying to match the entire string. Here's an example of a recent user-agent string:

    Mozilla/5.0 (Linux; GoogleTV 4.0.4; LG Google TV Build/000000) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.77 Safari/534.24

    Older releases of Google TV had a slightly different format for user agent string that reads like the following:

    Mozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.77 Large Screen Safari/534.24 GoogleTV/000000

    We recommend that you search for the signature GoogleTV irrespective of its placement position so that your apps work across all releases of Google TV.

  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

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.