HTML controls Attribute

The HTML "controls " attribute is a "boolean " attribute and specifies that the audio/video controls must be displayed. It is new in HTML5.

You can use the "controls " attribute on the following elements: <audio> and <video>.

For the <audio> tag, the "controls " attribute includes:

  • Play
  • Pause
  • Seeking
  • Volume

For the <video> tag, the "controls" attribute includes:

  • Play
  • Pause
  • Seeking
  • Volume
  • Fullscreen toggle
  • Captions/Subtitles
  • Track

Syntax

<tag controls></tag>

Example of the HTML "controls" attribute used on the <audio> element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <audio controls src="/build/audios/audio.mp3">
      Your browser does not support the audio element.
    </audio>
    <p>Click the play button</p>
  </body>
</html>

Example of the HTML "controls" attribute used on the <video> element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      video{
      width: 300px; 
      height: 220px;
      border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <video controls>
      <source src=”http://techslides.com/demos/sample-videos/small.ogv” type=video/ogg>
      <source src="/build/videos/arcnet.io(7-sec).mp4" type=video/mp4>
    </video>
    <p>Some information about video</p>
  </body>
</html>



Do you find this helpful?

Related articles