HTML5 Overlay: overview and quick start

Use the HTML5 Overlay plugin to render a web page over video in your MPlatform or MFormats application. It runs the page locally with the SDK's Chromium Embedded Framework (CEF) runtime, then composites the result into the video frames.

Build lower thirds, tickers, scorebugs, titles and dashboards with your own HTML/CSS/JavaScript. Or design them visually in MLCG Editor and load a published output URL. MLCG is optional; your SDK application still owns video playback, processing and output.

In this guide: try a URL, integrate with MPlatform, integrate with MFormats, or troubleshoot an overlay.

What the plugin can do

Render and place graphics

• Load a hosted page, local HTML file or HTML string with BrowserPageLoad or BrowserHtmlDisplay. See browser control.
• Render HTML/CSS/JavaScript, SVG, Canvas and supported WebGL content. The page defines the design and animation; the bundled CEF runtime determines browser support. See browser options.
• Composite the page before preview, recording, streaming or device output: use PluginsAdd in MPlatform or IMFProcess.ProcessFrame in MFormats.
• Position, resize, fade, crop or zoom the result with dst.x/y/w/h, dst.alpha, crop, zoom and transparency. See composition properties.

Control the page from your application

• Update data or styles without navigating again: BrowserJavascriptExecute and BrowserCSSSet. See application-to-page control.
• Forward mouse and keyboard input with BrowserMouseClick/Move/Wheel and BrowserKeyEvent. Map preview coordinates to the page explicitly. See input forwarding.
• Reload, go back or forward, stop navigation, and close the renderer with BrowserCommand and BrowserClose. See lifecycle guidance.

Exchange events and host data

• Send page readiness and UI events to C# through OnEventSafe and cef_plugin.put_event; receive supported host events with set_on_event. See events and readiness.
• Expose frame information or host-supplied images with cef_plugin.set_on_frame, parse_parameters and set_on_image. See frame and image callbacks.
• Read or write selected host properties through cef_plugin.props_get/props_set. Keep synchronous property reads out of animation loops, and expose host operations only to trusted pages. See the host-property bridge.

Configure the browser or choose another workflow

• Set storage, cache, logging and browser behavior through PropsSet/PropsGet. See CEF configuration recipes.
• Control page audio with cef.mute_audio. This is separate from source audio and preview monitoring; check the final SDK output. See page audio and capabilities.
• Use HTML itself as a live video source through Medialooks WebCapture and MLive/MFLive. See HTML5 as a video source.
• Use MLCG for visual design and REST-controlled session data and animation. Start with the MLCG workflow and samples and MLCG.RestControl.

The plugin renders and composites pages; it is not a graphics scheduler. Browser animation and source-video time are separate. WebGL does not guarantee a GPU-only pipeline or a particular frame rate, and bundled CEF support can differ from desktop Chrome for web APIs, media codecs, protected playback and third-party sites.

Before you start

• Install and register the corresponding MPlatform or MFormats SDK, including the HTML5 Overlay plugin and matching CEF runtime. Normal SDK and plugin licensing applies.
• The walkthrough below uses the installed x64 samples. For your own application, match the SDK/runtime architecture.
• To build the C# examples, reference MPLATFORMLib for MPlatform or MFORMATSLib for MFormats. Do not mix their types or lifecycle models. Building the MLCG HTML REST samples also requires Visual Studio/MSBuild, .NET Framework 4.7.2 targeting tools and NuGet restore.
• Make the page, fonts, images and other dependencies accessible from the machine running the SDK application. For MLCG workflows, that includes the MLCG service, normally https://cg.medialooks.com.

The paths below use the default installation folders: C:\Program Files (x86)\Medialooks\MPlatform SDK and C:\Program Files (x86)\Medialooks\MFormats SDK. Adjust the root if you installed elsewhere.

A remote server supplies the page, assets and control data; CEF renders them on the SDK machine. Source-video playback stays in your Video SDK application.

Load pages you own or trust. Page JavaScript can access operations exposed through the host bridge. Never put control credentials in page URLs or injected scripts.

Try a URL over video

For a quick check without writing code, open a video in either SDK sample, enter https://www.medialooks.com and enable HTML overlay.

MPlatform: Playlist Sample x64

Launch Playlist Sample x64 from the SDK shortcuts, or open:

C:\Program Files (x86)\Medialooks\MPlatform SDK\Samples Advanced\C#\Playlist Sample\bin\x64\Debug\Playlist Sample.exe

1. Click Add File and select a video file.
2. Click Play and confirm that the video appears in the preview.
3. In the URL field beside HTML overlay, enter https://www.medialooks.com.
4. Enable HTML overlay. The sample loads the website and composites it into the playlist's video.
5. To load a different URL while the overlay is enabled, edit the URL and press Enter. Disable HTML overlay to remove it.

Playlist Sample x64 with the Medialooks website displayed as a smaller panel over the video. Destination width and height are 45%, with a 5% inset, configured through Props.

Source project:

C:\Program Files (x86)\Medialooks\MPlatform SDK\Samples Advanced\C#\Playlist Sample\Playlist Sample.csproj

MFormats: File Playback Sample x64

Launch File Playback Sample x64 from the SDK shortcuts, or open:

C:\Program Files (x86)\Medialooks\MFormats SDK\Samples\C#\Sample File Playback\bin\x64\Debug\Sample File Playback.exe

1. Click Load File and select a video file.
2. Click Play and confirm that the video appears in the preview.
3. In the URL field beside HTML overlay, enter https://www.medialooks.com.
4. Enable HTML overlay. The sample processes video frames through the plugin before sending them to preview.
5. When the overlay is already enabled, press Enter after changing the URL. Disable HTML overlay to remove it.

File Playback Sample x64 with the website at 45% destination width and height, configured through Props.

Video in both screenshots: Big Buck Bunny, Blender Foundation, CC BY 3.0.

Source project:

C:\Program Files (x86)\Medialooks\MFormats SDK\Samples\C#\Sample File Playback\Sample File Playback.csproj

Make an opaque page smaller

A normal website covers the video because its background is opaque. To display it as a smaller panel:

1. Click Props beside the HTML controls.
2. Double-click a property's value, change it, and press Enter.
3. Set dst.w and dst.h to 45%.
4. Optionally set dst.x and dst.y to 5% for a top-left inset.

A transparent lower-third page leaves the rest of the video visible without this resize.

The URL field also accepts other pages, including YouTube. Third-party sites may require consent or login, or restrict autoplay and playback. Use the Medialooks website for a navigation check and your own graphics/output URL for on-air use.

Integrate with MPlatform

Attach the HTML5 plugin to the source consumed by your receiver. This example uses an MPlaylist; the same attachment model applies to MFile or MLive.

Your application supplies videoPath, pagePathOrUrl (such as https://www.medialooks.com) and a valid preview HWND:

using MPLATFORMLib;

var source = new MPlaylistClass();
var overlay = new MFOverlayHTMLClass();
var preview = new MPreviewClass();

MItem item;
int index = -1; // Append to the playlist.
source.PlaylistAdd(null, videoPath, "", ref index, out item);
System.Runtime.InteropServices.Marshal.ReleaseComObject(item);
source.PluginsAdd(overlay, 0);
overlay.PropsSet("transparency", "true");
overlay.BrowserPageLoad(pagePathOrUrl);

preview.PreviewWindowSet("", previewWindowHandle);
preview.PreviewEnable("", 1, 1);
preview.ObjectStart(source);
source.FilePlayStart();

Integrate with MFormats

Your application owns the frame loop. Create the reader, plugin and preview once:

using MFORMATSLib;

var reader = new MFReaderClass();
var overlay = new MFOverlayHTMLClass();
var preview = new MFPreviewClass();

reader.ReaderOpen(videoPath, "");
overlay.PropsSet("transparency", "true");
overlay.BrowserPageLoad(pagePathOrUrl);
preview.PreviewWindowSet("", previewWindowHandle);
preview.PreviewEnable("", 1, 1);

In each worker-loop iteration, pass the input frame through the plugin, then send the result to preview. Run this off the UI thread and handle end-of-file and shutdown in the loop's owner:

MFFrame input = null;
MFFrame processed = null;
try
{
    // Wait for the next frame on the playback worker.
    reader.SourceFrameGet(-1, out input, "");
    if (input != null)
    {
        int framesRemaining;
        ((IMFProcess)overlay).ProcessFrame(
            input, out processed, out framesRemaining, "");
        preview.ReceiverFramePut(processed ?? input, 5000000, "");
    }
}
finally
{
    // These frame references are owned by this iteration.
    if (processed != null && !ReferenceEquals(processed, input))
        System.Runtime.InteropServices.Marshal.ReleaseComObject(processed);
    if (input != null)
        System.Runtime.InteropServices.Marshal.ReleaseComObject(input);
}

-1 waits indefinitely for the next source frame. A cancellation flag cannot interrupt that blocked call, so retain the sample's source-close and shutdown handling. These are integration fragments, not a complete application; do not recreate the browser for each frame.

Choose your graphics workflow

For your own design, replace the test URL with an HTML graphics URL or local file. Both the page's CSS background and plugin transparency must allow transparency; a plugin setting cannot remove an opaque CSS background.

For visual design, use MLCG Editor, publish a session, and copy its HTML output URL—not its editor or Library URL.

The MLCG HTML REST samples show real templates, editable data and animation controls. The optional C# REST client controls session data and animation; the HTML5 plugin still renders the graphics.

Prepare graphics before going on air

BrowserPageLoad begins navigation. Its return, and a page-load event, do not establish font/image readiness or acknowledge an exact painted video frame.

• For your own page, send a custom ready event after the resources and application state you require are ready. See Browser control and events.
• For MLCG, use the complete sample's prepare-hidden → scene/resource-ready → one REST Restart → reveal workflow. Avoid an autoplay start immediately followed by a second restart.
• Keep page loading, HTTP calls and UI work out of synchronous media callbacks. Serialize SDK control operations on the application's SDK owner.

For shutdown, stop new work and let in-flight operations finish. Detach/close the browser only after its users have stopped. Close receivers before their source, release owned frames and COM objects, and never close or final-release the plugin inside its synchronous callback.

Match graphics to the video canvas

Composition uses the video-frame size, not the preview window's desktop size. Match the design canvas to the video format before applying HTML. The MLCG samples fit sources to HD1080 with aspect-preserving letterboxing at this stage.

For an explicit full-frame destination:

overlay.PropsSet("dst.x", "0%");
overlay.PropsSet("dst.y", "0%");
overlay.PropsSet("dst.w", "100%");
overlay.PropsSet("dst.h", "100%");

For placement, opacity, crop, zoom and initialization timing, use the properties reference. Resizing the preview HWND alone does not fix a mismatched media canvas.

Troubleshooting your first overlay

Symptom	Check first
Video plays, but graphics are missing	The plugin is on the consumed video path; the URL is an output page; page resources are accessible; the overlay is visible and has finished application-level preparation.
A rectangle hides the video	The HTML/CSS background and output background are transparent, and the design is an overlay rather than an opaque fullscreen card.
Position or scale is wrong	The design resolution, converted video format, destination rectangle and page zoom—not only preview-window dimensions.
REST connects, but no sessions appear	The token can access published sessions. An account's design Library and its published sessions are different lists.
Updates appear in other outputs too	MLCG data/animation commands address a shared session. Use separate sessions or private Demo instances for independent operators.
Animation and video pause differently	Browser/REST animation and the source-video clock are separate. Loading a page does not automatically provide frame-accurate synchronization.

Continue with your workflow

• Design with MLCG Editor and try the SDK samples
• Control MLCG graphics from C# with the REST client
• Control your own HTML page and exchange events
• Configure HTML5 Overlay properties
• Use HTML5 as a video source

Explore the MLCG template gallery for real default designs, animated previews and editable-content examples.