HTML5 Overlay: overview and quick start

The HTML5 Overlay plugin brings browser-based graphics into a Medialooks Video SDK pipeline. It renders an HTML page with the SDK's Chromium Embedded Framework (CEF) runtime and composites the result over your video. Use it for lower thirds, tickers, scorebugs, titles, dashboards and other animated graphics.

You can load your own HTML/CSS/JavaScript, or design graphics visually in MLCG Editor and load the editor's published output URL. Your MPlatform or MFormats application remains responsible for video playback, processing and output.

Capabilities and integration points

The plugin is an embeddable browser renderer and video compositor, not a standalone graphics scheduler. Use the following map to choose the API needed by your application; the installed samples provide working implementations of these integration points.

Integration boundaries: a browser navigation or REST response is not a painted-frame acknowledgement. Page animation does not automatically follow source-video pause or seek. WebGL enablement is not a guarantee that the complete SDK path is GPU-only or reaches a particular frame rate. Web APIs, web-media codecs, protected playback and third-party site behavior depend on the bundled runtime and the page; do not assume compatibility with every feature of desktop Chrome.

1. 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 default installation folders are C:\Program Files (x86)\Medialooks\MPlatform SDK and C:\Program Files (x86)\Medialooks\MFormats SDK. The paths below use those defaults; adjust them if you selected a different installation folder.

A remote URL supplies the page, assets and control data; the SDK's browser runtime renders that page on the SDK machine. In the MLCG sample workflow, source-video playback remains in the Video SDK application.

Load pages you own or trust. Page JavaScript runs in the SDK browser, and the application bridge can expose host operations. Keep control credentials outside page URLs and injected scripts.

2. Try a URL in the installed SDK sample

You do not need to write HTML or C# to try the plugin. Open a video in the corresponding 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. Screenshots show the installed SDK samples; minor UI details can vary by release.

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

Why does the website cover the video? A normal website has an opaque background; this is expected. Click Props beside the HTML controls. In the properties list, double-click a property's value, enter the new value and press Enter. Set dst.w and dst.h to 45% for a smaller panel; optionally set dst.x and dst.y to 5% to move it away from the top-left edge. A transparent lower-third page leaves the rest of the picture visible without this resize.

You can enter another page URL, including YouTube, in the same field. External sites may require consent or login and may restrict autoplay or playback; use the Medialooks website for the first navigation test, and your own graphics/output URL for an on-air overlay.

3A. MPlatform: the integration in code

The Playlist sample attaches the HTML5 plugin to an MPlaylist object. With videoPath, pagePathOrUrl (for example, https://www.medialooks.com) and a valid preview HWND supplied by your application:

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();

The same principle applies to an MFile or MLive pipeline: attach the plugin to the source whose frames your downstream receiver consumes.

3B. MFormats: the integration in code

MFormats uses an application-owned frame loop. Create the reader, plugin and preview once, then pass each input frame through the plugin before sending the result to the receiver:

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);

The following is one iteration of an existing, cancellable worker loop—not a loop to run on the UI thread. Handle end-of-file and application shutdown in the owner of that loop.

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 uses an unlimited source wait. Keep frame acquisition off the UI thread and retain the sample's shutdown/source-close handling; a cancellation flag alone cannot interrupt a blocked call. These fragments show the integration points, not a complete application. Create the browser once, not for every video frame.

4. Use your own graphics or MLCG Editor

Replace the test website URL with your HTML graphics URL or a local HTML file. For a transparent overlay, the page's CSS background must be transparent; enabling plugin transparency does not remove a website's own opaque background.

To design graphics visually, use MLCG Editor. Publish a session and copy its HTML output URL, not the editor or Library URL. The MLCG HTML REST samples demonstrate real templates, editable data and animation controls. The optional C# REST client changes session data and animation; it does not render video.

5. Prepare before going on air

BrowserPageLoad starts loading the page. Returning from that call, or receiving a page-load event, does not prove that every font/image is ready or that an exact video frame has been painted.

• 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.

When closing, stop new work and drain in-flight operations before detaching/closing the browser. Close receivers before their source, release every owned frame, and release the COM objects your application owns. Never close or final-release the plugin from its own synchronous callback.

6. Match the page to the video canvas

The plugin composites into video frames, not the preview window's desktop size. Match the page's design canvas and the video format used before HTML composition. The MLCG samples fit sources to HD1080 with aspect-preserving letterboxing before applying graphics.

Use plugin properties for destination placement, opacity, crop or zoom when required. For a full-frame overlay, a typical explicit placement is:

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

For exact options, scope and initialization timing, use the properties reference. Changing an HWND's size alone does not correct an incorrect media canvas.

Troubleshooting your first overlay

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.