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 4.8.9.10

Syntax

HRESULT value = object.put_controls( controls);HRESULT value = object.get_controls(* controls);

Property values

Type: VARIANT_BOOL

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

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>

Build date: 11/12/2012

Did you find this helpful? Yes No

Not accurate

Not enough depth

Need more code examples

(1500 characters remaining)

Community Additions

ADD