Skip to main content
Your SDK Description - Documentation

JavaScript SDK Docs JavaScript SDK Docs

OverlayController

Class that encapsulates the work that needs to be done to render a MediaOverlay. To create custom overlays, create a new class that extends this, and register it with the media player. Then, create a MediaOverlay object with your newly registered overlay type and any custom parameters, and add it to a MediaUnit.

Constructor

new OverlayController(overlay) → {OverlayController}

Constructs a new OverlayController instance.

Parameters:
Example
class CustomOverlayController extends OverlayController {
   load() {
     // Set the overlay's width and height
     this.overlay.width = 'auto';
     this.overlay.height = 'auto';

     // Create an image
     this.imageView = document.createElement('img');
     this.imageView.src = imageUrl;

     // Add the image to the overlay's element
     this.view.appendChild(this.imageView);
   }
}

player.controllerRegistry.registerOverlayController(CustomOverlayController, 'customc');

const unit = new MediaUnit(videoUrl);
const overlay = new MediaOverlay('customc');

unit.addOverlay(overlay);

Members

overlay :MediaOverlay

The MediaOverlay object that owns this controller.

(readonly) view :HTMLElement

The HTML div that this controller can manipulate. This is automatically positioned on top of the player active area depending on settings in the MediaOverlay.

(readonly) wasAddedToDOM :boolean

Has the controller view been attached to the browser DOM?

Methods

(async) .load()

Method that gets invoked when the overlay starts running. Override this in your OverlayController extension to do the work that needs to be done when your overlay needs to be displayed during media playback.

(async) .overlayWillBeRemoved()

Method that gets invoked before the overlay is removed from rendering. Override this in your OverlayController extension to do cleanup work when the overlay is done displaying.

(async) .preload()

Method that gets invoked when the overlay starts preloading. Override this in your OverlayController extension to do the work that needs to be done when your overlay gets preloaded during media playback.

(async) .update()

Method that gets invoked every second, while the overlay is displayed. Override this in your OverlayController extension to do recurring work or update the view elements displayed.