controls property

Gets or sets a flag that indicates whether the client provides a set of controls for the media (in case the developer does not include controls for the player).

HTML5 A vocabulary and associated APIs for HTML and XHTML, Section Explorer 9



      * controls);

Property values

Type: boolean

In a video or audio element, this attribute is true by its presence, false by its absence.


The developer, not the browser or client, provides media controls.


The browser or client provides media controls.

Standards information


The presence of the controls attribute, regardless of assigned value, in either the audio or video element equals true (for example, <audio controls> is true). The absence of the attribute is false. However, many developers use <audio controls="controls">.


This example shows how to turn the controls on and off using the video object. The controls are initially on. Click Play to start. You can paste a different URL for an mp4 video file into the text field, and then click Play again. The Play/Pause button is kept in sync with the video element controls by handling the play and the pause events. See the live example online.

<!DOCTYPE html>
    <title>Simple Video Example</title>
      <!-- Uncomment the following tag when developing on a local or intranet computer -->
      <!-- <meta http-equiv='X-UA-Compatible' content="IE=edge" /> -->
  <h1>Video controls example</h1>
<video id="video1" controls >HTML5 video is not supported</video><br />
<input type="text" id="videoFile" size="60"  value="" />
  <button id="play">Play</button>
  <button id="controls">Hide controls</button>

       var video = document.getElementById('video1');
       var playbutton = document.getElementById("play");
       document.getElementById("controls").addEventListener("click", function (e) {
         // Set controls to true or false based on their current state
         if (video.controls == true) {
           // Controls are binary, true if there, false if not
  = "Show controls";
         } else {
           // Controls are binary, true if there, false if not
           video.setAttribute("controls", true);
  = "Hide controls";
       }, false);

       playbutton.addEventListener("click", function (e) {       
         //  Toggle between play and pause based on the paused property
         if (video.paused) {
           var input = document.getElementById('videoFile');   //text box
           if (input.value) {
             //  Only load a video file when the text field changes
             if (input.value != video.src) {
               video.src = input.value;

         } else {
       }, false);

       video.addEventListener("play", function () {
         playbutton.innerHTML = "Pause";
       }, false);

       video.addEventListener("pause", function () {
         playbutton.innerHTML = "Play";
       }, false);





Community Additions

© 2015 Microsoft