Open In App

HTML controls Attribute

Last Updated : 28 Aug, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

The HTML controls Attribute is used to specify that the audio and video controls must be displayed. It is a Boolean attribute and is 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: In this example we use the <audio> element with controls and autoplay attributes to play an audio file. It includes multiple <source> elements for different audio formats.

html
<!DOCTYPE html>
<html>

<head>
    <title>
        HTML Audio controls Attribute
    </title>
</head>

<body style="text-align: center">

    <h1 style="color: green"> 
        GeeksforGeeks 
    </h1>
    <h2 style="font-family: Impact"> 
        HTML Audio controls Attribute 
    </h2>
    <br>

    <audio id="Test_Audio" controls autoplay>

        <source src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190531165842/Recording1514.ogg"
                            type="audio/ogg">

        <source src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190531165842/Recording1514.mp3" 
                           type="audio/mpeg">
    </audio>

</body>

</html>

Output:

Example: In this example we use the <video> element with controls to embed a video player. It includes <source> elements for multiple video formats, ensuring compatibility across different browsers.

html
<!DOCTYPE html> 
<html> 

<head> 
    <title>HTML video controls Attribute</title> 
</head> 

<body> 
    <center> 
        <h1 style="color:green;">GeeksforGeeks</h1> 

        <h3>HTML video controls Attribute</h3> 

        <video width="400" height="200" controls > 
            <source src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.mp4"
                    type="video/mp4"> 
            <source src= 
"https://media.geeksforgeeks.org/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:


Similar Reads