WebToNative
  • Getting started
  • Plugin Setup
    • OneSignal Set Up
    • Google AdMob Setup
    • In App Purchase - iOS Setup
    • In App Purchase - Android Setup
    • Firebase Notification Integration - iOS Setup
  • Social Login Integrations
    • Getting the SHA Key for Google Login
    • Create Google OAuth Client Id
    • Facebook Login Configuration
  • Javascript APIS
    • Getting Started
    • Status Bar
    • Pull To Refresh
    • Close App
    • Device Info
    • Clear App Cache
    • OneSignal Push Notification
    • Download Files
    • Printing Options
    • AdMob
    • Geo Location
    • Load In External Browser
    • Barcode Scan
    • In App Purchase - iOS Integration
    • In App Purchase - Android Integration
    • Social Login
    • Facebook App Events
    • Bottom Navigation
    • Clipboard
    • Screen Control
    • Background Location
    • Native Contacts
    • iOS App Tracking Transparency
    • Google Firebase Analytics
    • Haptic Feedback
    • Google Firebase Notification
    • Apps Flyer
    • App Review
    • Calender - iOS
    • Calendar - Android
    • Biometric Authentication
    • Media Player
    • Notification View
    • Offer Card
    • Cookie Update
    • App Launch Detection
    • Download Manager
    • Dynamic App Icon
    • File Sharing
  • Website Plugins
    • Wordpress
      • Push notification (WooCommerce)
      • In-App Purchase
        • In-App Purchase (IAP) Configuration Guide for iOS and Android
        • In-App Purchase (WooCommerce)
        • In-App Purchase
      • Offercard
      • Biometric Authentication
      • Social Login
      • Webtonative media player
        • WebToNative Radio Player
        • MediaPlayer Native Control
    • Bubble.io
      • Customize Status Bar
      • Device-Based Element Visibility
      • Pull to Refresh (Android)
      • OneSignal Push Notification
        • Set External ID
        • Send Push Notification
        • Set/Remove Email or SMS Phone
        • Set Tag
      • Close App
      • Get Device Info
      • Clear App Cache (Android)
      • Screen Control
      • Facebook Events
        • Regular
        • Purchase
      • AdMob
      • Offercard
      • In-App Purchase
        • In-App Purchase (Android/iOS)
        • Get IAP Canceled Subscription List (iOS)
      • Social Login
      • Biometric Authentication
  • Shopify
    • Social Login
    • In-App Purchase
      • In-app purchase
    • Push Notification
      • Abandoned Cart
    • Status Bar Customization
    • Native Device Visibilty
    • Set Onesignal Tags
    • Pull to Refresh
    • Account Deletion
    • Biometric Authentication
  • Upload Apps
    • Android App
    • Ios App
Powered by GitBook
On this page
  • Features
  • How to Use
  • Advanced Features
  • Troubleshooting

Was this helpful?

  1. Website Plugins
  2. Wordpress
  3. Webtonative media player

MediaPlayer Native Control

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.

PreviousWebToNative Radio PlayerNextBubble.io

Last updated 4 months ago

Was this helpful?

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.

  • Enable or disable:

    • Audio Monitoring: Controls for <audio> elements.

    • Video Monitoring: Controls for <video> elements.

  • 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:

<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.