FlexPlayer Studio

1

Core Integration

First: Add this core script tag to your HTML <head> or before the closing </body> tag. You only need to do this once per page.

Second: Place the player embed div where you want the video to appear. You can use either media-player-embed or flex-player as the class name.

2

Ambient Mode Setup

Create an immersive glow effect that bleeds out of the player. Customize the intensity and scope using these attributes:

data-ambient="true" - Enable the glow engine
data-ambient-blur="80" - Blur radius in pixels (best: 30-120)
data-ambient-opacity="1.0" - Transparency of the glow (0.0 to 1.0)
data-ambient-saturation="1.4" - Color boost multiplier
data-ambient-bleed="true" - Allow glow to extend outside player bounds

3

Interactive Annotations

Add popup messages at specific timestamps. Format is comma-separated: start, end, content [url], position

data-annotations="..." - Use \n to separate multiple entries
[URL] - Wrapping text in brackets creates a clickable link
Positions: top-left, top-center, top-right, center, bottom-left, bottom-center, bottom-right

4

Multi-Language Subtitles

Support VTT tracks with custom appearance. Format: Label, lang, url, isDefault

data-subtitles-size="18px" - Font sizing (supports px, rem, %)
data-subtitles-color="#ffffff" - Text track hex color
data-subtitles-bg-opacity="0.6" - Background box intensity

5

Watermarking & Credits

Add brand protection and production credits. Supports clickable logos and linked contributors.

data-watermark-url="..." - Image source for logo (PNG/SVG recommended)
data-watermark-pos="..." - top-right, top-left, bottom-right, bottom-left
data-writers="..." - Comma list: Name [Link], Name

6

Custom Share Link

By default, the share button uses the current page URL. You can override this to share a specific standalone player link or promotional URL.

data-share-url="..." - The specific URL that will be sent to Twitter, Facebook, or the clipboard.
data-share-text="..." - Pre-filled message for social media sharing.

7

Programmatic Control

For advanced web apps, use the JavaScript SDK to mount the player dynamically with full configuration control.

window.FlexPlayer.mount('#container-id', { videoSrc: 'https://...', title: 'My Video', ambient: true, annotations: [ { start: 0, end: 10, text: 'Hello!', position: 'center' } ], controls: { pip: true, fullscreen: true } });

8

Full Automation (Dynamic Swapping)

Update or swap your video source along with all metadata, subtitles, and watermarks dynamically using the update method.

// Programmatically sync all features at once window.FlexPlayer.update('#my-player', { videoSrc: 'https://cdn.com/new-video.m3u8', thumbnailSrc: 'https://cdn.com/poster.jpg', title: 'Automated Insight #42', subtitles: [ { label: 'English', lang: 'en', url: '/subs/v2_en.vtt' } ], annotations: [ { start: 15, end: 25, text: 'New Tip Detected!', position: 'top-right' } ], watermark: { imageUrl: '/new-logo.svg', clickUrl: 'https://new-campaign.com' } });

Updating Share URLs dynamically

If you are building a Single Page Application (SPA), you may want to update the native share buttons when routes change without reloading the whole media player.

9

Local Configuration (config.json)

For cleaner deployment, move your entire configuration to a separate JSON file. This is highly recommended for complex setups with many annotations or subtitle tracks.

data-config-url="player-config.json" - Point the player to any hosted JSON file.

<div class="media-player-embed" data-config-url="/path/to/player-config.json"> </div>

// player-config.json format: { "videoSrc": "https://...", "title": "Config via JSON", "ambient": true, "controls": { "stableVolume": true, "shortcuts": false } }

10

Debug Mode

Enable verbose logging in the browser console for integration troubleshooting and event tracking.

data-debug="true" - Activates console logs for playback, analytics, and error events

11

Cloud Sync & Configuration Keys

The Cloud Sync feature allows you to save your entire studio configuration—including custom styles, annotations, and watermark settings—to our secure cloud storage.

Cloud Save - Generates a unique 10-character key and copies it to your clipboard.
Load - Entering your key in the studio restores all fields and designer states instantly.

Tip: These keys are perfect for moving your work between devices or sharing complex setups with collaborators without sending long code blocks.

Automation & Overrides: When using a data-config-key, any other data- attributes explicitly set on the element will override the cloud settings. This allows you to use a master template key while dynamically changing specific values like data-video-src or data-title for different pages.

Example: Master template with dynamic override

Documentation