HTML Media

Learn how to embed audio, video, and other media in HTML

Introduction to HTML Media

HTML5 provides native support for embedding media such as audio and video without the need for plugins.

1. Embedding Audio Element:

HTML5 makes adding audio simple with the <audio> tag.

Basic Audio Tag

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

Output

This will render an audio player with controls to play, pause, and adjust volume.

Attributes of Audio Element:

Attributes	Description
`controls`	Shows play/pause bar
`autoplay`	Plays audio automatically
`loop`	Repeats the audio
`muted`	Starts audio muted
`preload`	Preloads audio data

2. Embedding Video element

Use the <video> tag to add video directly into your HTML page.

Basic Video Tag

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

Output

This will render a video player with controls to play, pause, and adjust volume.

HTML5 supports various video formats like MP4, WebM, and Ogg.

Example of Video Tag with Poster Image

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

Attributes of Video Element:

Attributes	Description
`controls`	Shows play/pause bar
`autoplay`	Plays video automatically
`loop`	Repeats the video
`muted`	Starts video muted
`poster`	Image shown before video plays