Video & Audio Tags in Html

"Let's go ahead in Html and learn some tags"

ยท

4 min read

Video & Audio Tags in Html

In this article, we will explore the <video> and <audio> tags in HTML and their usage in creating multimedia content on the web. This article is suitable for web developers and designers who are interested in adding multimedia content to their web pages using HTML.

Prior knowledge of HTML and basic web development concepts is recommended (Here is my article you might want to check out to know some basics: Introduction to Web & HTML).

As the internet continues to evolve, multimedia content has become an increasingly important part of modern web design. The <video> and <audio> tags in HTML provide a simple and effective way to embed multimedia content in web pages, without the need for additional plugins or software.

By the end of this article, you will have a good understanding of how to use these tags to create engaging and interactive web pages with multimedia content.


Introduction of audio and video tag

You may have come across various web pages where you have seen videos and audio files embedded within the page. And if you wonder how these things work or how you can do this yourself, don't worry - we will show you how. But first, let us introduce you to the HTML <video> and <audio> tags.

The <video> and <audio> tags in HTML provide a simple and effective way to embed multimedia content in web pages. These tags allow developers to add video and audio files to web pages and customize the playback controls and appearance of the player. They also provide accessibility features such as captions and subtitles for users.


First, Let's see how we embed Video files.

The Video element:

The <video> tag is used to add video clips on web pages. Video tags may have one or more video sources of different formats and the browser will pick the first source it supports. If the browser fails to support the video element then it will display the text between the <video> and </video> tags. Html supports MP4, WebM, and OGG video formats.

Attributes of video tag:

  • controls: This will add basic buttons (such as a play/pause button etc) to the Video content.

  • autoplay: With this attribute video content will automatically start playing.

  • loop: Make the video start again every time, whenever it finishes.

  • muted: By default turned off the sound of video content.

  • preload: Specifies if and how the video should be loaded when the page loads.

  • poster: Specifies an image to display while the video is downloading or until the user hits the play button.

  • width: Used to set the width of video content.

  • height: Used to set the height of video content.

  • SCR: To give the URL or path of the video file to embed.

Here is the code of video tags and their attributes.

<video controls autoplay loop muted
    preload="auto" poster="pexels-fabian-reitmeier-707915.jpg" width="1000"
    height="650" src="Pexels Videos 1093662.mp4">
    <p>
       Your browser doesn't support this video format. Here is a
       <a href="https://www.pexels.com/video/water-crashing-over-the-rocks-1093662/">link to the video</a> instead.
    </p>
</video>

And the output would be:


The Audio element:

The <audio> tag is very similar to the <video> tag, with a few small differences as mentioned below.

  • The tag doesn't support the width/height attributes as there is no visual component.

  • The poster attribute is also not required same reason no visual component.

Attributes of audio tag:

The Audio tag has the same attributes Video tag as we discussed above such as controls autoplay loop muted preload src. But the audio tag doesn't include poster width and height attributes. Here is the code of audio tags and their attributes.

<audio
controls autoplay loop muted preload="auto" src="lifelike-126735.mp3">
<audio>

And the output would be:


Here is link to code files of these tags, which we have learned in this article & there hosted websites.


Conclusion:

The <video> and <audio> Tags are powerful tools for adding multimedia content to web pages in HTML. In this article, we discussed the basics of using the <video> and <audio> tags, including how to add video and audio files to web pages, control playback, and customize the appearance of the player. We also covered some of the common attributes and events associated with these tags, which allow developers to customize the behaviour of the video and audio player.

By using the <video> and <audio> tags, web developers can create engaging and interactive multimedia content that is optimized for a range of devices and user preferences. I hope this article has been helpful in providing a solid foundation for working with multimedia content in HTML.

For those interested in exploring HTML more, I recommend checking out my next article on The Input (Form Input) element in Html. Understanding HTML input elements is crucial for creating interactive forms that allow for the collection of accurate and relevant data from website visitors.

Thank you for reading. Feel free to comment on this, if found it useful.๐Ÿ˜‡๐Ÿ˜‡

ย