How to Add Audio and Video in HTML: A Beginner Multimedia Project

You can add audio and video to an HTML page with the <audio> and <video> elements. This beginner project turns multimedia theory into a small lesson page with a recording, a demonstration video, and readable notes.

This tutorial continues our introduction to the World Wide Web, HTML, and multimedia. You need a text editor, a browser, and short media files that you own or have permission to use.

Plan a useful multimedia lesson

Imagine a lesson about assembling a computer. Text explains the sequence, a photograph labels the parts, audio provides a spoken explanation, and video shows a connector being inserted. Choose each medium because it helps the learner complete a task. A long video that repeats every paragraph adds download time without necessarily improving the lesson.

For this project, make a 30-second recording explaining one concept and a short video demonstrating it. Keep a written version beside the players so the lesson still makes sense when a learner cannot listen.

1. Create your project folder

Create a folder named multimedia-lesson. Put these files inside it:

• index.html — your webpage
• lesson-audio.mp3 — your recording
• lesson-video.mp4 — your demonstration
• lesson-poster.jpg — a still image for the video
• captions-en.vtt — captions for spoken words and relevant sounds

The names are examples. Replace them in the code if your files use different names. A media filename is case-sensitive on many web servers: Lesson.mp4 and lesson.mp4 may be different files.

2. Build the HTML page

Save the following as index.html. The media paths refer to files in the same folder.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My Multimedia Lesson</title>
  <style>
    body { max-width: 760px; margin: auto; padding: 20px;
           font: 18px/1.6 system-ui, sans-serif; }
    video, audio { width: 100%; }
    video { height: auto; }
  </style>
</head>
<body>
  <h1>My Multimedia Lesson</h1>
  <p>Read the notes, listen, then watch the demonstration.</p>
  <h2>Listen to the explanation</h2>
  <audio controls preload="none">
    <source src="lesson-audio.mp3" type="audio/mpeg">
    Your browser does not support this audio player.
  </audio>
  <p><a href="lesson-audio.mp3">Open the audio file</a></p>
  <h2>Watch the demonstration</h2>
  <video controls preload="none" poster="lesson-poster.jpg">
    <source src="lesson-video.mp4" type="video/mp4">
    <track src="captions-en.vtt" kind="captions"
           srclang="en" label="English" default>
    Your browser does not support this video player.
  </video>
  <p><a href="lesson-video.mp4">Open the video file</a></p>
  <h2>Lesson transcript</h2>
  <p>Replace this paragraph with your recording's transcript.
     Explain important visual actions in the video too.</p>
</body>
</html>

3. Write captions and test the lesson

A caption file connects text to times in the video. Save the example below as captions-en.vtt, then replace the text and timings with your actual recording. Include meaningful sounds where they help someone understand the scene.

WEBVTT

00:00:00.000 --> 00:00:04.000
Welcome. Today we will identify the computer's memory slots.

00:00:04.000 --> 00:00:08.000
[Click] The retaining clip opens beside the slot.

Open the page in your browser to check the layout and media paths. For reliable caption testing, serve the folder through a local development server or upload it to your website; opening an HTML file directly can run into browser restrictions. Test on a phone as well as a desktop, use the keyboard to reach the controls, and confirm that captions match the speech.

Common problems and how to diagnose them

• The player appears, but nothing plays: open the media link below it. If the file is missing, correct the path. If it downloads but will not play, check the encoding; a filename ending in .mp4 does not by itself prove that the browser supports its codecs.
• The video is wider than the screen: keep the responsive width rule and viewport setting in the example.
• Captions do not appear: check the VTT filename, timestamp format, and caption menu. Test through a web server.
• The lesson feels slow: shorten recordings, export appropriately sized media, and avoid loading several large videos at once.
• A YouTube watch URL does not work as a video source: use the platform's embed option instead of putting a watch-page URL into a video element.

Apply this to your multimedia coursework

Use our sound and audio notes to plan the recording and our video in multimedia article to connect the demonstration to course concepts. For another project idea, explore applications of multimedia.

Practice task: create a two-minute lesson about one IT concept. Include a concise explanation, one demonstration, captions, and a transcript. Ask a classmate to complete the task using the page, then revise whichever instruction caused confusion.

Frequently asked questions

Do I need JavaScript for this project?

No. The basic players work with HTML. JavaScript is useful later if you want custom interactions.

Can I paste the full example into a Blogger post?

The example is a standalone webpage. In Blogger's HTML view, use only the content you need inside the post, and replace local media paths with public URLs to your hosted files. Do not paste a second document head or body into a post.

Should audio start automatically?

Let readers choose when to play it. This avoids unexpected sound and gives them control of the lesson.

Further reference: MDN's HTML video and audio guide explains native media elements and text tracks in more detail.