HTML Media

Learn to embed audio and video seamlessly while providing a great user experience.

`Video Integration`

The <video> element allows you to play movie files directly in the browser without external plugins.

<video> : The container for video content on a webpage.
<source> : Defines alternative media files so the browser can choose one it supports.
poster : An attribute that specifies an image to be shown while the video is downloading, or until the user hits the play button.
width & height : Attributes used to set the size of the video player in pixels.

Lorem Ipsum Video

A real working video example from the Internet Archive.

<video 
  width="100%" 
  height="auto" 
  controls 
  poster=""
>
  <source 
    src="https://lorem.video/1280x720_h264_20s_30fps"
  >
  Your browser does not support the video tag.
</video>

`Audio Integration`

Similar to video, the <audio> element embeds sound content such as music or podcasts.

<audio> : The container used to embed sound content in a document.
controls : A boolean attribute that adds the play/pause, volume, and seeking interface.
loop : A boolean attribute that causes the audio to start over again every time it finishes.
muted : A boolean attribute that ensures the audio starts without sound by default.

Multi-Format Audio

A working audio player using stable third-party formats for testing.

<audio 
  controls 
  class="w-full"
>
  <source 
    src="https://www.learningcontainer.com/wp-content/uploads/2020/02/Sample-OGG-File.ogg" 
    type="audio/ogg"
  >
  <source 
    src="https://www.learningcontainer.com/wp-content/uploads/2020/02/Sample-Tracks-Small.mp3" 
    type="audio/mpeg"
  >
  Your browser does not support the audio element.
</audio>

`Playback Attributes`

Control how your media behaves automatically or through user interaction using these specific attributes.

autoplay : A boolean attribute; if specified, the video/audio will automatically begin playback as soon as it can.
Media formats : Different file types like MP4, WebM, and OGG for video, or MP3 and WAV for audio.
Subtitles & captions : Text overlays provided for accessibility, enabling users with hearing impairments to follow along.

`Media Accessibility`

Ensuring media is accessible is a core part of modern web standards.

<track> : Used as a child of media elements to specify timed text tracks (like subtitles or captions).
srclang : Specifies the language of the track text data (e.g., 'en' for English).
kind : Defines the type of text track, such as 'subtitles', 'captions', or 'descriptions'.

Knowledge Check

1. Which element is used to define multiple media resources for <video> or <audio>?

2. What does the 'poster' attribute do in a <video> tag?

3. Which attribute is required to show the play, pause, and volume buttons?

4. What is the purpose of the <track> element?

5. Why should you provide multiple <source> tags inside a media element?

Previous Next