Replacing flash with HTML5 and CSS3
15
-
Upload
saurabh-kheni -
Category
Devices & Hardware
-
view
204 -
download
2
Transcript of Replacing flash with HTML5 and CSS3
Why Should Flash be Replaced?
• 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.
Media Playback Using HTML5
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>
Animation using CSS3
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
=>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
