Google TV

Moving Web Content to Google TV Android Apps

Les Vogel - Google TV Developer Relations

  1. Overview
  2. Using Apache Cordova with Google TV
    1. Why Apache Cordova?
    2. What's missing?
  3. Using the Google TV Video Player

Overview

Android Apps provide a great experience for Google TV users to explore and use your content. Apps are able to fully integrate into the system and often give a perceived performance boost to your users. Android Apps for Google TV can be discovered and marketed through the Google Play Store on Google TV. Your Apps can benefit from the Google Play Store's various monetization options, including direct purchase, inApp purchasing , carrier billing and more.

In addition to developing an Android app from scratch, there are two quick and simple ways of moving to your web app to Google TV, both have advantages and drawbacks. By moving quickly you may be able to gain a first mover advantage and get early feedback and shortcut development cycles. Those options are:

  1. Apache Cordova (formerly known as PhoneGap)
  2. Google TV Video Player Sample

Using Apache Cordova with Google TV

Why Apache Cordova?

HTML5 / Javascript / CSS are known by many of developers and is easy to work with. Cordova provides a container for the primary assets of these apps. Rather than hosting all of your assets on a website and downloading them you can host them within your app and get a substantial performance improvement on page loads. Of course, you can still get dynamic assets from the web.

The major drawback of using Apache Cordova is that you can't use Flash in your apps.

The process

  1. Get the Cordova package and / or Source code
  1. Install Eclipse
  2. Install the ADT
  3. Really install it. - Also install the SDK, if you haven't yet. Next click on the page above.
  4. Create a Cordova project in Eclipse
  5. Set the API to 13
  6. Make sure you connect up the PhoneGap Library or Apache Cordova.
  7. Select Fix Project setup...
  8. Add the jar
  9. Run the app on your Google TV - make sure it works before proceeding. If you have any problems take a look at: http://phonegap.com/start#android for specific instructions, or watch the video.

    http://tv.adobe.com/watch/adc-presents-phonegap/phonegap-developing-for-android/ (With Google TV finds it's easiest to target API 13.)

  10. Change your App's Icon (3 version in res/drawable-*)
  11. Move your web application to the assets/www directory.

    (I usually rename index.html to index-old.html before I copy everything over)

    For my testing, I always use Resources for Google TV developers amd Google TV html-template

  12. Edit each html file to include the phonegap.js file in the header.

Thats it. You should be able to run your app now.

Cordova Plugins

One of the great features of Apache Cordova (nee PhoneGap) is plugins that can easily add features not found in a WebView to the app and invoke them from Javascript.

One very useful plugin is the VideoPlayer plugin which will allow you to easily play your video content.

What's missing?

Apache Cordova provides an Android WebView. Google TV v2.0 does not support Flash or HTML5 Video currently in a WebView.

For more information, you might wish to look at the following:

Google TV UI Templates, AJAX, and PHP/MySQL Google TV PhoneGap sample

The project from this sample can be found on code.google.com

Using the Google TV Video Player

The Google TV Video Player sample code is the Android equivilant of the Google TV UI Templates, AJAX, and PHP/MySQL web code. In fact, it communicates with the same web service and displays it's content.

We have seen this sample used both out of the box as a very quick way to get content into an app and as the starting point for a similar application.

To use this code without minimal modification, your server should speak the same JSON descriptors as the Google TV UI Templates, AJAX, and PHP/MySQL web code does:

Data Format

  • categories: [category1, category2, ..., categoryN]
  • category: {name, videos}.
  • videos: [video1, video2, ..., videoN]
  • video: {thumb, title, subtitle, description, sources}
  • sources: [source1, source2, ..., sourceN]
  • source: string with the url | {src, type, codecs}

In a nutshell, this JSON format is a collection of categories, each consists of a name and a collection of videos. Each video in turn consists of meta data like thumbnail, title, subtitle, description, plus a collection of sources. The source can be as simple as a URL string for video or may consist of a more detailed video URL string plus meta data like type, codec, etc. It's much easier to see this data format with an example:

  Array
  (
    [categories] => Array
      (
        [0] => Array
          (
            [name] => category_1_name
            [videos] => Array
              (
                [0] => Array
                  (
                    [sources] => Array
                      (
                        [0] => video_source_url_0
                        [1] => video_source_url_1
                        ...
                      )
                    [thumb] => thumb01.jpg
                    [title] => title1
                    [subtitle] => subtitle1
                    [description] => description1
                  )
                ...
              )
           )
         ...
       )
  )

Detailed steps

  1. Download the code from http://code.google.com/p/googletv-video-player/
  2. Import into eclipse. (See Eclipse install instructions above)
  3. Change Configuration.java to point to your feed.
  4. If you want to use your own format for your feed, you'll need to update DataActivity.java.

    (Note - the result are a list of Video.java objects)

  5. Fixup your icons by modifying Style1Activity.java, you'll need to specifically assign the right icons to each cateogry, rather than the random approach taken. You'll also want to add icons to the res/drawable/ directory or add to the drawable-tvdpi/ & drawable-xhdpi/ directories.
  6. Update your application icons in drawable-tvdpi & drawable-xhdpi/ directories.
  7. Change the AppName in res/values/strings

Authentication required

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

Signing you in...

Google Developers needs your permission to do that.