Native App Integration

Overview

The glomex Video Player can be seamlessly integrated into native mobile applications using WebViews. This guide provides implementation details for both React Native and native iOS applications.

Integration Approach

To successfully integrate the glomex player within a native app:

Load the player from the publisher’s domain
Use either:
- A full article page that includes the glomex integration
- A dedicated page that extends the player to the document’s full width and height

💡

The document must be hosted on the publisher’s domain, for example: https://www.publisher.com/glomex/integration.html?playlistId=PLAYLIST_ID&integrationId=INTEGRATION_ID

Example Implementation

integration.html


<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=5"
    />
    <title>glomex Integration</title>
    <script>
      const urlSearchParams = new window.URLSearchParams(window.location.search);
      document.write(
        '<link rel="canonical" href="https://player.glomex.com/integration/1/integration.html?integrationId=' +
          (urlSearchParams.get('integrationId') || '') +
          '&playlistId=' +
          (urlSearchParams.get('playlistId') || '') +
          '">'
      );
    </script>
    <style>
      html {
        font-family: system-ui, sans-serif;
        width: 100%;
        height: 100%;
      }
      body {
        margin: 0;
        width: 100%;
        height: 100%;
      }
      ::-webkit-scrollbar {
        display: none;
      }
    </style>
  </head>
  <body tabindex="-1">
    <script>
      import('https://player.glomex.com/integration/1/integration.js');
      const urlSearchParams = new window.URLSearchParams(window.location.search);
      const integration = document.createElement('glomex-integration');
      integration.setAttribute('integration-id', urlSearchParams.get('integrationId'));
      integration.setAttribute('playlist-id', urlSearchParams.get('playlistId'));
      document.body.appendChild(integration);
    </script>
  </body>
</html>

Monetization in Native Apps

For monetization within the WebView, explicit user consent is required. This can be signaled using an IAB TCF string.

The glomex player reads the consent string through the IAB TCF API:


window.__tcfapi('ping', 2, (pingReturn) => {});
window.__tcfapi('addEventListener', 2, () => {});

For more information, see the IAB TCF documentation .

The app must inject the TCF API into the WebView to enable monetization. Please refer to your WebView documentation for instructions on custom JavaScript code injection.

💡

Debugging Tip: To verify that your TCF implementation is working correctly within the WebView, you can use the TCF debugging script from our GDPR documentation. This script can be injected into the WebView to check if the CMP is properly configured and responding as expected.

Implementation Examples

React Native

You can load a document with the glomex player from the publisher’s domain with React Native as follows:

PlayerComponent.jsx


const PlayerComponent = () => {
  return (
    <WebView
      source={{
        uri: 'https://www.publisher.com/glomex/integration.html?playlistId=PLAYLIST_ID&integrationId=INTEGRATION_ID'
      }}
      style={styles.webview}
      allowsInlineMediaPlayback={true}
      allowsFullscreenVideo={true}
      allowsProtectedMedia={true}
      mediaPlaybackRequiresUserAction={false}
      useWebKit={true}
    />
  );
};

After loading, you can position and scale the WebView within your app as needed.

Native iOS Integration

For native iOS apps, the glomex player can be directly integrated using WKWebView. To accomplish this, a document from the publisher’s domain needs to be loaded.

Recommended Settings

Enable Inline Media Playback

By default, iPhones display videos in fullscreen with native controls. Override this by setting:

WebViewConfig.swift


webViewConfig.allowsInlineMediaPlayback = true

See WKWebViewConfiguration.allowsInlineMediaPlayback in Apple’s documentation.

Disable User Interaction Requirement for Playback

To allow automatic playback without requiring user interaction:


webViewConfig.mediaTypesRequiringUserActionForPlayback = []

See WKWebViewConfiguration.mediaTypesRequiringUserActionForPlayback in Apple’s documentation.