HTML Audio and Video

Learn how to embed audio and video files in HTML

Menu

HTML Audio and Video

HTML5 introduced built-in support for audio and video content. Here's how to embed audio and video files in your web pages:

Audio

To embed an audio file, use the <audio> element:

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

Attribute Examples

Here are some examples of common attributes for audio and video elements:

  • controls: <audio/video controls> - Adds playback controls to the audio/video player
  • autoplay: <audio/video autoplay> - Starts playing the audio/video automatically when the page loads
  • loop: <audio/video loop> - Makes the audio/video play repeatedly
  • muted: <audio/video muted> - Mutes the audio/video by default
  • preload: <audio/video preload="auto"> - Specifies that the audio/video should be loaded when the page loads
  • width and height: <video width="320" height="240"> - Sets the dimensions of the video player

Video

To embed a video file, use the <video> element:

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

Common Attributes

Both audio and video elements share some common attributes:

  • controls: Adds play, pause, and volume controls
  • autoplay: Starts playing the media automatically
  • loop: Repeats the media when it ends
  • muted: Mutes the audio output

Multiple Sources

You can provide multiple source files for better browser compatibility:

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

Remember to respect copyright laws and only use media files that you have permission to use on your website.