← Back to HTML Course | Chapter 6: Canvas, SVG & Media | Lesson 3 of 6

HTML Media

Imagine visiting an entertainment website, but there are no videos to play or music clips to listen to—just static text articles explaining how the songs sound. It would be an incredibly dry experience. HTML media tags solve this issue. They are native portal elements that let you embed video and audio files directly onto your webpage without needing to load heavy, outdated plugins. By using these elements, you can provide interactive media players that load files quickly and adapt perfectly to any screen size.

In this page:

  1. The Evolution of Web Media
  2. Standard Web Media Formats
  3. Controlling Media Layout Sizes
  4. Providing Fallback Solutions
  5. Native Playback Attributes
Syntax
markup 
<video controls>
  <source src="file.mp4" type="video/mp4">
</video>
<audio controls>
  <source src="file.mp3" type="audio/mpeg">
</audio>

The Evolution of Web Media

In the early days of the web, browsers could not play audio or video files natively. Developers had to rely on heavy, insecure third-party plugins like Flash Player. Modern HTML5 solved this by introducing native video and audio tags.

Note: Use native HTML5 media elements to ensure your videos load fast and play smoothly on mobile devices.
Warning: Avoid using legacy, plugin-based tags like object or embed for playing standard media files.

Example: The Evolution of Web Media

markup 
<video src="movie.mp4" controls></video>

Standard Web Media Formats

Web performance relies heavily on selecting the correct media format. For videos, use MP4 (for maximum compatibility) or WebM (for high performance compression). For audio, use MP3 or OGG formats.

Note: Offer both WebM and MP4 source files so browsers can automatically load the most efficient format.
Warning: Using heavy, unoptimized raw file formats (like AVI or WAV) can waste bandwidth and slow down your site's load speed.

Example: Standard Web Media Formats

markup 
<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
</video>

Controlling Media Layout Sizes

By default, video players will display at their native file dimensions. You can easily control their width and height using HTML attributes or CSS properties to make them fit your page layout.

Note: Use a percentage width combined with a max-width setting to build responsive video players.
Warning: Do not set fixed pixel widths on your media players, as they will overflow on compact mobile screens.

Example: Controlling Media Layout Sizes

markup 
<video src="movie.mp4" controls style="width: 100%; max-width: 600px;"></video>

Providing Fallback Solutions

Although native HTML5 media elements are supported by all modern browsers, some legacy devices may fail to render them. You should always include fallback text or download links inside your media tags to assist those users.

Note: Use download links as fallback text to allow users to save the media file directly.
Warning: Always write clear, helpful fallback text inside your media tags, as older browsers will ignore the tags and display the text instead.

Example: Providing Fallback Solutions

markup 
<video src="movie.mp4" controls>
  <a href="movie.mp4">Download the video</a>
</video>

Native Playback Attributes

Modern HTML5 media elements include built-in attributes (like controls, autoplay, loop, and muted) that allow you to customize how your video and audio players behave natively.

Note: Always include the controls attribute so your users can pause and play the media.
Warning: Modern browsers block video and audio from auto-playing unless you also include the muted attribute.

Example: Native Playback Attributes

markup 
<video src="movie.mp4" controls autoplay loop muted></video>
Live Example
Related Topics

HTML SVG · HTML Video · HTML Canvas · HTML Audio

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Forgetting to include the required controls attribute, leaving your users unable to pause the media.
  2. Attempting to auto-play media files with sound enabled, which modern browsers will block.
  3. Using outdated raw file formats (like AVI or WAV) that are not widely supported by modern browsers.
Chapter Summary
  • Modern HTML5 native media elements have replaced old third-party plugins.
  • Use MP4 or WebM formats for videos, and MP3 or OGG formats for audio files to ensure maximum browser support.
  • Always include controls for user convenience, and include fallback links inside your media tags to assist legacy users.
Browser Support

Standard HTML5 audio and video elements are natively supported by all modern desktop and mobile browsers.

🔒

Chapter Quiz — Complete all 6 topics to unlock

0/6 topics done

Complete these topics first:

← Previous Lesson HTML SVG Next Lesson → HTML Video

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.