MediaController
The playback of multiple <video> or <audio> elements can be coordinated by a MediaController instance, for example to synchronize a sign-language interpreter track with the main video track. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Overview
The playback of multiple <video> or <audio> elements can be coordinated by a MediaController instance, for example to synchronize a sign-language interpreter track with the main video track. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
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.
Related links
Powered by web-features