MediaController
Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.
The HTMLMediaElement.controller property represents the media controller assigned to the element.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
MediaController Deprecated Non-standard | | | | 6 | | 6 |
controller Deprecated Non-standard The HTMLMediaElement.controller property represents the media controller assigned to the element. | 17 | | | 6 | 18 | 6 |
buffered Deprecated Non-standard | | | | 7 | | 7 |
currentTime Deprecated Non-standard | | | | 7 | | 7 |
defaultPlaybackRate Deprecated Non-standard | | | | 7 | | 7 |
duration Deprecated Non-standard | | | | 7 | | 7 |
MediaController Deprecated Non-standard `MediaController()` constructor | | | | 6 | | 6 |
muted Deprecated Non-standard | | | | 7 | | 7 |
pause Deprecated Non-standard | | | | 6 | | 6 |
paused Deprecated Non-standard | | | | 7 | | 7 |
play Deprecated Non-standard | | | | 6 | | 6 |
playbackRate Deprecated Non-standard | | | | 7 | | 7 |
playbackState Deprecated Non-standard | | | | 7 | | 7 |
played Deprecated Non-standard | | | | 7 | | 7 |
seekable Deprecated Non-standard | | | | 7 | | 7 |
unpause Deprecated Non-standard | | | | 7 | | 7 |
volume Deprecated Non-standard | | | | 7 | | 7 |
- This feature was removed in a later browser version (36)
- This feature was removed in a later browser version (36)
Syntax
<!-- Synchronous playback (legacy) --> <video src="video.mp4" mediagroup="sync"></video> <audio src="commentary.mp3" mediagroup="sync"></audio>Live demo
Synchronized media idea
Show the intent of controlling multiple media elements as one timeline.
Why it stayed niche
Explain why many products coordinate media state in application code instead.
Modern alternative
Use application state to coordinate multiple players when you need full control.
Use cases
-
Use MediaController
Use MediaController when standard HTML needs a more specific platform feature, semantic signal, or browser capability.
-
Handle edge cases
Apply MediaController to solve a focused requirement without redesigning the whole page architecture.
Cautions
- Test MediaController in your target browsers and input environments before depending on it as a primary behavior.
- Provide a fallback path or acceptable degradation strategy when support is still limited.
Accessibility
- Make sure MediaController supports the intended task without making the page harder to perceive, understand, or operate.