Table of contents
HTML Elements
HTML is a markup language and it is used for the structuring of the webpage, for different purposes, different tags are used. Like, for heading h1, h2 etc tags are used while for paragraphs p tag is used. Some tags consist of both opening and closing tags, and some tags contain only tag there is no closing tags.
The syntax of HTML tags is shown below:
<h1>This is a heading.</h1>
<h2>This is another heading.</h2>
<p>This is a paragraph.</p>
When we use tags and write some content inside the tag, the combination forms an HTML element. Like in the above code snippet h1, h2 and p are tags while the whole line "<h1>This is a heading.</h1>" is the h1 element similarly h2 element and p element.
Audio Tag in HTML
The audio tag in the HTML document is used to embed the audio file. The syntax for the audio tag is shown below:
<audio src="audio.mp3">Audio File</audio>
The above code doesn't show anything in the browser, but it embeds the audio file that is mentioned in the src attribute. To enable the controls in the browser we have to add controls attribute inside the audio tag as shown in the example below.
<audio controls src="audio.mp3">Audio File</audio>
Output:
In case the audio tag gets an error the text written between the audio tag is shown in the browser. In the above example if the tag gets an error the browser will show the following output:
It works like the alt attribute inside the img tag. There are various attributes in audio tag, some of the attributes are autoplay, controls, muted, loop, preload etc.
The controls attribute is used to show the player controls inside the browser, the control contains play/pause, seek, and volume controls. The muted attribute is used to mute the audio, loop attribute is used to loop the audio when the audio reaches the end. The preload attribute gives a signal to the browser to load the audio, there are three values of this attribute none, metadata and auto, none is indicating to the browser to not load anything, and metadata value indicates the browser to load the metadata like audio length. The auto value of preload attribute indicates preloading the audio even if the user doesn't use it. All the browser doesn't support all file types and codecs, so it is recommended to use various file types in the source.
<audio controls>
<source src="myAudio.mp3" type="audio/mpeg" />
<source src="myAudio.ogg" type="audio/ogg" />
</audio>
In the above scenario if the browser is unable to understand the .mp3 file it will move to .ogg file.
Video Tag in HTML
The video tag is used to embed video in the HTML document. The syntax for video tags is:
<video src="video.mp4"></video>
If we don't add controls attribute in the video tag, the browser will show only the first frame of the video as shown in the example below:
The same video with the controls attribute will look something like the image shown below:
<video controls src="video.mp4"></video>
To adjust the video width and height, we can add the width and height attribute in the video tag. There are many attributes of the video tag, some of the attributes are discussed below, with their respective use cases.
The loop attribute is used for starting over the video when the video reaches its end. There is an autoplay attribute, if mentioned the browser will automatically play the video when the browser will be able to do. Although it is not recommended to play video or audio without the permission of the user, it gives a bad experience to the user. The poster attribute is used to show an image until the first frame of the video is loaded.
<video controls height="300" src="video.mp4" poster="image.jpg"></video>
In the above example, the image inside the poster attribute is shown in the browser before the loading of the first frame of the video.