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
Top Related