HTML5: New version of HTML with Multimedia support

Rating: star-active1star-active2star-active3star-active4star-active5

With the old edition of HTML the access, control and manipulation of images was only possible. But, with the coming of HTML5, the video, canvas and audio, control and access on web came have also become possible. Now you need not to add additional plugins to your site as HTML5 provides the total solution for the visual content on the website. The top high quality HTML5 multimedia elements are listed below:


CCGallery – HTML5 Multimedia Gallery
CCSlider – jQuery 3d Slideshow Plugin
Drop n’ Save – Drag & Drop Uploader
HTML5 Preload Animations
HTML5 Pop Up Contact Form With AJAX
Uploadrr – HTML5 File Uploader

Themeable Form Builder
GalleryGen – Image Gallery HTML Code Generator
HTML5 AJAX Multi uploader
HTML 5 AJAX Contact Form
HTML5 Ajax Contact Form With Google Maps

Features of HTML5

Video: With the coming of HTML5, the uploading and manipulation of video has become much easier. Now, you are no more dependent on the codes, which are generated by third party plugins for embedding the video. Below mentioned is the code of HTML5 to shows a video element with three different codes:

<video width=”320px” height=”240px” autobuffer=”autobuffer” autoplay=”autoplay”>
<source src=’video.mpg’ type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2″‘>
<source src=’video.mp4’ type=’video/mp4; codecs=”amp4v.20.8, mp4a.40.2″‘>
<source src=’video.ogv’ type=’video/ogg; codecs=”theora, vorbis”‘>
</video>

Canvas: HTML5 provide you the space for drawing. Now you can easily upload photos, draw graphics and do animation on the website with the appropriate coding. The canvas has element of height and width helping the developer in drawing and doing changes on the website.

Media Playback Control: You can control the new element of embedded media into your HTML document with the use of JavaScript. So, if you want to restart your playback, refer below mentioned code:
viewplainprint?
var v = document.getElementsByTagName(“video”)[0];
v.play();

The first line in the code, i.e., ‘var v = document.getElementsByTagName(“video”)[0];’, bring back the first video and second code ‘v.play();’ call the element to replay.

Web Storage: Now with the use of localStorage (stores data with no time limit) and session Storage (stores data for one session), you can easily store the document in HTML5. And you can ask for the document to see, whenever required. Earlier this storage process was done by cookies, which were not good source for storing large file or document and also affect the performance and working speed of website. This program is being supported by JavaScript.
You can use below mentioned codes for storing.


Access to localStorage:
<script type=”text/javascript”>
localStorage.lastname=”Smith”;
document.write(localStorage.lastname);
</script>
Access to sessionStorage:
<script type=”text/javascript”>
sessionStorage.lastname=”Smith”;
document.write(sessionStorage.lastname);
</script>

Web Sockets: It provides bi-directional client server interaction and full duplex with one TCP connection. WebSockets runs on browser support and presently only Chrome support it. The purpose of this proposal is:
To increase web server
To simplifythe coding task

Web Worker: Web worker helps in preserving background scripts in web application. It helps the user in handling computationally tasks and fire up long running scripts. This all is done without blocking UI or other scripts. Dedicated worker and shared worker are the two type of web worker.To run web worker you have to save your code in separate file, as it runs on isolated tread. But before that, you have to create a new worker object in your page using following code:var worker = new Worker(‘task.js’);If this code is pasted in new tread (after complete download) then worker will start running on the site. This method is known as postMessage method: worker.postMessage(); // Start the worker

New semantic tags: Semantic tags in HTML5 make markup document more accessible and logical. The content of document is markup by semantic tags. So use semantic tags you will need to have improved version of <!DOCTYPE> element. The <!DOCTYPE>element work on every browser. The popular element used in semantic tags is mentioned below: <article>


<aside>,<figcaption>, <figure>, <footer>, <header>, <hgroup>, <mark>, <nav>
<section>

Enjoyed the post? Then you’ll surely love getting our regular blog updates, too. Subscribe now! Or want to flush your doubts in HTML5? Talk to our PSD to HTML5 experts now!

Avatar for Justin Spencer

About 

Justin Spencer is a technology enthusiast. He loves to read the latest blogs on technology and design. He has a keen interest in small business and web development. Connect with him -

Google +
Twitter
Linkedin

Category :
1

One thought on “HTML5: New version of HTML with Multimedia support

  1. Avatar for Justin Spencer
    Justin Spencer

    Thank you for sharing excellent information. Your website is very cool. I am impressed by the info that you have on this website. It reveals how nicely you perceive this subject.

    15th January 2012

Leave a Reply

Your email address will not be published. Required fields are marked *

Custom Button Close

Request a
free quote

  • Non-Disclosure Agreement
  • 100% Satisfaction
  • 100% Moneyback Guarantee
  • 180 Days Free Support
10% DISCOUNT
for all Returning Customers

Guaranteed Response with in 24 Hours

Please fill in the details below . All * fields are mandatory.

  • Name Error
    e.g: John Smith
    Phone Error
    e.g: +1 1234567890
  • Select Error
  • abcd
    Accepted file Formats: .PSD, .JPG, .JPEG, .GIF, .PNG, .AI, .ZIP, .RAR, .PDF
    if the size is greater than 20MB, specify the URL here
    Drop HereBrowse