controls property

Article
05/02/2017

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

Syntax

object.put_controls(
        boolean
       controls);object.get_controls(
        boolean
      * controls);

Property values

Type: boolean

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

FALSE

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

TRUE

The browser or client provides media controls.

Standards information

HTML5 A vocabulary and associated APIs for HTML and XHTML, Section 4.8.9.10

Remarks

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

Examples

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 thelive example online.

<!DOCTYPE html>
<html>
  <head>
    <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" /> -->
</head>
<body>
  <h1>Video controls example</h1>
<video id="video1" controls >HTML5 video is not supported</video><br />
<input type="text" id="videoFile" size="60"  value="http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4" />
  <button id="play">Play</button>
  <button id="controls">Hide controls</button>

     <script>
       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
           video.removeAttribute("controls");
           e.target.innerHTML = "Show controls";
         } else {
           // Controls are binary, true if there, false if not
           video.setAttribute("controls", true);
           e.target.innerHTML = "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;
             }
             video.play();
           }

         } else {
           video.pause();           
         }
       }, false);

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

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

     </script>

</body>
</html>

Share via