Practical 8: Multimedia Elements
Objective:
To learn how to embed multimedia elements such as audio and video in an HTML document.
Instructions:
Open your index.html file created in previous labs.
Adding Audio:
Add an audio element inside the <body> tag:
<body>
<h1>Welcome to My First HTML Page</h1>
<p>This is a paragraph of text.</p>
<h2>Sample Audio</h2>
<audio controls>
<source src="path/to/audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
Replace "path/to/audio.mp3" with the actual path or URL to your audio file. Ensure the audio file is accessible from your HTML file location.
Adding Video:
Add a video element inside the <body> tag:
<body>
<h1>Welcome to My First HTML Page</h1>
<p>This is a paragraph of text.</p>
<h2>Sample Video</h2>
<video width="320" height="240" controls>
<source src="path/to/video.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
</body>
Replace "path/to/video.mp4" with the actual path or URL to your video file. Ensure the video file is accessible from your HTML file location.
Save and view your HTML document in a web browser to see the audio and video elements.
Detailed Explanation:
Adding Audio:
HTML Audio <audio> Tag:
The <audio> tag is used to embed audio content in HTML.
Syntax:
<audio controls>
<source src="URL" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
controls: Adds playback controls (play, pause, volume) to the audio player.
<source>: Specifies the audio file source and its type.
Adding Video:
HTML Video <video> Tag:
The <video> tag is used to embed video content in HTML.
Syntax:
<video width="width" height="height" controls>
<source src="URL" type="video/mp4">
Your browser does not support the video element.
</video>
width and height: Specify the dimensions (in pixels) of the video player.
controls: Adds playback controls (play, pause, volume) to the video player.
<source>: Specifies the video file source and its type.
Multimedia Formats and Browser Support:
Supported Formats:
For audio: Common formats include MP3, OGG, and WAV.
For video: Common formats include MP4, WebM, and OGG.
Use multiple <source> elements inside <audio> or <video> tags to provide alternative formats for broader browser compatibility.
Outcome:
By completing this lab, you will understand how to embed audio and video elements into HTML documents using the <audio> and <video> tags. This knowledge is essential for enriching web pages with multimedia content, enhancing user engagement, and providing interactive media experiences.