0 out of 1 rated this helpful - 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 4.8.9.10

Syntax

JavaScript	`controls = object.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 client, provides media controls.
true: The 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).

Examples

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.

HTML


<!DOCTYPE html>
<html>
  <head>
    <title>Simple Video Example</title>
     <script type="text/javascript">
         function losecontrol(e) {
           // set controls to true or false based on their current state
           var oVideo = document.getElementById('video1');
           if (oVideo.controls == true) {
             oVideo.controls = false;
             e.innerHTML = "Get controls";

           } else {
             oVideo.controls = true;
             e.innerHTML = "Lose controls";
           }
         }

         function playVideo(e) {
           var oVideo = document.getElementById('video1');      //video element
           //  toggle between play and pause based on the paused property
           if (oVideo.paused) {
             var oInput = document.getElementById('videoFile');   //text box
             if (oInput.value) {
               //  only load a video file when the text field changes
               if (oInput.value != oVideo.src) {
                 oVideo.src = oInput.value;
               }
               oVideo.play();
               e.innerHTML = "Pause";
             }
           } else {
             oVideo.pause();
             e.innerHTML = "Play";
           }
           
         }
     </script>
</head>
<body>
<video id="video1" controls >HTML5 video is not supported</video>
<input type="text" id="videoFile" size="60" />
  <button onclick="playVideo(this);">Play</button>
  <button onclick="losecontrol(this);">Lose controls</button>
</body>
</html>

Community Additions

ADD