HTML | controls Attribute
The HTML controls Attribute is used to specify that the audio and video controls must be displayed. It is a Boolean attribute and also new in HTML5. We can use this attribute in two tags <audio> and <video>
The controls attribute includes the following properties on <audio> tag:
- Play
- Pause
- Seeking
- Volume
The controls attribute includes the following properties on <video> tag:
- Play
- Pause
- Seeking
- Volume
- Fullscreen toggle (for video only)
- Captions/Subtitles (for video only, when available)
- Track (for video only, when available)
Syntax:
<element controls>
Below example illustrates the use of controls attribute in <audio> element.
Example:
<!DOCTYPE html> < html > < head > < title > HTML Audio controls Attribute </ title > </ head > < body style = "text-align: center" > < h1 style = "color: green" > w3wiki </ h1 > < h2 style = "font-family: Impact" > HTML Audio controls Attribute </ h2 > < br > < audio id = "Test_Audio" controls autoplay> < source src = "https://media.w3wiki.net/wp-content/uploads/20190531165842/Recording1514.ogg" type = "audio/ogg" > < source src = "https://media.w3wiki.net/wp-content/uploads/20190531165842/Recording1514.mp3" type = "audio/mpeg" > </ audio > </ body > </ html > |
Output:
Below example illustrates the use of controls attribute in <video> element.
Example:
<!DOCTYPE html> < html > < head > < title >HTML video controls Attribute</ title > </ head > < body > < center > < h1 style = "color:green;" >w3wiki</ h1 > < h3 >HTML video controls Attribute</ h3 > < video width = "400" height = "200" controls > < source src = "https://media.w3wiki.net/wp-content/uploads/20190616234019/Canvas.move_.mp4" type = "video/mp4" > < source src = "https://media.w3wiki.net/wp-content/uploads/20190616234019/Canvas.move_.ogg" type = "video/ogg" > </ video > </ center > </ body > </ html > |
Output:
Supported Browsers: The browser supported by HTML controls Attribute are listed below:
- Google Chrome 4.0
- Internet Explorer 9.0
- Firefox 3.5
- Safari 4.0
- Opera 10.5
Contact Us