Replacing flash with HTML5 and CSS3

• If you think your work should be universally accessible , you
have to forget Flash and Come to HTML5.See in the Table
Flash based Multimedia HTML5 Media playback features
 In order to play flash-based
multimedia content ,users have to
install a Flash plugin on the
computer . For example ,some
products form Apple does not
allow flash to run.
 HTML5 is standard technology. So
all upcoming are forced to accept
it. Popular browser including
Mozilla Firefox , etc. already
support HTML5 very well.
 Even though free SWF editors are
available, professional level SWF
media can only be created using
Adobe Flash . This is proprietary
commercial works with Microsoft
Windows only.
 Interactive page area creation
with HTML5 , CSS3 and JavaScript
can be done using simple text
editors. Being open source
technology, it is reachable
universally.
 Flash has been widely deprecated
since the arrival of HTML5.
 HTML5 is just the latest version of
standard HTML, Maintained by
W3C.

Before the arrival of HTML5, a web designer had to
embed an external media player into the Web Page in
order to play an audio or video clip. Unfortunately,
HTML5 comes built-in <video> and <audio> tags
.Inserting media clip using these tags is very simple , just
like inserting image files using <img>.
 Table on the next page indicates the comparison
between the outdated playback techniques with the
HTML5 media playback features

Traditional Playback Techniques HTML5 media playback features
 Web designing will be a confusing
task if a media clip is to be included
,even though single-line techniques
are available finding a universal way
is difficult.
 Being a standard technique ,
HTML5 media will be universally
playable.
 Media players vary from website to
website ,which means there is no
standardization .This means there is
additional work of installing each of
them in the visitors device.
 The visitor has to install no
additional plug-ins. All the latest
Web Browsers come With built-in
HTML5 and media playback
support.
 Some websites take a lot of time to
load since the external service is
used.
 The time taken to load the external
service can be saved since it is not
required.
 More websites use propriety media
players to play media clips , which
means a free software fan can’t
browse the web with all its
attractions.
 If you use a free software Web
browser and if it depends on free
software media playback
technology , the process is truly
‘libre’.

<video> is one of the latest tags in HTML, defined in HTML5.
This elements makes it possible to include video files
regardless of the browser and plug-ins.
The syntax is as follows:-
<video ATTRIBUTES>
<source src =“SOURCE1” type=“TYPE1”>
<source src =“SOURCE2” type=“TYPE2”>
……..
ERROR MESSAGE
</video>

<audio> is similar to <video>.
A notable difference is that to give the width and height.
Here is an example:
<audio controls>
<source src=“file.ogg” type =“audio/ogg”>
<source src=“file.mp3” type=“audio/mpeg”>
Your browser doesn’t support HTML5 audio.
</audio>

Creating animation using CSS3 is interesting.
The best part is that any HTML element can be animated –
paragraphs , images or buttons; basically, anything you would
like to can be animated.
Some Merits of CSS3 animation are;
=>Animations are rendered in the user’s device. The
downloading of large-sized animated files can be avoided.
=>Being rendered in the user’s device, animation will be
suitable for the resolution of that device.

Combining CSS3 with JavaScript

Combining CSS3 animations with JavaScript is very simple.
For example, we add a Reverse button to the HTML body as
we did in our video play back example:
<body>
<h1 class =“style_anim” id=“h1_hello”>Hello</h1>
<button onclick=“play_reverse()”>Reverse</button>
</body>

Interactive pages
A vast range of new elements is defined in HTML5, which
helps us to create in interactive forms, replacing Flash.
Some of the new input type form elements are
=>color
=>date
=>email
=>time
=>url
As a basic step towards web application developing, let us
create a small interactive page.
It simply plays a CSS3animation, but the user can enter some
parameters.

Just escape from Flash
In three parts , we have discussed ‘HTML5 media playback’,
‘CSS3 animations ’ and ‘interactive page designing’.
These are , of course , very basic but are a good introduction
to HTML5 and CSS3.
By running your own experiments and searching the web , you
will be able to master this sample but powerful and standard
technology

Replacing flash with HTML5 and CSS3

More Related Content

What's hot (20)

Similar to Replacing flash with HTML5 and CSS3 (20)

More from Saurabh Kheni (6)

Recently uploaded (20)

Replacing flash with HTML5 and CSS3