HTML Media
In this page:
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
<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
<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
<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
<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
<video src="movie.mp4" controls autoplay loop muted></video>- Forgetting to include the required controls attribute, leaving your users unable to pause the media.
- Attempting to auto-play media files with sound enabled, which modern browsers will block.
- Using outdated raw file formats (like AVI or WAV) that are not widely supported by modern browsers.
- 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.
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: