Export (0) Print
Expand All
This topic has not yet been rated - Rate this topic

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


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

Property values


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


The developer, not the client, provides media controls.


The 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="false"> is true). The absence of the attribute is false.


This example shows how to turn the controls on and off using the video object. The controls are initially on. To start, paste a URL for an mp4 video file into the text field, and then click Play.

<!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" /> -->
         function hidecontrol(e) {
           // Set controls to true or false based on their current state
           var video = document.getElementById('video1');
           if (video.controls == true) {
             // Controls are binary, true if there, false if not
             e.innerHTML = "Show controls";
           } else {
             // Controls are binary, true if there, false if not
             video.setAttribute("controls", true); 
             e.innerHTML = "Hide controls";

         function playVideo(e) {
           var video = document.getElementById('video1');      //video element
           //  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;
               e.innerHTML = "Pause";
           } else {
             e.innerHTML = "Play";
<video id="video1" controls >HTML5 video is not supported</video><br />
<input type="text" id="videoFile" size="60" placeholder="Enter video file URL here"/>
  <button onclick="playVideo(this);">Play</button>
  <button onclick="hidecontrol(this);">Hide controls</button>



Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback

Community Additions

© 2014 Microsoft. All rights reserved.