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 .
No comments:
Post a Comment