HTML5 (Introduction, video, audio, canvas)

HTML5 (Introduction, video, audio, canvas)

The HTML5 goal is to replace the 1999 set of HTML 4.01 and XHTML 1.0 standards, in order to enable the rapid development of Internet applications, the network standards to meet the needs of contemporary network. HTML5 will be the new standard for html\xhtml\html DOM.

When it comes to generalized theory and HTML5, it actually refers to a set of technical combinations including HTML, CSS, and JavaScript. It wants to reduce web browsers ' rich Web application services (plug-in-based Rich Internet application,ria) that require plugins, such as: Adobeflash, Microsoft The needs of Silverlight and Oracle JavaFX, and provide more standard sets to effectively enhance network applications.

Specifically, HTML5 adds a number of new syntactic features, including <canvas> elements for painting, < video > and <audio > elements for media playback, These elements are added to make it easier to add and manipulate multimedia and picture content in a Web page. Other new elements such as <section>, <article>, <nav>,

HTML5 provides the standard for displaying video. There are three video formats supported by the current video element: Ogg, MPEG4, WebM.

To add a video in HTML5:

<video width= "height=" controls= "Controls" >

<source src= "Movie.ogg" type= "Video/ogg" >

<source src= "Movie.mp4" type= "Video/mp4" >

Your Browser does not support the video tag.

</video>

<video> Properties Tab:

AutoPlay: Automatically play the video.

CONTROLS: Displays the control to the user, such as the play, Pause, and volume buttons.

Height: Sets the height of the player.

Width: Sets the width of the player.

Loop: Loops the playback.

Preload: Video pre-loading.

src: The video URL to play.

<video> methods, properties and events

Play () Currentsrc play

Pause () CurrentTime Pause

Load () videowidth progress

Canplaytype videoheight Error

Duration Timeupdate

Ended ended

Error abort

Paused empty

Muted emptied

Seeking Waiting

Volume Loadedmetadata

Height

Width

The content inserted between <video> and </video> is displayed for browsers that do not support video elements.

The HTML5 provides the standard for playing audio. Currently, the audio element supports three formats: Ogg Vorbis, MP3, Wav.

To play audio in HTML5:

<audio controls= "Controls" >

<source src= "Song.ogg" type= "Audio/ogg" >

<source src= "Song.mp3" type= "Audio/mpeg" >

Your Browser does not support the audio tag.

</audio>

The <audio> Properties tab is the same as <video>.

The canvas element is used to draw graphics on a Web page.

To add a canvas element to a HTML5 page:

Specify the ID, width, and height of the element:

<canvas id= "MyCanvas" width= "height=" ></canvas>

The canvas element itself is not capable of drawing. All the drawing work must be done inside JavaScript:

<script type= "Text/javascript" >

var C=document.getelementbyid ("MyCanvas");

var Cxt=c.getcontext ("2d");

Cxt.fillstyle= "#FF0000";

Cxt.fillrect (0,0,150,75);

</script>

JavaScript uses the ID to find the canvas element:

var C=document.getelementbyid ("MyCanvas");

Then, create the context object:

var Cxt=c.getcontext ("2d");

GetContext ("2d") objects are built-in HTML5 objects that have a variety of drawing paths, rectangles, circles, characters, and methods for adding images.

The following two lines of code draw a red rectangle:

Cxt.fillstyle= "#FF0000";

Cxt.fillrect (0,0,150,75);

The FillStyle method dyes it red, and the FillRect method specifies the shape, position, and size.

Parameter (0,0,150,75). From the upper-left corner (0,0), draw the 150x75 rectangle on the canvas.

HTML5 (Introduction, video, audio, canvas)