678.527.8500 www.itaas.com

HTML5 An Introduction

Yogomaya “Yogo” Maharana

Contributions: Jatin Desai Dervin D’Cunha Jim Elayan

This article provides a general introduction to the capabilities

and reach of HTML5. The following topics are examined:

Adoption of HTML5 video and audio features across

multiple browsers

Comparative HTML5 feature sets available across web,

mobile and set-top box platforms

Considerations for HTML5 vs. Native development

Importance of HTML5 for Cable/Video Service Providers

Challenges of using HTML5 in set-top and similar devices

itaas, Inc. Page 1

Contents Introduction ................................................................................................................................................................1

About HTML5 ..............................................................................................................................................................2

HTML5 Features Overview .........................................................................................................................................3

Multimedia features ...................................................................................................................................................3

Browser support .........................................................................................................................................................4

Can HTML5 Replace Native Apps? ..............................................................................................................................6

Importance of HTML5 to the Cable Industry ..............................................................................................................9

Conclusion ............................................................................................................................................................... 10

Introduction

Everybody is using it, but what is it? More accurately, what can you do with it? In fact, the

capabilities of the HTML5 platform depend greatly on where and how you use it.

This article provides a general introduction to the capabilities and reach of HTML5. Future articles

will provide more in depth analysis of specific features and more detailed comparison with

development using native platforms.

The following topics are examined:

1. Adoption of HTML5 video and audio features across multiple browsers

2. Comparative HTML5 feature sets available across web, mobile and set-top box platforms

3. Considerations for HTML5 vs. Native development

4. Importance of HTML5 for Cable/Video Service Providers

5. Challenges of using HTML5 in set-top and similar devices

itaas, Inc. Page 2

“HTML5 is the cornerstone of the

W3C's open web platform - A

framework designed to support

innovation and foster the full

potential the web has to offer.” (source: http://www.w3.org/html/logo/)

HTML5 Features Overview <Video> - A standard way to embed

Video/Movie on a web page without the use

of a browser plugin. It uses Javascript to

control playback of video.

<Audio> - A standard way to embed an

audio file on a web page without the use of

a browser plugin

<canvas> - Provides scripts with a

resolution-dependent bitmap canvas, which

can be used for rendering graphs, game

graphics, or other visual images on the fly.

<article> - Specifies independent self-

contained content. An Article should make

sense on its own and should distributable

independently from the rest of the site.

<svg> - Used to define vector based

graphics for the web. The graphics is

defined in xml format and do not lose any

quality when zoomed or resized. Every

attribute and every element in SVG can be

animated.

<header> - Specifies a header for a

document or section. This element should

be used as a container for introductory

content or set of navigational links.

<footer> - Defines a footer for a document

or section. A <footer> element should

contain information about its containing

element.

<output> - Represents the result of a

calculation (like one performed by a script).

<source> - Used to specify multiple media

resources for media elements, such as

<video> and <audio>. The <source> tag

allows you to specify alternative

video/audio files, which the browser may

choose from, based on its media type or

codec support.

About HTML5

HTML5 is the latest version of HTML (Hypertext

Markup Language). It’s a cooperative effort between

the World Wide Web Consortium (W3C) and the Web

Hypertext Application Technology Working Group

(WHATWG). The WHATWG began work on the

standard in 2004 and the target date for

recommendation is 2014. The HTML5 standard is still

a work in progress, but most browsers now support

multiple HTML5 elements and APIs.

With native tags for document structures such as

headers, footers, figures, sections, video and audio,

HTML5 allows a browser to display multi-media

documents without plug-ins or custom APIs. The

intent is a single version of content being rendered

effectively, providing a common user experience

across all compliant browsers and platforms, including

phones and tablets. If cloud computing technology is

used for core functionalities and services, the device

is using a “thin client” to deliver content, which

improves performance and reliability of many

applications.

itaas, Inc. Page 3

HTML5 Features Overview (Continued) <time> - Defines either a time (24 hour

clock), or a date in the Gregorian calendar,

optionally with a time and a time-zone

offset.

Drag & Drop - Drag and drop is a very

common feature. It is when you "grab" an

object and drag it to a different location. In

HTML5, drag and drop is part of the

standard, and any element can be dragged.

Web Storage (improved cookies, larger

storage, local SQL database) - Web pages

can store data locally within the user's

browser, rather than with cookies.

However, Web Storage is more secure and

faster.

Geo-location - The HTML5 Geo-location API

is used to get the geographical position of a

user. Since this can compromise user

privacy, the position is not available unless

the user approves it. Geo-location is much

more accurate for devices with GPS, like the

iPhone.

HTML5 Features Overview

The HTML5 standard incorporates a large variety of

features that enhance the web experience. We cannot

cover the entire HTML5 feature set in this paper, but here

are some elements relevant to our discussion.

Audio/Video Tags

Canvas (Vector drawing)

Deprecated tags such as font, center, big, strike,

frame, frameset, noframes

Drag & Drop, Speech input, New Form Types (email,

slider)

Web Storage (improved cookies, larger storage, local

SQL database)

Geo-location

Offline Web Applications/ Application cache

Error Handling

Multimedia features

HTML5 video and audio support standardizes methods for displaying video (and

playing audio) without Plugins. This class of features enables developers to provide

a multimedia rich experience with relative ease.

Supported Formats:

The figures below (data source: Html5Test.com) show the various Audio/Video formats and their current level of

support across some of the major web browsers. We expect the level of support and compliance by these

products to change rapidly. Supported features include:

H.264, OGG Theora, WebM – Although specific formats are specified, encoding is not specified.

Specifying multiple sources to ensure that video can be played on all browsers.

Video/Audio controls such as Auto play, Loop, Display Controls (pause, mute, etc.)

Extracting images from video and for use in canvas

itaas, Inc. Page 4

The Chrome browser stands out as the most HTML5 multi-media compatible browser on both Mac and

Windows OS while Internet Explorer lags behind on the Windows platform and Firefox and Opera are slightly

behind on Mac OS X.

Another interesting point to note is that Safari and Internet Explorer don’t support open source formats and

stick to proprietary formats like H.264. On the flip side, Firefox and Opera support open source formats. When

creating a multi-media experience, choose the audio/video codec that best fits your target platforms.

Mac OS X Windows

Video Codecs 5.1

13

11.62

18

6

14

12.50

21

10

Ogg Theora

H.264

WebM

MPEG-4

Mac OS X Windows

Audio Codecs 5.1

13

11.6

18

6.0

14

12.50

21

10

ogg/vorbis

mp3

Wav

AAC

Browser support

Are you currently experiencing HTML5 while browsing

the web?

According to a recent study by binvisions

(www.binvisions.com), only 34%of the top 100

websites use HTML5, while the rest still use XHTML1.0

and HTML4. However, if you regularly use social

networking sites, there is a 50% chance that you are

experiencing HTML5.

Each browser has its own rules and characteristics

that differ between versions and brands. And each

one is adopting HTML5 at its own rate.

Web Browser Support

Determining the level of support for HTML5 on a

particular browser is not extremely difficult. For

example, Html5Test.com (www.html5test.com) offers

some very easy to use tools to test the HTML5

compatibility of a browser. The site offers an HTML5

testing page and rating system that measures how

many HTML5 features are implemented. The HTML5

test score is one indication of the level of browser

itaas, Inc. Page 5

support for the emerging HTML5 standard and related

specifications. Even though the specification isn't

finalized, all major browser manufacturers are taking

steps to make sure their browser is ready for the

future.

The graph below (source: html5test.com) shows the comparison test results for HTML5 compatibility of different browsers.

Figure 1: Desktop Browsers

Again Google Chrome shows the highest overall HTML5 compatibility score of 410 out of 500.

But how does implementation of HTML5 functionality

track with the trends of browser usage? Reviewing

the usage trends of HTML5 Compatible browsers give

us a couple of interesting scenarios. We tracked

browser usage trends from http://gs.statcounter.com.

First, the highest trending browsers are more HTML5

compliant. This indicates that functionality and

availability of HTML5 features will likely increase

along with the use of these browsers.

But there is also the possibility that the functionality

of HTML5 is facilitating the increased usage of these

platforms. New HTML5 experiences that are being

developed often provide the latest “wow” factor and

are being used widely in the development

community. So if consumers want to use new

functionality, they move to the more compliant

browsers.

HTML5 capabilities of mobile browsers HTML5 is only realized on mobile devices with

modern updatable web browsers. iPhone, Android,

and Windows smart phones all implement portions of

the HTML5 specification.

HTML5 applications on mobile devices can utilize

embedded audio and video sources, user’s geographic

location and display interactive animations on a 2D

canvas. The HTML5 local caching features allow the

application to store data for offline web browsing and

mobile data coverage outages.

Using the above-mentioned features, application

developers can develop and deploy a single

application that delivers a consistent user experience

across multiple mobile platforms.

However, the differences in HTML5 browser

compatibility require developers to test and tweak

the application on a multitude of browsers prior to

deployment.

Opera

IE

Firefox

CHROME Safari

-20%

-15%

-10%

-5%

0%

5%

10%

300 350 400 450

% c

han

ge o

f b

row

ser

usa

ge

(Ap

ril 2

01

1-

Ap

r 2

01

2)

HTML5 Test Scores

Usage Trends of HTML5 Compatible Broswer

itaas, Inc. Page 6

Because of this requirement, the cost of developing a

single HTML5 application might far exceed that of

developing multiple native (iOS/Android) applications.

It is important that a developer carefully consider the

balance of developing multiple native applications vs

the perceived benefit of a ubiquitous application.

Figure 2: Mobile Browsers

HTML5 capabilities of tablet browsers

Tablet browsers provide similar features as Mobile

Web Browsers. However, the larger screen size on

tablets provides more real estate for a web-like

HTML5 experience. This makes tablets an ideal

candidate for aggressive HTML5 development. The

chart to the right shows data for released browsers.

One tablet browser, Silk, is fundamentally different

from other browsers, because it has been configured

to use Amazon’s cloud service from the ground up.

Kindle however scores very low (180) on HTML5 tests.

Figure 3: Tablet browsers

HTML5 capabilities of Connected TV browsers

The demand for a TV browser experience equivalent

to mobile, tablet and web browsers has significantly

increased. This would require equivalent performance

(speed), support for latest web standards/graphics,

and ease of use. The challenge is the lower processing

power and memory of many connected TV platforms.

Other factors that need to be taken into account are

lower resolutions, pixel aspect ratio, interlace, etc.

The TV browser needs be optimized to work with

minimal resources and requires tight integration with

the underlying hardware graphics/video hardware.

The graph shows some of the existing TV browsers in

the market today and their HTML5 compatibility

scores.

0 100 200 300 400

Boxee

Sharp Aquos

LG NetCast 2012

Toshiba

Sharp Aquos

HTMLTest5 Scores (Source:html5test.com)

itaas, Inc. Page 7

HTML5 capabilities of Set-top box browsers

Set-top boxes have are still a primary mode of video

consumption. However, the way we consume content

has been drastically changing. Users want similar

ways of finding content on set-top boxes, mobile

devices and computers. To add such functionality set-

top boxes manufacturers have started implementing

browsers.

There are several types of set-top boxes being

implemented today including gateways, hybrid and

IP-based boxes. Many of these boxes include a

browser that is capable of rendering HTML. The

compatibility of browsers with HTML5 varies across

set-top boxes and brands.

In our experience these browsers range in

compatibility from the low 200 to high 300 range.

Can HTML5 Replace Native Apps?

The question of whether HTML5 could replace native

apps is highly debated. In theory, HTML5 should

allow an application to be written once and deployed

across a wide range of browsers and devices. The

reality is a bit more complex than that, though

generally moving in that direction. In our view,

HTML5 might replace some native apps but probably

not all. In fact, one recent article reported that

Facebook switched away from HTML5 to improve the

performance of their mobile application.

(http://www.fiercemobilecontent.com/story/facebook-

dumps-html5-native-code-new-ios-app/2012-08-23)

There are several factors that determine the best

approach, including:

Need for native device hardware capabilities -

specific touch/swipe functions, accelerometer,

camera, etc. – HTML5 applications do not have

access to all the hardware capabilities of the

device. Even where there is access, HTML5 may

not be able to access the full potential of the

device’s features.

End User Experience – User experience is a big

factor is choosing between native and HTML5.

Applications that do not require a very rich,

interactive experience might benefit from using

HTML5. However, applications that use very rich

user experiences and need to deliver content

instantly will work better on native applications.

Graphics or processor intensive operations –

Applications that require processor intensive

operations such as a 3D experience or a

graphically rich interface such as a game would

work better on a native platform.

Data Storage requirements – Although local

storage has been considerably improved in

HTML5 (5MB per domain for most browsers -

from 4kB for cookies). Any application that

requires more data storage would lean towards

native applications.

Connectivity requirements – Applications that

do not require constant connectivity to the

network are better suited for native

development. HTML5 provides an application

cache, but is best suited for small or limited

information.

Monetization – The native application platform

is currently supported with infrastructure such as

an app store and an Ad engine for monetization.

Development costs – The development costs

and resource requirements also vary based on

the platform chosen. Developing on native

applications requires multiple resources with

specialized skills (Cocoa for iOS, java for Android

etc.) unlike HTML5. However, due to the varying

degrees of compatibility among browsers, there

is an increased requirement for testing.

itaas, Inc. Page 8

The answers to the points above will determine the

solution that best meets the needs of the user and

the developer. At times it may be a hybrid solution

(an application that is developed in HTML5, but works

within a native framework) that creates the optimal

experience.

This approach allows applications to utilize the best of

both worlds. Application developers can choose to

develop the most commonly used portions of the

application in native platforms and less used portions

or constantly changing portions of the application in

HTML5. For example, itaas developed a hybrid

application called PartyShots

(www.partyshotsapp.com) that relied heavily on the

camera functions and advertising for monetization.

Utilizing the native platform allowed us to make the

best use the camera functions and the advertising

infrastructure. However, the help screens used HTML,

since these screens would change based on consumer

feedback.

There are also open source HTML5 platforms that

allow developers to develop applications in HTML5

and port them to native applications that we will

discuss in later papers.

Pros

1. Easier to develop on

2. Easy to host with just

about any shared

server

3. Application source

code is available to

anyone with a few

essential skills

4. Does not require

application

certification or

approval

Cons

1. Not as well integrated

with the device

2. Can't Access all of the

platform's services

3. Not as easy to

monetize as Native

apps

itaas, Inc. Page 9

Importance of HTML5 to the Cable Industry

Cable service providers have expressed the desire to

lessen the need for Cable specific standards and

specifications and rely on cross-industry and global

standards. Obvious reasons for this change include

benefiting from efforts and brainpower of a larger

community, availability of skilled resources and tools

as well as ability to re-purpose existing applications to

the TV experience.

Service providers will likely take advantage of the

standardized presentation and application

environment of HTML5. With a browser supporting

the proper codecs, HTML5 can be used to render the

navigator UI as well as video. Although the initial

feature set will be different, HTML5 can be used for

managed devices (set top boxes and media gateways)

as well as unmanaged (mobile devices and PC’s).

Various service providers are considering it as a

platform to build a User Interface/User Experience

(UI/UX) that works across all of these platforms. This

will present some critical challenges in coding and in

optimizing the UI/UX across the variety of hardware

capabilities, navigation expectations and orientation

variations. It will also greatly increase the amount of

testing required to deploy a service across the myriad

of device possibilities.

Challenges/Key Factors for a Set-Top Box (STB) HTML navigator

Below are some of the challenges/key factors for a STB HTML navigator:

HTML5 doesn’t specify video codec support and a customized browser with support for service provider

specific codecs is required

Implementing features such as parental control, close captioning, Emergency Alert Systems (EAS)

Achieving STB user experience with HTML/JavaScript is very difficult, as developers and UI designers

have to live within the constraints of a browser. The browser and applications must be customized for

TV experience – including layouts, key handling, lack of mouse, etc.

Memory/Resource management by HTML/JavaScript apps becomes more important in a limited

resource STB environment.

Developers have to be aware of capabilities of the STB environment that may not exist on a desktop

browser. For example, on a STB (or similar limited CPU/memory device) one may have to use tactics

such as:

o Using sorting judiciously in Javascript

o Using obfuscator to shorten variable/method names

o Minimize object creation

o Understand, optimize and reuse Document Object Model (DOM) elements

o Limit use of simultaneous animations

The next generation of set-tops could support HTML5, but it will require significant effort from service providers

and third party developers to accommodate the challenges mentioned. The need for common UI and the

challenges of finding development resources with experience in porting to STB platforms along with the

challenges of development and testing environments will require specialized teams of software engineers.

itaas, Inc. Page 10

Conclusion

HTML5 is a welcome standard that continues to gain adoption across the web. As browsers continue to enhance

their HTML5 compatibility, the adoption rate of HTML5 by developers will continue to rise. However, in the

short term HTML5 ubiquity will likely be trumped by development on multiple native platforms that are tightly

integrated with the device itself or with a hybrid approach. For service providers, the platform holds the

tantalizing possibility of a uniform user experience across multiple platforms, but also poses serious questions

on the “right” UI/UX and will likely require leveraging outsourced testing and development resources to

implement these new offerings in a timely fashion.

itaas, Inc. Page 11

About itaas:

itaas provides unique software engineering experience and expertise in the development,

testing, and deployment of interactive digital video services across cable, IP, and Mobile

technologies on multiple platforms including HTML5, iOS, and Android.

Since its founding in 1999, itaas has worked with hundreds of leading service providers,

technology vendors, application developers and content providers to bring innovative software

applications and services to the consumer. The company excels in translating a customer’s idea into an

innovative interactive digital video service that can be widely deployed.

Headquartered in Atlanta, Georgia, itaas has additional development and integration facilities and sophisticated

QA testing laboratories in India and Canada.

For more information, please contact us at:

www.itaas.com

678-527-8500

info@itaas.com