## HTML Audio/Video DOM mediaGroup Property
The `mediaGroup` property is a part of the HTML5 Audio/Video DOM reference. It allows developers to group multiple media elements (such as `
` and ``) together so that their playback can be synchronized.
---
## Definition and Usage
The `mediaGroup` property sets or returns the name of the media group to which an audio or video element belongs.
By assigning the same group name to multiple media elements, you can link them together. This is particularly useful for scenarios like:
* Playing a video alongside a separate, synchronized audio commentary track.
* Synchronizing multiple camera angles of the same event.
* Playing sign-language interpretation videos alongside a main video.
---
## Syntax
### Get the mediaGroup property:
```javascript
let groupName = audioOrVideoObject.mediaGroup;
```
### Set the mediaGroup property:
```javascript
audioOrVideoObject.mediaGroup = "group_name";
```
### Property Values
| Value | Description |
| :--- | :--- |
| `group` | A string specifying the name of the media group to which the audio/video element belongs. |
### Technical Details
| Return Value | Description |
| :--- | :--- |
| **String** | A string representing the name of the media group. If no group is set, it returns an empty string (`""`). |
---
## Code Example
The following example demonstrates how to group two separate video elements together under the same media group named `"test"` using JavaScript:
```html
Your browser does not support the video tag.
Your browser does not support the video tag.
```
---
## Browser Support and Considerations
| Feature | Chrome | Edge/IE | Firefox | Safari | Opera |
| :--- | :--- | :--- | :--- | :--- | :--- |
| **`mediaGroup`** | Yes | Yes | Yes | Yes | Yes |
### Developer Notes & Best Practices
* **Specification Status:** While the `mediaGroup` property is part of the HTML5 specification, native browser implementation for automatic synchronization (e.g., pausing one video automatically pauses the other in the same group) can be inconsistent across different browser engines.
* **Alternative Solutions:** For robust, production-ready synchronization across all browsers, developers often use JavaScript libraries or custom event listeners (monitoring the `play`, `pause`, and `timeupdate` events) to manually keep multiple media elements in sync.