Latest web development tutorials
 

Video controls Property

< Video Object

Example

Enable controls for a video:

document.getElementById("myVideo").controls = true;
Try it Yourself »

Definition and Usage

The controls property sets or returns whether a video should display standard video controls.

This property reflects the <video> controls attribute.

When present, it specifies that the video controls should be displayed.

Video controls should include:

  • Play
  • Pause
  • Seeking
  • Volume
  • Fullscreen toggle
  • Captions/Subtitles (when available)
  • Track (when available)

Note: The <video> element is new in HTML5.

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The controls property is supported in all major browsers.

Note: Internet Explorer 8 and earlier versions, do not support the <video> element.

Syntax

Return the controls property:

videoObject.controls

Set the controls property:

videoObject.controls=true|false

Property Values

Value Description
true|false Specifies whether a video should have controls displayed, or not
  • true - Indicates that controls are displayed
  • false - Default. Indicates that controls are NOT displayed

Technical Details

Return Value: A Boolean, returns true if video controls are displayed, otherwise it returns false
Default Value: false 

More Examples

Example

Find out if the video controls are displayed:

var x = document.getElementById("myVideo").controls;

The result of x will be:

true
Try it Yourself »

Example

Enable, disable and check controls status:

var x = document.getElementById("myVideo");

function enableControls() {
    x.controls = true;
    x.load();
}

function disableControls() {
    x.controls = false;
    x.load();
}

function checkControls() {
    alert(x.controls);
}
Try it Yourself »

Related Pages

HTML reference: HTML <video> controls attribute

< Video Object