Bubble Foundry


HTML5 TV

by Peter.

At the Dutch GTUG HTML5 Hackathon I decided to make an HTML5 TV.

My HTML5 TV uses a whole grab bag of hot web features:  CSS 3SVG, the canvas element, the video element, and HTTP live streaming video. In theory the TV works in all of the most recent versions of the Safari browser variants. However, in Mobile Safari Apple puts a custom overlay over the video element, hiding the static, and prevents videos from playing automatically. I leave it up to you whether this is desirable. Given this, I recommend you use Safari 5 on OS X to view the page.

I can confirm that the latest version of Chrome on OS X does not play HTTP live streaming videos. If you can’t see HTTP live streaming video in your browser and are comfortable with its Javascript console, you can change the channels used like so:

TV.channels = [
  {
    'name': 'BBB',
    'url': 'http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/bbb_trailer_iphone.m4v'
  }
]

As you can see, channels is an array of anonymous objects with name and url properties and you can have as many as you want. I recommend doing this before you turn on the TV.