YouTip``` ### Example 2: Toggling Controls and Checking Status You can also toggle the state of the controls and check their current status programmatically. ```javascript const myVid = document.getElementById("myVideo"); // Toggle controls myVid.controls = !myVid.controls; // Log the current status to the console console.log("Are controls visible? " + myVid.controls); ``` --- ## Browser Support The `controls` property is supported by all modern web browsers: * Google Chrome * Mozilla Firefox * Microsoft Edge / Internet Explorer 9+ * Safari * Opera *Note: Internet Explorer 8 and earlier versions do not support the HTML5 `
Av Prop Controls
## HTML Audio/Video DOM controls Property
The `controls` property sets or returns whether the browser should display the standard audio/video controls.
Standard controls typically include:
* Play / Pause
* Seek bar (timeline)
* Volume control
* Fullscreen toggle (for video)
* Captions/Subtitles (when available)
* Audio tracks (when available)
---
## Syntax
### Get the controls property:
```javascript
let isControlsEnabled = mediaObject.controls;
```
### Set the controls property:
```javascript
mediaObject.controls = true | false;
```
---
## Property Values
| Value | Description |
| :--- | :--- |
| `true` | Specifies that the standard media controls should be displayed. |
| `false` | Default. Specifies that the standard media controls should not be displayed. |
---
## Technical Details
| Detail | Description |
| :--- | :--- |
| **Return Value** | A Boolean value: `true` if controls are displayed, `false` otherwise. |
| **Default Value** | `false` |
| **DOM Level** | HTML5 Media Element |
---
## Code Examples
### Example 1: Enabling Controls via JavaScript
This example demonstrates how to dynamically enable the standard controls for a video element using JavaScript.
```html
Enable Video Controls Example
``` ### Example 2: Toggling Controls and Checking Status You can also toggle the state of the controls and check their current status programmatically. ```javascript const myVid = document.getElementById("myVideo"); // Toggle controls myVid.controls = !myVid.controls; // Log the current status to the console console.log("Are controls visible? " + myVid.controls); ``` --- ## Browser Support The `controls` property is supported by all modern web browsers: * Google Chrome * Mozilla Firefox * Microsoft Edge / Internet Explorer 9+ * Safari * Opera *Note: Internet Explorer 8 and earlier versions do not support the HTML5 `
``` ### Example 2: Toggling Controls and Checking Status You can also toggle the state of the controls and check their current status programmatically. ```javascript const myVid = document.getElementById("myVideo"); // Toggle controls myVid.controls = !myVid.controls; // Log the current status to the console console.log("Are controls visible? " + myVid.controls); ``` --- ## Browser Support The `controls` property is supported by all modern web browsers: * Google Chrome * Mozilla Firefox * Microsoft Edge / Internet Explorer 9+ * Safari * Opera *Note: Internet Explorer 8 and earlier versions do not support the HTML5 `