advertisement
The Need for Multimedia in HTML5 - Audio and Video Elements
❌
Traditionally, Web browsers were capable of handling only graphics and text. Suppose a user had to play some video. Then, a distinct program, plug-in, or 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.
Multimedia in HTML5
Multimedia is a combination of various elements such as video, graphics, sound, and text. A common way of inserting multimedia content on Web pages is by embedding a video or audio file on the Web page.Consider the earlier situations where a Website developer did not have the facility of including videos or audio directly on their Website until and unless the browser had the required plug-in installed. These days, Website developers want their visitors to download and view movies online on their Website. This is possible by adding the new features of HTML5 which can provide this facility.
HTML5 has made life easier by introducing <audio> and <video> elements. In other words, HTML5 has provided developers with the features to embed media on Web pages in a standard manner. Thus, the user need not depend on Flash to access the audio and video files.
Supported Media Types in Audio and Video
Various video and audio codecs are used for handling video and audio files. The codec is a device or program for encoding and decoding digital data streams. These different codecs have different levels of compression quality.A container format is used to store and transmit coded video and audio together. There are several container formats which include Ogg (.ogv), 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 formats.
Lists the common audio and video formats.
❌1. Audio formats:
These are three supported file formats for the <audio> element in HTML5.Lists the audio file formats supported by web browsers.
❌2. Video formats:
There are three supported file formats for the <video> element in HTML5.Lists the video file formats supported by web browsers.
❌Audio Elements in HTML5
The <audio> element will help the developer embed music on the Website and allow the user to listen to music. The <audio> element is one of the best features of 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.The embedding of an audio file on a Web page using the <audio> tag. The music is played in the background when the page is loaded in the browser.
The src attributes are mandatory, the <audio> tag includes several other options.
The existing HTML5 specification does not specify the formats supported by the browser in the <audio> tag. The audio formats frequently used are wav, ogg, and mp3.
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.
1. Audio Tag Attributes:
HTML tags normally consist of more than one attribute. Attributes provide additional information to the browser about the tag. HTML5 has several attributes for controlling the look and feel of various functionalities. According to HTML5 specifications, the <audio> element has the following attributes.Lists the <audio> tag attributes.
- 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.
- Auto buffer: This attribute starts 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 URL of the audio file that has to be embedded.
2. Creating Audio Files:
Suppose the user plays the audio in older browsers, 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.The use of <embed> tag in the <audio> element.
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".
The use of the autostart attribute.
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 100p attribute is set to true or infinite, then the music will be played continuously. If the loop attribute is not specified, then it is the same as setting the value to false.
The use of some of the audio formats is supported by HTML5.
This code snippet shows the Ogg and WAV formats supported by the <audio> tag. While adding the <audio> element to the code, the user can specify error messages to check if the browser is supporting the <audio> tag or not.
Video Elements in HTML5
The <video> element is a new feature added to HTML5. The user can use the <video> element for embedding video content on a Web page. The easiest way to specify the video is by using the SRC attribute which gives 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 in the browser.The use of the <video> element.
In this 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 to the code, the user can specify messages between the <video> and <video> tags to check if the browser is supporting the <video> tag or not.
1. Video Tag Attributes:
The HTML5 specification provides a list of attributes that can be used with the <video> element.Lists the <video> tag attributes.
- Autoplay: Specifies that the browser will start playing the video as soon as it is ready
- Mute: Allows you to mute the video initially, if this attribute exists
- 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
Note - The muted attribute is not supported in Safari and Internet Explorer.
2. 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 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 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.The use of none and metadata values for the preload attribute.
In this code, the preload attribute specifies none and metadata values.
3. Setting the Video Size:
The user can specify the size of the video with the height and width attributes 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.
How to apply the height and width attributes to the <video> element.
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.
4. Converting Video Files:
The <video> element used in HTML5 is a great feature, but how will the user get the video files in the correct format? There are many problems with browser vendors for supporting various video formats on the Websites. Following are some of the video formats supported by 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 Handbrake. Handbrake is open-source,
GPL-licensed application and is accessible using Mac OS X, Windows, and Linux. Handbrake has two versions, command-line and graphical versions.
This format was available for free until 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 the HTML5 <video> element that works in the cross-browser.Accessibility of the Audio and Video Elements
Enterprises across the world employ 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 from various sources. If the application considers the requirements of the target audience, then it will be appreciated and used by several users.
Various types of users will view the application containing 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 a laptop, mobile, tablet, or desktop
- Users can listen to the audio 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 the vast majority of users accessing the application. However, not all users will fall into this category. Therefore, another set of assumptions is to be considered for these users and they are as follows:
- Users who have hearing and visual impairments and thus cannot listen to the audio or view the video
- Users who are not familiar with the language in which the content is delivered
- Users who use keyboards and screen readers to access content on the 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.
Web Video Text Tracks (WebVTT) is a file format used to mark up external text tracks. This trio 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 for those users who cannot see it.
1. Tracking 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 the 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+ onwards.
Lists the track element attributes.
- 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 specify a value
- Label: Specifies the title to be displayed for the user
How a track element is used in combination with <video> element for providing subtitles.
This code specifies the src, label, and srclang attributes of the track element. Here, the srclang is set to en which is the English language.
The track element is used in combination with <video> element to provide subtitles in another language.
This code specifies the src, label, and srclang attributes of the track element. Here, the srclang is set to de which represents the French language.
2. Accessibility for the Audio and Video Element:
There are some accessibility supports for <audio> and <video> elements. These are as follows:Audio support
Following are accessibility support for <audio> elements:- Firefox - This browser exposes controls with accessibility APIs. However, individual controls do not interact with the keyboard. Access to the keyboard is provided by Firefox-specific shortcuts.
- Opera - This browser has only keyboard support.
- IE 9 - This browser exposes controls with accessibility APIs, however, individual controls do not interact with the keyboard.
Video support
Following are 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 the keyboard.
Non-supporting Browsers
Many browsers do not support HTML5 elements. Browsers such as Firefox, Chrome, Opera, and Safari support the <audio> and the <video> elements. Google Chrome 17 and lower versions have no support for <audio> elements. Similarly, the Safari browser does not support <audio> elements in HTML5. Internet Explorer 8 and earlier versions do not support the <audio> and the <video> element.advertisement
Zia, founder and CEO of Texvn and Toolx, is a passionate entrepreneur and tech enthusiast. With a strong focus on empowering developers, he creates innovative tools and content, making coding and idea generation easier.
More From:
Zia
Comments, Escape Sequence, and Built-in...
A Web page designer might code complex scripts to fulfill a specific ...
Asynchronous Programming with Future Keyword
The future keyword is used for getting a value sometime in the ...
The finally Statement in C#
In general, if any of the statements in the try block raises ...
What is Lean Software Development...
LSD is a movement dedicated to reducing errors and wasted time and ...
Conversation
Your input fuels progress! Share your tips or experiences on prioritizing mental wellness at work. Let's inspire change together!
Join the discussion and share your insights now!
Comments 1
NY-TECH
2 weeks ago
Excellent information!