The modern video player
for the web.

FlexPlayer Studio

Customise your player in real-time and generate the perfect embed code.

Configuration

How do configuration keys work?
Enter Your Configuration Key
Config Saved to Cloud!
Your unique key (copied to clipboard):
Core Assets
Layout & Styling
Watermark & Credits
Player Controls & Features
Show Brand/Title
PiP Mode
Fullscreen
Mute
Settings
Speed
Quality
Subtitles / CC

Format: Label, lang_code, url, isDefault (e.g., English, en, https://..., true)

Pick Hue
Pick Hue
Ambient Mode
HDR Enhancement
Color Enhancement
Annotations

QUICK ADD ANNOTATION

Format: start, end, text [url], position

Ads Configuration

QUICK ADD AD

Sleep
Stable Vol
Loop
Network
Shortcuts
Advanced
Debug Mode

Generated Source

-- characters

Engineered for performance

Everything you need to deliver premium video experiences.

Adaptive HLS

Seamless playback of .m3u8 streams with automatic quality switching based on network conditions.

Liquid Glass UI

A stunning, minimal interface with ambient glow, crisp typography, and buttery smooth animations.

Real-Time Analytics

Built-in tracking for active viewers, total loads, and watch time using Edge Redis.

Zero Dependencies

Just drop in a script tag and a div. The API generates the HTML, CSS, and JS on the fly.

Advanced Error Recovery

User-friendly error messages and automatic recovery for network drops or format issues.

Custom Sharing

Fully customizable share URLs and messages across Twitter, Facebook, WhatsApp, and LinkedIn.

Keyboard Controls

Full keyboard accessibility with hotkeys for playback, volume, seeking, and fullscreen mode.

Picture-in-Picture

Native Picture-in-Picture mode lets viewers keep watching while they browse other tabs.

Playback Controls

Adjustable video playback speeds and high-quality rendering for a personalized viewing experience.

Live Network Insights

Real-time telemetry powered by Upstash Redis.

Active Viewers
--

Watching right now

Total Player Loads
--

All time

Total Watch Time
--

Across all videos

Live Integration Blueprint

Your live generated embed setup. Copy and paste.

Live Integration Blueprint

Studio Sync Enabled

This snippet reflects your current Studio configuration in real-time. Use Attribute Mode for legibility or Config Mode for optimized, single-attribute deployments.

Support Open Source

FlexPlayer is 100% free and open source. If you find it useful, consider supporting our work.

Sponsor

GitHub Sponsors

Support our ongoing development and get exclusive badges.

  • Sponsor badge on your profile
  • Prioritized bug fixes

Donate

Buy Us a Coffee

A simple one-time donation to show your appreciation.

  • Quick and easy
  • Helps cover server costs
  • Much appreciated!

Contribute

Code & Docs

Help us improve FlexPlayer by submitting pull requests.

  • Star the repo
  • Report issues and bugs
  • Submit pull requests
View on GitHub

Frequently Asked Questions

Everything you need to know about FlexPlayer.

Does FlexPlayer support HLS and DASH?

Yes, FlexPlayer has native support for HLS (.m3u8) streams. DASH support is provided via our modular streaming core.

Can I use my own CDN?

Absolutely! FlexPlayer is purely a frontend interface. You can serve your video files from anywhere, including S3, Cloudflare, Mux, or your own servers.

Is it really 100% free?

Yes. It is fully open source under the MIT license with no usage limits. You can host it yourself or use our free CDN distribution.

Is it compatible with React/Vue/Angular?

Yes. FlexPlayer provides a vanilla JS SDK that can easily be mounted inside components of any frontend framework.