RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/html/html-controls-attribute/ below:

HTML controls Attribute - GeeksforGeeks

HTML controls Attribute

Last Updated : 12 Jul, 2025

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:

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4