Seamless Video Playback in Mendix Native Apps using Brightcove: A Complete Integration Guide

Seamless Video Playback in Mendix Native Apps using Brightcove: A Complete Integration Guide

Introduction

Nowadays, many large enterprises and organizations rely on video to communicate with their employees and users. Platforms like Brightcove are widely used by major corporations to host and stream internal updates, training sessions, and leadership messages securely. If you’re working with clients in such environments, it’s highly likely that video content is hosted on Brightcove.

Initially, we explored creating a custom pluggable widget using libraries like react-native-video and react-native-brightcove-ima-player to integrate Brightcove in our Mendix Native app. However, we faced significant challenges, including build issues and playback inconsistencies.

After further research and experimentation, we discovered a more reliable and maintainable approach: using Brightcove’s Playback API with a policy key to fetch the direct MP4 video link and passing it to the Mendix Native Video Player widget. This simplified integration while preserving performance and compatibility.

In today’s enterprise mobile apps, video playback is no longer a nice-to-have feature — it’s a necessity. Whether it’s employee communications, marketing content, or product walkthroughs, video content needs to be seamless, responsive, and reliable. While Mendix Native provides basic video capabilities, integrating an enterprise-grade video platform like Brightcove introduces several challenges.

In this blog, I’ll Walk you through how I successfully integrated Brightcove video playback in a Mendix Native mobile application, tackling real-world issues such as ExoPlayer conflicts, missing MP4 links, and platform-specific playback issues. If you’re a Mendix developer working with native apps and rich media, this guide is for you.

Why Brightcove?

Brightcove is a widely adopted enterprise video platform offering:

  • High-quality adaptive streaming

  • Advanced analytics

  • DRM support

  • Advertising integrations (IMA)

  • Extensive API capabilities

However, unlike YouTube or Vimeo, Brightcove doesn’t provide a simple MP4 URL that you can plug into Mendix out of the box. Instead, you need to fetch the video source programmatically using their Playback API.

Common Challenges Faced

Here are the major roadblocks I encountered:

1. NoClassDefFoundError (ExoPlayer related)

While integrating react-native-video or react-native-brightcove-ima-player, I encountered this error:

java. lang.NoClassDefFoundError: Failed resolution of:

Lcom/google/android/exoplayer2/Player$EventListener

This error is typically due to version mismatches between different ExoPlayer dependencies.

2. Missing Direct MP4 Link

Brightcove APIs don’t return a direct link to the MP4 video by default. You must:

  • Authenticate using OAuth

  • Call the Playback API to fetch sources

  • Parse the response to filter for "video/mp4"

3. Playback Issues on iOS

  • Multiple videos playing simultaneously

  • Playback controls not rendering properly

  • Full-screen controls behaving inconsistently

These issues needed workarounds at the widget level and in native configuration.

Step-by-Step Integration

Step 1: Fetching MP4 URL from Brightcove Playback API

How to Get a Brightcove Policy Key

A Policy Key is required to access the Brightcove Playback API. Here’s how to obtain one:

1. Open Brightcove Studio and log in : Visit https://studio.brightcove.com and enter your login information.

2. Navigate to Admin > API Authentication : This section lists all the API clients associated with your account.

  • 3. Click on ‘Add Client’ (if needed):

  • Name the client, for example, "Mendix Native Playback."

  • Assign permissions like Playback API: Read

  • 4. Generate Policy Key :

  • Once created, go to the Policy Keys section under Admin

  • Choose your client and generate a new policy key

  • You’ll get a string like: BCpkADawqM...

5. Use this key in your API requests :

BCOV-Policy: BCpkADawqM...your_key_here...

With this policy key, you can now contact the Playback API.

Instead of using OAuth authentication, Brightcove also supports using a Policy Key to fetch video playback URLs via their Playback API. This method is easier to implement and manage within Mendix microflows.

1. Call Playback API with Policy Key

 GET https://edge.api.brightcove.com/playback/v1/accounts/{account_id}/videos/
 {video_id}BCOV-Policy:

2. Parse Response for MP4

 {
 "sources": [
     {
     "src": "https://path-to-video.mp4",
     "type": "video/mp4"
     }
 ]
 }

Use this src URL as the input for the Mendix Video Player widget.

Step 2: Bind MP4 Link to Mendix Native Video Player Widget

1. Use a microflow or nanoflow to make the API call and store the MP4 URL in an attribute.

2. Add the Native Video Player widget in your Mendix Native page.

3. Attach the video source to the property that you filled in using the API.

Note : If you’re using a custom widget (like one built using react-native-video), you can pass this dynamic URL via the widget’s property binding.

Step 3: Fix ExoPlayer Conflicts

  • Ensure consistent ExoPlayer versions:

implementation 'com.google.android.exoplayer:exoplayer-core:2.18.1'

implementation 'com.google.android.exoplayer:exoplayer-ui:2.18.1'

  • Clean node_modules, android/build, and re-run npm install

  • Sync Gradle and rebuild the app

Step 4: Improve User Experience

Prevent Multiple Video Playback:

Use React state or props to pause other videos when one starts.

Control Visibility of Buttons:

Overlay custom buttons using TouchableOpacity components.

Make Responsive:

Use Dimensions API or percentage widths to make the player adapt to screen size.

Testing and Optimization

  • Test on both Android & iOS using real devices.

  • Monitor buffering time and memory usage.

  • Use lightweight placeholder images until the video is ready to play.

Conclusion

Integrating Brightcove into Mendix Native is challenging but possible. With the right combination of API integration, widget customization, and platform-specific tuning, you can deliver smooth video experience in your native mobile apps.

By sharing this guide, I hope to save fellow Mendix developers countless hours of debugging and trial-and-error. If you test this integration or have any questions, please let me know; I'd be pleased to assist you!

-