HTML controls Attribute

The HTML controls attribute is used with media elements such as <audio> and <video> to display built-in playback controls. It allows users to play, pause, adjust volume, and interact with the media directly.

Adds default media controls to audio and video elements.
Enables users to play, pause, seek, and adjust volume.
Commonly used with the <audio> and <video> tags.

Syntax:

<element controls>

Below example illustrates the use of controls attribute in <audio> element.

Example: Use the <audio> element with controls and autoplay attributes to play an audio file. It includes multiple <source> elements for different audio formats.

html

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>

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

<!--Driver Code Ends-->

<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>

<!--Driver Code Starts-->

</html>
<!--Driver Code Ends-->

Example: 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

<!--Driver Code Starts-->
<!DOCTYPE html> 
<html> 

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

<!--Driver Code Ends-->

<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> 

<!--Driver Code Starts-->

</html> 

<!--Driver Code Ends-->

Explore