HTML provides several attributes to control how audio and video behave on a webpage.
These attributes allow developers to improve user experience, performance, and accessibility.
The controls Attribute
The controls attribute displays built-in media controls such as play, pause, volume, and fullscreen.
The autoplay Attribute
The autoplay attribute starts playing media automatically when the page loads.
Due to browser restrictions, autoplay usually works only when the media is muted.
The loop Attribute
The loop attribute makes the audio or video replay automatically after it ends.
The muted Attribute
The muted attribute disables sound by default.
It is commonly used with autoplay videos.
The preload Attribute
The preload attribute tells the browser how media should be loaded.
Possible values include auto, metadata, and none.
Common Media Attribute Summary
- controls: shows playback controls
- autoplay: plays media automatically
- loop: repeats media
- muted: disables sound
- preload: controls loading behavior
Best Practices for Media Attributes
- Avoid autoplay with sound
- Always give users control
- Optimize loading using preload
- Consider accessibility and user preference
Why Media Attributes Matter for Jobs
Professional websites require fine control over media behavior.
Employers expect developers to understand and apply media attributes correctly.
Practice Task
Create an audio or video player using controls, loop, muted, and preload attributes.
What You Will Learn Next
In the next lesson, you will learn about the HTML iframe element and how to embed external content.