> 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

Configure native media player controls with the WebToNative WordPress plugin. Enable lock screen and notification playback controls for your app.

***

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="https://46162361-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MbRbEDU7JrvMAgg52AY%2Fuploads%2FZW39XHFqT4KQ9lZgE0oo%2FScreenshot%202025-01-03%20at%202.31.26%E2%80%AFPM.png?alt=media&amp;token=5a1a9d49-7adf-4aa8-a3ae-7d7c603b4895" alt="" width="167"><figcaption></figcaption></figure>

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

<figure><img src="https://46162361-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MbRbEDU7JrvMAgg52AY%2Fuploads%2FNPFJZGVN4Fb9Vj7gApo6%2FScreenshot%202025-01-03%20at%202.40.07%E2%80%AFPM.png?alt=media&amp;token=f313d1da-e299-4838-8a47-aa830ac86a06" 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.

***