This lab provides a general idea of different technologies for adding graphics and sound to web pages.
Following material about HTML5 is taken from W3School.com:
HTML5 improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements, and how to recover from errors.Some of the new features in HTML5 are functions for embedding audio, video, graphics, client-side data storage, and interactive documents.
Actually, HTML 5 includes lots of new elements for better structure, drawing, media content, and better form handling. Particular, following table provides a few new media content:
| Tag | Description |
|---|---|
| <audio> | For multimedia content, sounds, music or other audio streams |
| <video> | For video content, such as a movie clip or other video streams |
| <source> | For media resources for media elements, defined inside video or audio elements |
| <embed> | For embedded content, such as a plug-in |
| <track> | For text tracks used in mediaplayers |
For drawing graphics, HTML 5 uses the Canvas Element as well as JavaScript.
| Tag | Description |
|---|---|
| <canvas> | For making graphics with a script |
"Until now, there has never been a standard for showing a video or movie on a web page. Today, most videos are shown through a plugin (like flash). However, different browsers may have different plugins. HTML5 defines a new element which specifies a standard way to include video: the <video> element
Following is an example taken from W3School.com:
<video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> Your browser does not support the video tag. </video>
controls="controls": adds video controls, like play, pause and volume.width, height: set and reserve appropriate space to your video.<source> tag in between <video> tags. The brower uses the first recognized format.<source> tags are allowed. "Today, Firefox, Opera, and Chrome support Ogg files. Internet Explorer, Chrome, and Safari support MPEG4 files. To cover all the major browsers, use two <source> elements: One pointing to an MPEG4 file, and one pointing to an Ogg file."Until now, there has never been a standard for playing audio on a web page. Today, most audio are played through a plugin (like flash). However, not all browsers have the same plugins. HTML5 specifies a standard way to include audio, with the audio element. The audio element can play sound files, or an audio stream."
To play an audio file in HTML5, you need HTML 5 <audio> tag. See the following example:
<audio controls="controls"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> Your browser does not support the audio element. </audio>
controls="controls": adds audio controls.<audio> enables cross browser
(platform) supporting. Some browsers, like Firefox and Opera, support "Ogg Vorbis" (e.g., song.ogg);
while others, like IE9, Google Chrome and Safari, support "mp3" (e.g., song.mp3)"The HTML5 canvas element, <canvas>, uses JavaScript to draw graphics on a web page. A canvas is a rectangular area, and you control every pixel of it. The canvas element has several methods for drawing paths, boxes, circles, characters, and adding images."
To create a <canvas> element, you should put <canvas> tag in between HTML 5 body tag, and specify its id, width and height.
The text content is supporting information.
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas>
After that, you should write some JavaScript code for drawing. The canvas element itself has no drawing abilities.
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
You may check the result of the exmaple from this link. For more detials about canvas element, please check the W3School.com.
10 Awesome HTML5 Canvas Examples