HTML Media can be used to embed different multimedia on the HTML page of a website. It might contain information in the form of images, videos, audio, graphics, and others. Integrating each type of media requires adding a specific tag on the HTML document.
The introduction of HTML5 paced up the loading speed of web pages along with the media elements. In this article, let us explore some of the HTML media attributes that can be used to embed multimedia elements in the HTML document.
What is the HTML Media Attribute?
An HTML media attribute is used to embed a media element in the form of audio, video, graphics, or other forms of design. By using HTML media, you can specify the style of different elements in devices, screens, or sizes.
The media attribute allows properties such as area, source, link, style,e and more. The two main types of media elements in HTML are audio and video elements. In HTML5, the most popular media tags were introduced, such as <audio>, <video>, <embed>, <track>.
These tags were used to embed multimedia in web pages or HTML documents. With HTML media tags, you no longer require a plugin to embed media elements with a faster speed and control within the HTML media tag attribute.
<audio> Tag
A <audio> tag is an HTML media tag that is used to embed audio elements in the web page. It is used to embed playable audio files and supports multiple audio formats such as WAV, MP3, OGG, and more.
| <audio controls>
<source src=”audio.mp3″ type=”audio/mpeg”> <source src=”audio.ogg” type=”audio/ogg”> </audio> |
Here, the controls attribute is used to add play, pause, and volume control options in the audio tag. Also, a source element is used to allow multiple formats for better browser compatibility in the document.
| <audio src=”sample-audio.mp3″ controls autoplay loop muted preload=”auto”>
<source src=”audio.ogg” type=”audio/ogg”> </audio> |
Attributes of HTML audio Tag
- src: It is used to specify the audio file location or path in the audio tag.
- controls: It is used to add audio controls like play, pause, and volume controls in the tag.
- autoplay: It is used to start playing the audio automatically when the webpage loads.
- preload: It is used to define how the audio should be loaded when the page loads.
<video> Tag in HTML
The <video> tag is used to embed video content in the browser webpage. It supports various formats such as MP4, Ogg, WebM, etc. You can use various elements along with the video tag to control the flow of video elements on the webpage. This HTML5 element is used to embed videos in multiple video formats.
The <video> tag uses <source> tag to embed the video on the webpage. Check a simple example.
| <video width = “320” height =”100” controls>
<source src=”video.mp4” type=”video/mp4”></video>
|
The “video.mp4” is the path to the video tag embedded in the website. You can use the “control” element to control the video. Also, you can easily control the size of HTML video tags.
Attributes of HTML Video Tag
There are many attributes of HTML video tags that can be used along with the attribute HTML tag.
- autoplay: Video will automatically start to play once rendered on the webpage.
- Controls: It is used to provide controls in the video tags, such as stop, play, volume control, and more.
- height and width: You can control the height and width of your video canvas using this tag.
- loop: This attribute is used to repeat the video playback again and again in the loop.
- Muted: This attribute of the HTML video tag will play the video in muted mode.
- src: The src attribute is used to link the video file to the HTML video tag in the webpage.
|
<video src=”sample-video.mp4″ width=”600″ height=”400″ controls autoplay loop muted>
<source src=”video.mp4” type=”video/mp4”> </video> |
src Attribute
The src attribute is used to embed and link the video path to the element. It supports various formats such as MP4, WebM, Ogg, and others.
width and height
It can be used to alter the height and width of the video elements on the webpage. You can choose the height based on the element you choose. For example, the height and width of the HTML video element in the above example are “600” and “400” which will display the following result.
Controls
The control attributes help users in adding functionalities such as play and pause buttons in the video element and you can also control the volume using the controls option in the video tag element.
HTML Media Iframe Tag
<iframe> tags can be used to render a video element directly from the web page. You can easily choose your selective size i,e. Height and width and embed the video or complete webpage on a desired place on your webpage.
Let us help you understand with the help of an example below.
This given YouTube video is embedded on the webpage using the <iframe> tag, which can render the complete video with the controls option on the webpage simply.
Advantages of HTML Media Attributes
The use of media elements in HTML5 introduced many changes in the webpage and made it more effective. Let us know some of the biggest benefits of HTML media tags.
Good User Experience
Using HTML media tags improved user experience by giving them more controls over the multimedia elements. Users can easily adjust volumes, pause or play, and embed different multimedia files easily.
Better Accessibility
With better accessibility using the “controls” option you can easily interact with media and <source> ensures that different browsers can play supported formats.
Enhanced Website Performance
With the help of preload attribute the webpage performances are greatly enhanced by reducing unnecessary bandwidth usage. It uses “auto”, “metadata”, “none” using the HTML media elements.
Enhanced Attributes
We will have various attributes such as autoplay, loop, muted and more attributes which can be used to provide much control to users.
No Need for Extra Plugins
In HTML5 media elements you do not need to add any extra plugins in the HTML document which improves security and compatibility.
Learn Web Development with PW Skills
Learn HTML, CSS, and other popular frameworks in the PW Skills Full Stack Web Development Course. Get in-depth tutorials for every framework in web development and strengthen in real world projects. Become skilled in web programming, front end, and backend.
Get tutored through dedicated mentors, 24×7 doubt support, and more. Practice through exercises, assignments, and projects.
HTML Media Tags FAQs
Q1. What are HTML media tags?
Ans: HTML media attribute is used to embed a media element in the form of audio, video, graphics, or other forms of designs. By using HTML media, you can specify the style of different elements in devices, screens, or sizes.
Q2. What are popular HTML media tags?
Ans: The audio and video HTML media elements are popular HTML multimedia tags.
Q3. What are the various attributes of HTML Media Tags?
Ans: The popular HTML media tags are controls, loops, height and weight, muted, src, and more.
Q4. What are the supported formats of HTML video tags?
Ans: The different formats of HTML video tags are MP4, ogg, and WebM.
