> For the complete documentation index, see [llms.txt](https://docs.webtonative.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webtonative.com/website-plugins/wordpress/webtonative-media-player/mediaplayer-native-control.md).

# WordPress Media Player Controls Guide

***

The plugin integrates your website's media player with native device media controls. It allows you to monitor and control audio and video playback seamlessly through native controls on your mobile.

## Features

1. **Audio Monitoring**: Automatically integrates with all `<audio>` elements on your site.
2. **Video Monitoring**: Automatically integrates with all `<video>` elements on your site.
3. **Native Device Control**: Syncs playback, pause, and stop actions with native device media controls.
4. **Dynamic Media Detection**: Automatically monitors new audio/video elements added dynamically to your site.

***

## How to Use

1\. Configure Settings

* Navigate to **Settings** → **WTN MediaPlayer Controls**.

<figure><img src="/files/a9EbBuFPRMuC1Tb7Ypde" alt="" width="167"><figcaption></figcaption></figure>

* Enable or disable:
  * **Audio Monitoring**: Controls for `<audio>` elements.
  * **Video Monitoring**: Controls for `<video>` elements.

<figure><img src="/files/2Mti4E8r5xepPrRCMlRk" alt=""><figcaption></figcaption></figure>

* Click **Save Changes**.

#### 2. Native Media Controls

* Ensure your app integrates with the **Webtonative MediaPlayer** framework.
* Use `data-thumbnail` attribute on your media elements to provide thumbnail images for native controls.

Example:

```html
<audio src="audio.mp3" data-thumbnail="thumbnail.jpg" controls></audio>
<video src="video.mp4" data-thumbnail="thumbnail.jpg" controls></video>
```

***

## Advanced Features

* **Dynamic Monitoring**: Automatically detects and integrates new `<audio>` or `<video>` elements added to your page.
* **Device Integration**: Works seamlessly with Webtonative's MediaPlayer functions.

***

## Troubleshooting

* **MediaPlayer Not Found**: Ensure the Webtonative MediaPlayer library is included in your app.
* **No Controls Appearing**: Verify that monitoring is enabled in the plugin settings.

***