Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to include the audio/video controls in HTML?
The controls attribute in HTML provides built-in playback controls for audio and video elements. When added to <audio> or <video> tags, it displays a control bar with play/pause buttons, volume controls, progress bar, and other standard media controls that users expect.
Syntax
Following is the syntax for the controls attribute −
<video controls> <source src="video.mp4" type="video/mp4"> </video>
<audio controls> <source src="audio.mp3" type="audio/mp3"> </audio>
The controls attribute is a boolean attribute, meaning it does not require a value. Its presence enables the controls, while its absence disables them.
Video Controls
The controls attribute for video elements provides a comprehensive interface including play/pause button, timeline scrubber, volume control, fullscreen toggle, and time display. Without this attribute, users would have no way to interact with the video content.
Example
Following example demonstrates how to add controls to a video element −
<!DOCTYPE html>
<html>
<head>
<title>HTML Video Controls</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Video with Controls</h2>
<video width="500" height="300" controls>
<source src="/html/compileonline.mp4" type="video/mp4">
<source src="/html/compileonline.webm" type="video/webm">
Your browser does not support the video tag.
</video>
<h3>Video without Controls</h3>
<video width="500" height="300">
<source src="/html/compileonline.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
The first video displays playback controls while the second does not, showing the importance of the controls attribute.
Audio Controls
For audio elements, the controls attribute displays a compact control bar with play/pause, volume, and timeline controls. This is essential for audio playback since audio elements are not visible without controls.
Example
Following example shows how to implement audio controls −
<!DOCTYPE html>
<html>
<head>
<title>HTML Audio Controls</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Audio with Controls</h2>
<audio controls>
<source src="/html/sample-audio.mp3" type="audio/mpeg">
<source src="/html/sample-audio.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<h3>Audio without Controls (Not Recommended)</h3>
<audio>
<source src="/html/sample-audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p><em>The audio above has no controls and cannot be played by users.</em></p>
</body>
</html>
Audio elements without controls are essentially unusable since users cannot start playback or adjust settings.
Additional Control Attributes
The controls attribute can be combined with other media attributes for enhanced functionality −
Example − Controls with Autoplay and Loop
<!DOCTYPE html>
<html>
<head>
<title>Enhanced Media Controls</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Video with Multiple Attributes</h2>
<video width="400" height="250" controls autoplay muted loop>
<source src="/html/compileonline.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<p><strong>Attributes used:</strong></p>
<ul>
<li><code>controls</code> - Shows playback controls</li>
<li><code>autoplay</code> - Starts playing automatically</li>
<li><code>muted</code> - Required for autoplay in most browsers</li>
<li><code>loop</code> - Repeats the video when it ends</li>
</ul>
</body>
</html>
The video starts playing automatically (muted to comply with browser policies), shows controls for user interaction, and loops continuously.
Browser Compatibility
The controls attribute is supported by all modern browsers for both audio and video elements. However, the appearance and functionality of controls may vary slightly between browsers. Each browser implements its own control interface design while maintaining standard functionality.
| Feature | Video Controls | Audio Controls |
|---|---|---|
| Play/Pause Button | Yes | Yes |
| Volume Control | Yes | Yes |
| Timeline Scrubber | Yes | Yes |
| Fullscreen Toggle | Yes | No |
| Download Option | Varies by browser | Varies by browser |
| Playback Speed | Varies by browser | Varies by browser |
Conclusion
The controls attribute is essential for making audio and video content interactive in HTML. It provides users with standard playback controls and should be included in virtually all media elements. Without controls, users cannot play, pause, or adjust media content, making it effectively unusable.
521 Views
