>_
CodeXPal
📄

Audio and Video

Intermediate
80 XP
30 min
Lesson Content

Audio and Video in HTML

HTML5 provides native support for embedding audio and video content without requiring plugins like Flash.

Audio Element

The <audio> element embeds sound content in your web page.

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

Audio Attributes

  • controls - Shows play/pause controls
  • autoplay - Starts playing automatically (use sparingly)
  • loop - Repeats the audio
  • muted - Starts muted
  • preload - Specifies if audio should be loaded (none, metadata, auto)

Video Element

The <video> element embeds video content.

<video width="640" height="360" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

Video Attributes

  • width and height - Set video dimensions
  • controls - Shows video controls
  • autoplay - Starts playing automatically
  • loop - Repeats the video
  • muted - Starts muted
  • poster - Image shown before video plays
  • preload - How video should be loaded

Multiple Sources

Provide multiple <source> elements with different formats for browser compatibility. The browser will use the first format it supports.

Best Practices

  • Always include fallback text for browsers that don't support audio/video
  • Provide multiple formats (MP4, WebM, OGG) for maximum compatibility
  • Use controls attribute to give users control over playback
  • Avoid autoplay as it can be annoying to users
  • Consider file sizes - large media files can slow down page loading
Example Code

Create a page with an audio player and a video player with controls.

<!DOCTYPE html>
<html>
  <head>
    <title>Media Player</title>
  </head>
  <body>
    <h1>Media Examples</h1>
    <!-- Add an audio element with controls -->
    <!-- Add a video element with controls, width="640", height="360" -->
  </body>
</html>

Expected Output:

Audio and video players
Study Tips
  • •Read the theory content thoroughly before practicing
  • •Review the example code to understand key concepts
  • •Proceed to the Practice tab when you're ready to code