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.
Showing posts with label html session 11. Show all posts
Showing posts with label html session 11. Show all posts
Monday, 11 May 2015
Sunday, 10 May 2015
Html session 11
Html Session 11 Theory :
Video Elements in HTML5
The <video> element is a new feature added in HTML5. The user can use the <video> element for embedding the video content on the Web page. The easiest way to specify the video is by using the src attribute which give the URL of the video file to be used. Suppose, if the browser does not support the <video> element then the content between the start tag and end tag is displayed on the browser.
Code Snippet :
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<video src=”D:\Source codes\movie.mp4”>
Your browser does not support the video.
</video>
</body>
</html>
In the code, the src attribute is used for specifying the location of the mp4 video file format used by the <video> tag. While adding the <video> element in the code, the user can specify messages between the <video> and </video> tag to check if the browser is supporting the <video> tag or not.
displays the <video> element.
Video Tag Attributes
The HTML5 specification provides a list of attributes that can be used with the <video> element. Table 11.5 lists the <video> tag attributes.
Video Attributes Description
autoplay Specifies that the browser will start playing the video as soon as it is ready
muted Allows to mute the video initially, if this attribute is existing
controls Allows displaying the controls of the video, if the attribute exists
loop Specifies that the browser should repeat playing the existing video once more if the loop attribute exists and accepts a boolean value
preload Specifies whether the video should be loaded or not when the page is loaded
src Specifies the location of the video file to be embedded
Preloading the Video
The <video> element comprises a preload attribute that allows the browser to download or buffer the video while the Web page containing the video is being downloaded. If the video is preloaded, then it decreases the initial delay once the user has started the playback. The preload attribute has the following values:
None
This attribute allows the browser to load only the page. The video will not be downloaded while the page is being loaded.
Metadata
This attribute allows the browser to load the metadata when the page is being loaded.
Auto
This is the default behavior as it allows the browser to download the video when the page is loaded. The browser can avoid the request.
Code Snippet :
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<video width=”160” height=”140” src=”D:\Source Codes\movie. mp4”
controls preload=”none” muted>
Your browser does not support the video.
</video>
<video width=”160” height=”140” src=”D:\ Source Codes\movie. mp4”
controls preload=”metadata” muted>
Your browser does not support the video.
</video>
</body>
</html>
Setting the Video Size
The user can specify the size of the video with the height and width attribute of the <video> element. Suppose, if these attributes are not provided then the browser sets the video with the key dimensions of the video. This will result in changing the page layout as the Web page is adjusted to accommodate the video.
<!DOCTYPE HTML>
<html>
<head>
</head>
<title> Video Size</title>
<style>
video{
background-color: black;
border: medium double black;
}
</style>
<body>
<video src=”D:\Source Codes\movie.mp4”
controls preload=”auto” width=”360” height=”340”>
Your browser does not support the video.
</video>
</body>
</html>
In the code, the style attribute is used to specify the background-color and border style of the video. The code also specifies the preload, height, and width attributes for the <video> element.
Converting the Video Files
The <video> element used in HTML5 is a great feature but how will the user get the video files in a correct format. There are many problems with browser vendors for supporting the various video formats on the Web sites. The following are some of the video formats supported by the significant browsers:
Ogg/Theora
This is an open source, royalty-free, and patent-free format available. This format is supported by browsers such as Opera, Chrome, and Firefox.
WebM
This is a royalty-free and patent-free format supported by Google. This format is supported by browsers such as Opera, Chrome, and Firefox. Free WebM Encoder 1.2 is a simple utility that allows you to convert video files to the WebM format.
H.264/MP4
H.264 or MP4 formats are supported on iPhone and Google Android devices.
There is a simple way to encode H.264 is by using the Handbrake. Handbrake is an open-source, GPL-license application and is accessible by using Mac OS X, Windows, and Linux. Handbrake has two versions, command-line and graphical versions.
This format is available for free till 2015. This format is supported by browsers such as Internet Explorer, Chrome, and Safari.
Micro Video Controller
This converter creates all files that the user requires for HTML5 <video> element that works on the cross browser.
11.6 Accessibility of Audio and Video Elements
Enterprises across the world are employing people with varied skills and abilities. They may even include people with limited abilities or disabilities such as people with visual, cognitive, or mobility impairments. Accessibility is the level of ease with which computers can be used and be available to a wide range of users, including people with disabilities.
Applications can be accessed through various sources. If the application considers the requirements of the target audience, then it will be appreciated and used by number of users.
There are various types of users who will view the application containing the media content. Therefore, while developing an application a lot of assumptions are to be considered and some of them are as follows:
Users can check the content on laptop, mobile, tablet, or desktop
Users can listen to the audio by using headphones or speakers
Users can understand the language in which the media was delivered
Users can successfully play and download the media
These assumptions meet the requirements of a vast majority of users accessing the application. However, not all users will fall in this category. Therefore, another set of assumptions are to be considered for these users and they are as follows:
Users who have hearing and visual impairment and thus, cannot listen to the audio or view the video
Users who are not familiar with the language that the content is delivered
Users who use keyboards and screen readers to access the content on Web
Users who cannot view or hear the media content because of their working environment or due to device restrictions
HTML5 provides powerful features to make applications accessible to such users.
WebVTT (Web Video text Tracks) is a file format used to mark up the external text tracks. This format allows the user to give a textual description of the content in the video. This description is then used by different accessibility devices to define the content to those users who cannot see it.
11.6.1 The Track Element
The track element provides an easy, standard way to add captions, subtitles, chapters, and screen reader descriptions to the <audio> and <video> elements.
Track elements are also used for other types of timed metadata. The source data for this track element is in a form of a text file that is made up of a list of timed cues. A cue is a pointer at an accurate time point in the length of a video. These cues contain data in formats such as Comma-Separated Values (CSV) or JavaScript Object Notation (JSON).
The track element is not supported in many major browsers. This track element is now available in IE 10 and Chrome 18+.
Container Description
src Contains the URL of the text track data
srclang Contains the language of the text track data
kind Contains the type of content the track definition is used for
default Indicates that this will be the default track if the user does not specifies the value
label Specifies the title to be displayed for the user
<video controls>
<source src=”myvideo.mp4” type=”video/mp4”>
<source src=”myvideo.webm” type=”video/webm”>
<track src=”eng.vtt”
label=”English p subtitles” kind=”subtitles”
srclang=”en” >
</video>
This code specifies the src, label, and srclang attributes in the track element. Here, the srclang is set to en that is English language.
Code Snippet 9 demonstrates a track element used in combination with <video> element providing subtitles in another language
<video controls>
<source src=”myvideo.mp4” type=”video/mp4”>
<source src=”myvideo.webm” type=”video/webm”>
<track src=”de.vtt” srclang=”de” label=”German p subtitles”
kind=”subtitles”>
</video>
This code specifies the src, label, and srclang attributes in the track element. Here, the srclang is set to de which represents French language.
Accessibility for Audio and Video Element
There are some accessibility supports for <audio> and <video> elements. These are as follows:
Audio Support
The following are the accessibility support for <audio> elements:
Firefox - This browser exposes controls with accessibility APIs, however individual controls do not interact with keyboard. The access to keyboard is provided by the Firefox specific shortcuts.
Opera - This browser has only keyboard support.
IE 9 - This browser expose controls with accessibility APIs, however individual controls do not interact with keyboard.
Video Support
The following are the accessibility support for <video> elements:
Firefox - This browser cannot interact with individual controls.
Opera - This browser has only keyboard support.
IE 9 - This browser does not allow individual controls to interact with keyboard
Non-Supporting Browsers
There are many browsers that do not support HTML5 elements. Browsers such as Firefox, IE9, Chrome, Opera, and Safari support the <audio> and the <video> elements. Google chrome 17 and lower version has no support for <audio> elements. Similarly, Safari browser does not support <audio> element in HTML5. Internet Explorer 8 and earlier versions do not support the <audio> and the <video> elements .
Video Elements in HTML5
The <video> element is a new feature added in HTML5. The user can use the <video> element for embedding the video content on the Web page. The easiest way to specify the video is by using the src attribute which give the URL of the video file to be used. Suppose, if the browser does not support the <video> element then the content between the start tag and end tag is displayed on the browser.
Code Snippet :
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<video src=”D:\Source codes\movie.mp4”>
Your browser does not support the video.
</video>
</body>
</html>
In the code, the src attribute is used for specifying the location of the mp4 video file format used by the <video> tag. While adding the <video> element in the code, the user can specify messages between the <video> and </video> tag to check if the browser is supporting the <video> tag or not.
displays the <video> element.
Video Tag Attributes
The HTML5 specification provides a list of attributes that can be used with the <video> element. Table 11.5 lists the <video> tag attributes.
Video Attributes Description
autoplay Specifies that the browser will start playing the video as soon as it is ready
muted Allows to mute the video initially, if this attribute is existing
controls Allows displaying the controls of the video, if the attribute exists
loop Specifies that the browser should repeat playing the existing video once more if the loop attribute exists and accepts a boolean value
preload Specifies whether the video should be loaded or not when the page is loaded
src Specifies the location of the video file to be embedded
Preloading the Video
The <video> element comprises a preload attribute that allows the browser to download or buffer the video while the Web page containing the video is being downloaded. If the video is preloaded, then it decreases the initial delay once the user has started the playback. The preload attribute has the following values:
None
This attribute allows the browser to load only the page. The video will not be downloaded while the page is being loaded.
Metadata
This attribute allows the browser to load the metadata when the page is being loaded.
Auto
This is the default behavior as it allows the browser to download the video when the page is loaded. The browser can avoid the request.
Code Snippet :
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<video width=”160” height=”140” src=”D:\Source Codes\movie. mp4”
controls preload=”none” muted>
Your browser does not support the video.
</video>
<video width=”160” height=”140” src=”D:\ Source Codes\movie. mp4”
controls preload=”metadata” muted>
Your browser does not support the video.
</video>
</body>
</html>
Setting the Video Size
The user can specify the size of the video with the height and width attribute of the <video> element. Suppose, if these attributes are not provided then the browser sets the video with the key dimensions of the video. This will result in changing the page layout as the Web page is adjusted to accommodate the video.
<!DOCTYPE HTML>
<html>
<head>
</head>
<title> Video Size</title>
<style>
video{
background-color: black;
border: medium double black;
}
</style>
<body>
<video src=”D:\Source Codes\movie.mp4”
controls preload=”auto” width=”360” height=”340”>
Your browser does not support the video.
</video>
</body>
</html>
In the code, the style attribute is used to specify the background-color and border style of the video. The code also specifies the preload, height, and width attributes for the <video> element.
Converting the Video Files
The <video> element used in HTML5 is a great feature but how will the user get the video files in a correct format. There are many problems with browser vendors for supporting the various video formats on the Web sites. The following are some of the video formats supported by the significant browsers:
Ogg/Theora
This is an open source, royalty-free, and patent-free format available. This format is supported by browsers such as Opera, Chrome, and Firefox.
WebM
This is a royalty-free and patent-free format supported by Google. This format is supported by browsers such as Opera, Chrome, and Firefox. Free WebM Encoder 1.2 is a simple utility that allows you to convert video files to the WebM format.
H.264/MP4
H.264 or MP4 formats are supported on iPhone and Google Android devices.
There is a simple way to encode H.264 is by using the Handbrake. Handbrake is an open-source, GPL-license application and is accessible by using Mac OS X, Windows, and Linux. Handbrake has two versions, command-line and graphical versions.
This format is available for free till 2015. This format is supported by browsers such as Internet Explorer, Chrome, and Safari.
Micro Video Controller
This converter creates all files that the user requires for HTML5 <video> element that works on the cross browser.
11.6 Accessibility of Audio and Video Elements
Enterprises across the world are employing people with varied skills and abilities. They may even include people with limited abilities or disabilities such as people with visual, cognitive, or mobility impairments. Accessibility is the level of ease with which computers can be used and be available to a wide range of users, including people with disabilities.
Applications can be accessed through various sources. If the application considers the requirements of the target audience, then it will be appreciated and used by number of users.
There are various types of users who will view the application containing the media content. Therefore, while developing an application a lot of assumptions are to be considered and some of them are as follows:
Users can check the content on laptop, mobile, tablet, or desktop
Users can listen to the audio by using headphones or speakers
Users can understand the language in which the media was delivered
Users can successfully play and download the media
These assumptions meet the requirements of a vast majority of users accessing the application. However, not all users will fall in this category. Therefore, another set of assumptions are to be considered for these users and they are as follows:
Users who have hearing and visual impairment and thus, cannot listen to the audio or view the video
Users who are not familiar with the language that the content is delivered
Users who use keyboards and screen readers to access the content on Web
Users who cannot view or hear the media content because of their working environment or due to device restrictions
HTML5 provides powerful features to make applications accessible to such users.
WebVTT (Web Video text Tracks) is a file format used to mark up the external text tracks. This format allows the user to give a textual description of the content in the video. This description is then used by different accessibility devices to define the content to those users who cannot see it.
11.6.1 The Track Element
The track element provides an easy, standard way to add captions, subtitles, chapters, and screen reader descriptions to the <audio> and <video> elements.
Track elements are also used for other types of timed metadata. The source data for this track element is in a form of a text file that is made up of a list of timed cues. A cue is a pointer at an accurate time point in the length of a video. These cues contain data in formats such as Comma-Separated Values (CSV) or JavaScript Object Notation (JSON).
The track element is not supported in many major browsers. This track element is now available in IE 10 and Chrome 18+.
Container Description
src Contains the URL of the text track data
srclang Contains the language of the text track data
kind Contains the type of content the track definition is used for
default Indicates that this will be the default track if the user does not specifies the value
label Specifies the title to be displayed for the user
<video controls>
<source src=”myvideo.mp4” type=”video/mp4”>
<source src=”myvideo.webm” type=”video/webm”>
<track src=”eng.vtt”
label=”English p subtitles” kind=”subtitles”
srclang=”en” >
</video>
This code specifies the src, label, and srclang attributes in the track element. Here, the srclang is set to en that is English language.
Code Snippet 9 demonstrates a track element used in combination with <video> element providing subtitles in another language
<video controls>
<source src=”myvideo.mp4” type=”video/mp4”>
<source src=”myvideo.webm” type=”video/webm”>
<track src=”de.vtt” srclang=”de” label=”German p subtitles”
kind=”subtitles”>
</video>
This code specifies the src, label, and srclang attributes in the track element. Here, the srclang is set to de which represents French language.
Accessibility for Audio and Video Element
There are some accessibility supports for <audio> and <video> elements. These are as follows:
Audio Support
The following are the accessibility support for <audio> elements:
Firefox - This browser exposes controls with accessibility APIs, however individual controls do not interact with keyboard. The access to keyboard is provided by the Firefox specific shortcuts.
Opera - This browser has only keyboard support.
IE 9 - This browser expose controls with accessibility APIs, however individual controls do not interact with keyboard.
Video Support
The following are the accessibility support for <video> elements:
Firefox - This browser cannot interact with individual controls.
Opera - This browser has only keyboard support.
IE 9 - This browser does not allow individual controls to interact with keyboard
Non-Supporting Browsers
There are many browsers that do not support HTML5 elements. Browsers such as Firefox, IE9, Chrome, Opera, and Safari support the <audio> and the <video> elements. Google chrome 17 and lower version has no support for <audio> elements. Similarly, Safari browser does not support <audio> element in HTML5. Internet Explorer 8 and earlier versions do not support the <audio> and the <video> elements .
Subscribe to:
Posts (Atom)