Html session 11 theory :
Introduction :
Traditionally, Web browsers were capable of handling only graphics and text. Suppose, if a user had to play some video, then, a distinct program, plug-in, or an ActiveX control had to be installed. Earlier, Web designers and Web developers used to set up Web pages to play audio and video on the Web using Adobe Flash player.
11.2 Multimedia in HTML5
Multimedia is a combination of various elements such as video, graphics, sound, and text. A common way of inserting a multimedia content on Web pages is by embedding a video or audio file in the Web page.
Consider the earlier situations where a Web site developer did not have the facility of including videos or audios directly on their Web site until and unless the browser had the required plug-in installed. These days, Web site developers want their visitors to not only download, but also, view movies online on their Web site. This is possible by adding the new features of HTML5 which can provide this facility.
HTML5 has made lives easier by introducing <audio> and <video> elements. In other words, HTML5 has provided the developers with the features to embed media on the Web pages in a standard manner. Thus, the user need not depend on Flash to access the audio and video files.
11.3 Supported Media Types in Audio and Video
There are various video and audio codecs which are used for handling of video and audio files. The codec is a device or a program used for encoding and decoding digital data stream. These different codecs have different level of compression quality.
For storing and transmitting coded video and audio together, a container format is used. There are a number of container formats which includes Ogg (.ogv), the Audio Video Interleave (.avi), Flash Video (.flv), and many others. WebM is a new open source video container format supported by Google. Different browsers support different container format.
Table 11.1 lists the common audio and video formats.
Container Video Codec Audio Codec
Mp4 H.264 AAC
Ogg Theora Vorbis
WebM VP8 Vorbis
Audio Formats
There are the three supported file formats for the <audio> element in HTML5. Table 11.2 lists the audio file formats supported by the Web browsers.
Browsers Support MP3 Wav Ogg
Opera 10.6 No Yes Yes
Apple Safari 5 Yes Yes No
Google Chrome 6 Yes Yes Yes
FireFox 4.0 No Yes Yes
Internet Explorer 9 Yes No No
Video Formats
There are the three supported file formats for the <video> element in HTML5. Table 11.3 lists the video file formats supported by the Web browsers.
Browsers Support MP4 WebM Ogg
Opera 10.6 No Yes Yes
Apple Safari 5 Yes No No
Google Chrome 6 Yes Yes Yes
FireFox 4.0 No Yes Yes
Internet Explorer 9 Yes No No
Audio Elements in HTML5
The <audio> element will help the developer to embed music on the Web site and allow the user to listen to music. The <audio> element is one of the best features in HTML5. This feature allows the user to enable a native audio file within the Web browser. The <audio> tag specifies the audio file to be used in the HTML document. The src attribute is used to link to the audio file.
Code Snippet 1 displays the embedding of an audio file in the Web page using the <audio> tag. The music is played in the background when the page is loaded on the browser.
Code Snippet :
<!DOCTYPE html>
<html>
<head>
<title>audio element</title>
</head>
<body>
<audio src=”d:\sourcecodes\audio.mp3”
controls autoplay loop>
html5 audio not supported
</audio>
</body>
</html>
The src attribute is mandatory, the <audio> tag includes several other options .
The users can also use the <source> tag to specify the media along with the media type and other attributes. An audio element can contain multiple source elements and the browser will identify the first supported format.
Audio Tag Attributes
HTML tags normally consist of more than one attribute. Attributes provide additional information to the browser about the tag. HTML5 has a number of attributes for controlling the look and feel of various functionalities. According to HTML5 specifications, the <audio> element has the following attributes. Table 11.4 lists the <audio> tag attributes.
Audio Attributes Description
autoplay This attribute identifies whether to start the audio or not once the object is loaded. The attribute accepts a boolean value which when specified will automatically start playing the audio as soon as possible without stopping
autobuffer This attribute starts the buffering automatically
controls This attribute identifies the audio playback controls that should be displayed such as resume, pause, play, and volume buttons
loop This attribute identifies whether to replay the audio once it has stopped
preload This attribute identifies whether the audio has to be loaded when the page loads and is ready to execute. This preload attribute is ignored if autoplay exists
src This attribute specifies the location or the URL of the audio file that has to be embedded
Creating Audio Files
Suppose, if the user plays the audio in older browsers then the <embed> tag will be used. The <embed> tag has two attributes, src and autostart. The src attribute is used to specify the source of the audio and the autostart attribute controls the audio and determines whether the audio should play as soon as the page loads.
Code Snippet 2:
<!DOCTYPE HTML>
<html>
<body>
<audio autoplay loop>
<source src=”sampaudio.mp3”>
<source src=”sampaudio.ogg”>
<embed src=”sampaudio.mp3”>
</audio>
</body>
</html>
The <audio> element in HTML5 supports multiple formats. The content included within the <embed> tag is automatically played by default. Suppose, if the user does not want to play the audio file automatically then he/she can set the value of the autostart attribute to ”false”.
Code Snippet 3 demonstrates the use of the autostart attribute.
Code Snippet :
<embed src=”mpaudio.mp3” autostart=”false” >
The <embed> tag also supports another attribute named loop. The loop attribute determines whether the audio clip will be replayed continuously or not. If the value of the loop attribute is set to true or infinite then the music will be played continuously. If the loop attribute is not specified then it is same as setting the value to false.
Code Snippet :
<!DOCTYPE HTML>
<html>
<body>
<audio controls autoplay>
<source src=”/html5/sampaudio.ogg” type=”audio/ogg” />
<source src=”/html5/sampaudio.wav” type=”audio/wav” />
Your browser does not support the <audio> element.
</audio>
</body>
</html>
This code snippet shows the ogg and wav formats supported by the <audio> tag. While adding the <audio> element in the code, the user can specify error messages to check if the browser is supporting the <audio> tag or not.
ReplyDeleteNice blog Very useful information is providing by ur blog. Great beginning html tutorials Very clear and helpful for beginners.