Ashish Chauhan Project Management, Microsoft Technologies, Mobile Web Application, Android App : HTML5

Showing posts with label HTML5. Show all posts

Saturday, August 4, 2012

HTML5 - Canvas - Tutorial 4 (Gradient)

Tutorial 4 - Canvas Element

Tutorial will teach you to give gradient effect to object.

Click here to download the source code and document which will explain the usage of each methods and their parameters.

Friday, August 3, 2012

HTML5 - Canvas Tutorial - 3

Tutorial will teach you to play with shadow of drawing object in HTML5.

Click here to download source code of tutorials.

Thursday, August 2, 2012

HTML5 - Canvas - Tutorial - 1

Tutorial for moveTo, lineTo, stroke, fillStyle, beginPath, endPath, fill and arc methods of Canvas element. Click here to download source code.

Using canvas element, i have developed small application which will offer the color. user can set Red, Green and Blue colors using slider elements and based on that, new color will be formed. I have introduced Opacity attribute that will add transparency to selected color.

Click on source code, to get source of the sample. Here, you can learn about getContext, clearRect, fillStyle, fillRect and fillText methods of Canvas elements.

Saturday, June 9, 2012

HTML5 | Audio tag

HTML5 <audio> tag:

<audio> element is used to play audio file in web page. Audio element contains multiple source elements with different audio format files. Browser will use the first which is recognized by browser.

Below are properties of Audio tag:

Attribute	Value	Description
autoplay	autoplay	Specifies that the audio will start playing as soon as it is ready
controls	controls	Specifies that audio controls should be displayed (such as a play/pause button etc).
loop	loop	Specifies that the audio will start again, every time it is finished
preload	auto metadata none	Specifies if and how the user thinks the audio should be loaded when the page loads
src	URL	Specifies the URL of the audio file

Example:

<!DOCTYPE HTML>

<head>

</head>

<body>

Your browser does not support the audio element.

</audio>

</br>

</body>

</html>

HTML5 | Video Tag

HTML5 <Video> tag:

Below are methods, properties and events of Video tag. all are explained in details. which will help you to understand the video tag easily as well as you can develop your own video component.

Methods:

Method Name	Purpose
play()	Will play the video
pause()	Will pause the video
load()	Load video file
canPlayType

Properties:

Property Name	Purpose
currentSrc	Will give the path of video file.
currentTime	Will give time of current video
videoWidth	Will give actual width of video
videoHeight	Will give actual height of video
duration	Will give time duration of whole video
ended	Will give false while video is in running mode and when ends then will give true
Error	During video playing, error property holds the error value while error occurs.
Paused	Will return true while video is in pause mode
Muted	Will return true while video’s audio is at mute mode
seeking
Volume	Returns volumn level. If it returns 0 then lowest volumn and 1 returns highest volumn
Height	Height of video tag
Width	Width of video

Events:

Play
Pause
Progress
Error
timeUpdate
ended
abort

Example:

<!DOCTYPE HTML>
<HTML lang="en">
<head>

</head>
<body>

<video id="video1" width="700" height="500" controls="controls">
<source src="a63bd27e3520.mp4" type="video/mp4"/>
Browser does not support video format.
</video>
</br>
</body>
</html>

In video tag, we need to provide the all supported source video file and the text which will be displayed while video tag is not supported by browser.

Basics of HTML5

HTML5 is a next generation of HTML.

HTML5 will be new standard for HTML.

Most of browsers are supporting HTML5 and its API

HTML5 having below features

New elements
New attributes
Full CSS3 support
Audio and Video support
2D/3D graphics
Local storage
Local DB storage
Geo-location
Web application
SSE
App Cache

HTML5 is cooperation between W3C and WHATWG. WHATWG is working on forms and application and W3C is working on XHTML 2.0. They decided to cooperate and create new version of HTML.

Rules for HTML5:

New features should be based HTML, CSS, Javascript and DOM
Reduce third party plugins
Better Error handling
HTML markup replacing scripting
HTML5 should be device independent

In HTML 5, there is simple doctype:

<!doctype HTML>

Simple structure:

<!doctype HTML>

<head>

<title>Title of the application</title>

</head>

<body>

Content of the document

</body>

</HTML>

Major browser (Firefox, Chrome, Safari, Opera and IE) support HTML5.