Qarpeo LogoInstitute

Media

HTML <audio> and <video> tags are used to embed media files. The <audio> tag plays sound, while the <video> tag plays videos. Both tags include attributes for source files, controls, and additional settings.

HTML Video

The <video> element is used to embed video content into an HTML webpage. It supports video formats such as MP4, WebM, and Ogg and includes various attributes to control playback, such as autoplay, controls, and a thumbnail image for the video.

Basic <video> Example

index.html
<video width="220" height="140" controls>
  <source src="video.mp4" type="video/mp4" />
</video>

Key Attributes

  • controls: Adds video playback controls.
  • autoplay: Starts video automatically.
  • poster: Sets a thumbnail image before playback begins.

HTML Video with Auto play and Thumbnail

index.html
<video width="450" height="250" autoplay poster="thumbnail.png">
  <source src="video.mp4"type="video/mp4" />
</video>

HTML Audio

The <audio> tag is used for embedding sound content on webpages. It supports formats such as MP3, WAV, and Ogg.

Basic <audio> Example

index.html
<audio controls>  
  <source src="song.mp3" type="audio/mpeg" />  
</audio>

Key Attributes

  • controls: Provides audio playback controls.
  • autoplay: Plays audio automatically.
  • muted: Mutes the audio by default.

HTML Audio with Controls and Autoplay

index.html
<audio controls autoplay>  
  <source src="song.mp3" type="audio/mpeg" />  
</audio>
Many Chromium-based browsers restrict autoplay unless the audio is muted.
  • To make audio play automatically without sound, add the muted attribute along with autoplay.
index.html
<audio controls autoplay muted>  
  <source src="song.mp3" type="audio/mpeg" />  
</audio>

Supported Audio Formats in HTML

Different web browsers support varying audio formats, including MP3, WAV, and OGG. The following table shows the compatibility of these formats across major browsers:

Media Types for Audio Files

The table below lists common audio file formats and their corresponding media types in HTML.

Audio File Formats and Media Types

File FormatMedia Type
MP3audio/mpeg
OGGaudio/ogg
WAVaudio/wav

Audio Methods, Properties, and Events

The HTML DOM provides various methods and properties for the <audio> element. These methods enable control over playback, volume, and duration of an audio file. Events can be triggered when the audio starts, pauses, or stops playing.

HTML Audio Tags

Below are the key tags used for embedding audio content in HTML:

HTML Audio Elements

TagDescription
<audio>Defines an audio element for embedding sound.
<source>Specifies different audio files for compatibility with various browsers.

Conclusion

HTML provides powerful elements like <video> and <audio> for embedding multimedia content on webpages. Using the correct formats and attributes ensures compatibility across browsers, while enhancing user experience. Properly implemented, multimedia elements can make websites more engaging and accessible.

Image

Images enhance a webpage's appearance. In HTML, the <img> tag is used, with the src attribute for the URL and alt for accessibility.

Popover

An HTML popover is a small window that appears upon clicking or hovering over an element, offering additional information or actions, often created with JavaScript or CSS.