Overview

The Media Toolkit Player is a highly configurable, enterprise-grade video widget for Mendix powered by Video.js. It goes beyond simple video playback to deliver a complete media experience, making it the perfect solution for LMS applications, onboarding portals, training systems, and media-rich dashboards.

Key Use Cases:

* Corporate Training & LMS: Build Netflix-style or Udemy-style course players with collapsible modules and active lesson tracking.

* Onboarding Portals: Guide new employees through a structured series of videos with automatic progress saving.

* Documentation & SOPs: Provide step-by-step instructional videos with multi-language subtitle support.

Core Capabilities:

* Dynamic Nested Playlists: Organize your videos into flat lists or deeply nested hierarchical modules dynamically using simple string delimiters.

* Smart Resume Playback: Automatically saves the user's exact timestamp when they pause, finish, or switch videos—drastically reducing database load compared to continuous tracking.

* Robust Subtitle Support: Native support for WebVTT subtitles directly from Mendix FileDocuments, allowing users to toggle closed captions seamlessly.

* Universal Media Support: Stream media from Mendix FileDocuments, direct URLs, raw Base64 strings, or adaptive HLS streams.

* Extremely Customizable: Designed with semantic CSS classes and variables, ensuring it blends perfectly into your existing Mendix Atlas UI themes.

Documentation

Typical usage scenario

The Media Toolkit Player is designed for Mendix applications that require an enterprise-grade video experience beyond simple single-video playback. It is highly useful for Corporate Learning Management Systems (LMS), employee onboarding portals, SOP/documentation dashboards, and media-rich training platforms. It solves the problem of organizing large libraries of videos by providing a built-in, nested dynamic playlist UI, allowing users to watch a sequence of training videos without ever leaving the page. Additionally, it solves database performance issues related to resume-playback tracking by intelligently saving progress only on pause, finish, or video switch.

Features and limitations

Features:

* Dynamic Playlists: Interactive, clickable video playlists with support for left or right panel positioning.

* Nested Module Hierarchy: Organize your playlist into collapsible sections using simple string delimiters (e.g., "Module 1/Lesson 1").

* Smart Resume Playback: Prevents excessive database polling by triggering save events only when necessary.

* Native Subtitles: Full WebVTT subtitle support loaded directly from Mendix FileDocument entities.

* Universal Source Support: Play videos from FileDocuments, direct URLs, Base64 strings, or YouTube links.

* HLS Streaming: Built-in adaptive HLS (.m3u8) streaming support for optimal cross-platform and mobile viewing.

Limitations:

* Subtitle files must be in valid WebVTT (.vtt) format. Standard .srt files must be converted before uploading to Mendix.

* Video player colors and themes must be customized via standard CSS overrides in your Mendix theme package.

Dependencies

* Mendix Studio Pro 9.24.0 or higher (Optimized for Mendix 10).

* No external Marketplace module dependencies required.

Installation

1. Click Download to import the widget into your Mendix project.

2. In Mendix Studio Pro, press F4 (App > Synchronize App Directory) to ensure the widget is registered.

3. Open a page in your app, search for Media Toolkit Player (or Dynamic Playlist Player) in the Toolbox, and drag it onto your page.

Configuration

1. Context: Place the widget inside a DataView (e.g., a CourseSession entity).

2. Playlist Data Source: Navigate to the Playlist tab in the properties and map your database entity containing your video records.

3. Video Source: Map the Video URL, Base64 string, or FileDocument attributes so the player knows what to render.

4. Grouping (Optional): To create a nested, Udemy-style playlist, map a string attribute to the Group Name property formatted with slashes (e.g., Module 1/Basics).

5. Resume Playback (Optional): Go to the Events tab and map a Nanoflow to the Save Position action. The widget will pass the exact timestamp to this Nanoflow when the user pauses or switches videos.

Known bugs

* When using YouTube URLs, a postMessage origin warning may occasionally appear in the browser developer console. This is a harmless and standard behavior from the YouTube iframe API and does not impact playback or performance.

Frequently Asked Questions

Q: Why are my subtitles not loading or throwing a "Malformed WebVTT" error?

A: Ensure your subtitle file is a valid .vtt file and starts with the exact word WEBVTT on the very first line. Additionally, verify that your user role has standard Read access to your Subtitle entity in the Domain Model, otherwise Mendix security will block the file download.

Q: How do I create a flat playlist instead of a nested one?

A: Simply leave the Group Name property empty (or mapped to an empty string) in your playlist configuration. The widget will automatically render a standard flat list instead of a collapsible module view.