logo

We can link audio and video in two ways:

  1. Using <a> (anchor tag) ā†’ provides a simple download/play link.
  2. Using special HTML5 tags (<audio> and <video>) ā†’ embeds media directly inside the webpage.

šŸ”— 1. Linking Audio/Video with <a> Tag

šŸ‘‰ With the anchor tag, you only link to the file. The browser will either download it or open it in the default media player.

Example:

<!-- Audio Link -->
<a href="song.mp3">Play/Download Audio</a><br />

<!-- Video Link -->
<a href="movie.mp4">Play/Download Video</a>
  • Clicking these will either play (if the browser supports the file) or download the media.

šŸŽµ 2. Embedding Audio with <audio> Tag (HTML5)

šŸ‘‰ HTML5 introduced the <audio> tag to directly play audio inside the webpage with controls.

Basic Syntax:

<audio src="song.mp3" controls></audio>
  • controls ā†’ shows play, pause, volume, etc.
  • autoplay ā†’ starts playing automatically (not always recommended).
  • loop ā†’ repeats the audio.

Example with multiple formats (better browser support):

<audio controls>
  <source src="song.mp3" type="audio/mpeg" />
  <source src="song.ogg" type="audio/ogg" />
  Your browser does not support the audio tag.
</audio>

šŸŽ„ 3. Embedding Video with <video> Tag (HTML5)

šŸ‘‰ The <video> tag allows you to embed video directly in the webpage.

Basic Syntax:

<video src="movie.mp4" controls width="400" height="300"></video>
  • controls ā†’ adds play, pause, fullscreen, etc.
  • autoplay ā†’ video starts automatically.
  • loop ā†’ video repeats.
  • muted ā†’ starts muted.
  • poster="image.jpg" ā†’ thumbnail before video plays.

Example with multiple formats:

<video controls width="500">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>

āš–ļø Comparison: <a> vs <audio>/<video>

Feature<a> Tag<audio> / <video> Tag
PurposeJust provides a link to open/download the fileEmbeds media directly inside webpage
ControlsNo built-in controlsBuilt-in play/pause/volume/fullscreen
User ExperienceOpens in a new tab or downloadsPlays directly in the browser
Example<a href="song.mp3">Play Audio</a><audio src="song.mp3" controls></audio>

āœ… Complete Example

<!DOCTYPE html>
<html>
  <head>
    <title>Audio and Video Example</title>
  </head>
  <body>
    <h2>Using Anchor Tag</h2>
    <a href="song.mp3">Download/Play Song</a><br />
    <a href="movie.mp4">Download/Play Movie</a>

    <h2>Using HTML5 Tags</h2>

    <!-- Audio -->
    <audio controls>
      <source src="song.mp3" type="audio/mpeg" />
      Your browser does not support the audio element.
    </audio>

    <!-- Video -->
    <video controls width="400" poster="poster.jpg">
      <source src="movie.mp4" type="video/mp4" />
      Your browser does not support the video element.
    </video>
  </body>
</html>

šŸ‘‰ In summary:

  • Use <a> when you just want to provide a download/play link.
  • Use <audio> and <video> when you want media to play directly inside the webpage.

Back to Topics

Take the test