Skip to content
Related Articles

Related Articles

HTML | controls Attribute
  • Last Updated : 08 Jul, 2019

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"
        GeeksforGeeks 
    </h1>
    <h2 style="font-family: Impact"
        HTML Audio controls Attribute 
    </h2>
    <br>
  
    <audio id="Test_Audio" controls autoplay>
  
        <source src=
                            type="audio/ogg">
  
        <source src=
                           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;">GeeksforGeeks</h1
  
        <h3>HTML video controls Attribute</h3
  
        <video width="400" height="200" controls > 
            <source src
                    type="video/mp4"
            <source src
                    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

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :