Friday, January 28, 2011

Announcing FacebookTV : A Pure HTML5 Web App



UPDATE - 05 Jan 2015
This site is temporarily offline, hopefully I can get it running again soon.


After working on this idea for around 2 months, I officially released FacebookTV last week. FacebookTV (www.Facebooktv.co) is a web app that has a unique "look and feel" that automatically fits screens of all sizes, so it looks good on both your computer and mobile screens. I am also looking at ways to improve the user interface to fit television screens as well, so it can be used on Internet Connected TV screens.

How the idea was born:
A few months ago I started experimenting with HMTL5 capabilities and was very interested with the new native video tag and was intrigued at the idea of the browser treating videos just like any other DOM object. What this meanth, was that if you use the video tag you can access the object with JavaScript, access callbacks (e.g. check if the user has paused the video etc.) and use JavaScript to play, stop, pause videos etc. I found this very cool.

So I worked on a basic prototype and then hooked it up with Facebook Open Graph API objects which let me load my friends videos and view them using the video tag. I then had many issues, mainly to do with cross browser compatibility, where various browsers supported only certain video formats to be loaded into the HTML5 video tag (e.g. Chrome and Safari allowed .mp4 format, but firefox supported .ogg). In the end, I had to build a player that switched between HTML5 videos and Facebook’s native flash player depending on the browser the user was on.

The player screen where you can also comment on the video

After working out the video player technology I wanted to use, I switched my focus on the user interface. I came across Jquery Mobile (which is still in Alpha 2 at the time of writing this article) and the brilliant HTML5 boilerplate code and decided to attempt to create a complete HTML5 user interface that looks good on all kinds of browsers and mobiles. This was a very painful process, but I’m happy to say I think the FacebookTV web app is finally in a solid and portable state.

The video list screen


So make sure you try it out here:
www.facebooktv.co

And I have many new features already in the pipeline, so if you want to stay up to date with new updates and announcements then add us on Twitter or like our official Facebook page by clicking on the buttons below:





I also would love to hear from anyone with suggestions and ideas, you can do that by submitting your ideas using the Google moderator tool here


Hope you guys enjoy using FacebookTV.

4 comments:

  1. Great work and awesome UI! I'm amazed you developed all this within 2 months! I reckon it'll get heaps of traffic if you get the word out to enough people.

    ReplyDelete
  2. Thanks jonathan, it was a lot of work to get the final version as it is now, and am already started adding new features. And been trying to get the word out in all possible ways :)

    ReplyDelete
  3. Great work mark! That video format compatibility issue is really a headache. I worry that it's gonna be worse ahead with Google dropping support for H.264 in future versions of Chrome leaving WebM the only officially supported format by them. Thank god MS is playing positively on this format in IE9. Not sure about the other browsers tho.

    ReplyDelete
  4. Tnx leon, yeah it was a headache trying to standardize the HTM5 video player across browsers due to the various formats supported by various browsers. In the end, i had to switch between the native Facebook flash player and the HTML5 player.

    Your right about IE9 being more positive on supporting the various formats, i read this article this morning

    - "Microsoft releases H.264 plugin for Chrome "
    http://www.engadget.com/2011/02/02/microsoft-releases-h-264-plug-in-for-google-chrome-vows-to-supp/

    ReplyDelete

Fork me on GitHub