Transforming Web Media: Embrace the Magic of <audio> and <video> Tags
Ankita Das
Audio Tag:
The <audio> tag is specifically used for embedding and playing audio files on a web page. It is suitable for including music, podcasts, sound effects, or any other audio content. The <audio> tag provides controls such as play, pause, volume adjustment, and timeline scrubbing, allowing users to interact with the audio playback.
Here's a simple example showcasing the usage of the <audio> tag:
<!DOCTYPE html>
<html>
<head>
<title>Audio Example</title>
</head>
<body>
<h1>Enjoy Some Music</h1>
<audio src="audio/music.mp3" controls></audio>
</body>
</html>
In this example, we have a basic HTML structure with an <title> element set to "Audio Example". Inside the <body>, there's a <h1> heading saying "Enjoy Some Music". Below the heading, the <audio> tag is used to embed an audio file with the source set to "audio/music.mp3". The `controls` attribute allows users to control the audio playback using the default browser controls.
Output:
When you load this HTML page in a browser, it will display the heading "Enjoy Some Music" followed by an audio player with controls. By clicking on the play button in the audio player, the audio file "music.mp3" will start playing, and users can interact with the playback controls to pause, adjust the volume, or scrub through the timeline.
Video Tag:
The <video> tag in HTML is used to embed video content on a web page. It allows you to play videos directly within the browser without requiring any external player.
Here's an example of using the <video> tag:
<!DOCTYPE html>
<html>
<head>
<title>Playing Video</title>
</head>
<body>
<video src="video.mp4" controls autoplay loop width="600">
Your browser does not support the video element.
</video>
</body>
</html>
In the example above, the <video> tag is used to embed a video file called "video.mp4" into the web page. The `src` attribute specifies the URL or file path of the video file. The `controls` attribute displays a set of video controls, allowing users to play, pause, adjust volume, and seek through the video. The`controls` attribute automatically starts playing the video when the page loads. The `loop` attribute makes the video repeat indefinitely. The `width` attribute sets the width of the video display area to 600 pixels.
Output:
When you load this HTML page in a browser, it will display a video player with the specified width. The video player will show the video file "video.mp4" embedded within it. The video will start playing automatically due to the `autoplay` attribute. Users can enjoy watching the video content and interact with the provided controls for an engaging viewing experience.
In short, the <audio> tag in HTML is used to embed and play audio files directly within a web page, while the <video> tag is used to embed and play video files. Both tags provide built-in player interfaces with controls for playback, volume adjustment, and other audio/video functionalities. They eliminate the need for external players and allow for seamless integration of audio and video content on web pages.
Thank you for taking the time to read my article. I sincerely hope you found it valuable and informative. May your coding journey be filled with success and joy. Happy coding!
Subscribe to my newsletter
Read articles from Ankita Das directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by