Html5 graphics overlay to the bitmovin player

Support
1

In this experiment we’ll take the standard bitmovin web player, and overlay a lower-third provided by Singular Live. It could equally come from other Html5-overlay-graphics solutions, to display a scoreboard, click-to-shop, or other interactions.

In this case the Singular Live overlay resides on : bitmovin test - Singular.live Control App Output and is a simple animated alpha channel overlay containing different ways to make contact

image
image717×445 61.5 KB

1 Like
2

METHOD 1: simply wrap the player div and the url-overlay iframe in the player-wrapper.

<div class="player-wrapper">
	<div id="player"></div>
	<iframe id="url-overlay" class="url-overlay" src="https://app.overlays.uno/output/5REI7sAhd4BjjPFXj9eKaH"></iframe>
</div>

Set each child element as position: absolute so that each element can be rendered respectively against the parent element

#player,
.url-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

And finally adjust the z-index (to ensure the overlay is located on top of the player) and disable the pointer-events if required

.url-overlay {
  z-index: 10;
  pointer-events: none;
}

Note:

  • this approach is intended for web/mobile web only.
  • On mobile native, we can do the same approach by having a player-ui fork to implement the same solution with mobile webview as Custom HTML5 UI.
  • other SDKs will need similar consideration
3

METHOD 2: bring in the Singular Overlay SDK library for more granular control

	<script src="https://app.singular.live/libs/singularoverlay/1.0.0/singularoverlay.js"></script>

Set child element position:

#player,
#SingularOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Adjust the z-index:

#SingularOverlay {  
z-index: 2; }
.bmpui-ui-controlbar { 
z-index: 3;}

Configure the overlay with javascript:

// Configure Singular Overlay SDK
let options = {
  class: "iFrameClass",
  interactive: true,
  syncGraphics: true,
  showPreloader: false,
  aspect: "",
};

let overlay = SingularOverlay("#SingularOverlay", options, (params) => {
  console.log("Overlay Created");
});

overlay.setContent({
  appOutputToken: "****replace with Singular's output token****"
},(params) => {
  console.log("Content Loaded - params:", params);
});

overlay.addListener("message", (params) => {
  console.log("message: ", params.type);
  if (params.type === "backgroundClick") {
    console.log("Overlay SDK: message from composition - params.type:", params.type);
    if (player.isPlaying()) {
      player.pause();
    } else {
      player.play();
    }
  }
});
1 Like
4

That’s a great “best practice” example for integrating overlays into the Bitmovin player.
Thanks for sharing it!

1 Like
5

and @thomas1 , if people want more information on your product, where should they look?

6

@adrian,
The Singular Developer Portal is a good start for an overview of available APIs and SDKs. For integrating Singular overlays with video players, the Overlay SDK’s “Getting Started” section.

2 Likes