App Integration

This guide provides detailed steps for embedding the LiSA player in a WebView for Android, iOS, and React Native. It includes recommendations for optimal settings, message communication using postMessage / message handlers, and considerations for UI and media playback.

General WebView Considerations

When embedding the LiSA Player in a WebView, ensure the following settings are configured:

✅ Allow JavaScript

WebViews should enable JavaScript to ensure the LiSA Player runs as expected.

✅ Allow Media to Play Inline

Configure the WebView to allow media (e.g., videos) to play inline rather than forcing fullscreen playback.

✅ Media Playback Should Not Require User Interaction

Ensure autoplay (especially for muted videos) works without requiring explicit user interaction.

✅ Avoid Bounce (Scroll Overdraft)

Prevent the "bounce" effect when scrolling beyond the content's boundaries, ensuring a smoother user experience.

✅ Enable Local Storage & Session Storage

WebViews should allow localStorage and sessionStorage to persist user preferences and session data.

✅ Enable Caching for Improved Performance

WebView caching should be enabled to reduce redundant network requests and improve performance.

✅ Enable Communication

Use postMessage or message handlers for bi-directional communication between the LiSA Player and the host app.