DASH Overlays

Client-side graphic overlays are to a degree a reincarnation of the banner ads plaguing the web since the '90's. Their main use is not necessarily ad-related -- they are used in a variety of roles from station identification to localization to emergency notification. Their traditional implementation in the video was inserting them in baseband (i.e., pre-transcoder) in a playout system, which is the least scalable and the highest-latency approach possible in the video world.

Overlays at Demuxed 2024

This presentation by Alex Giladi, a Comcast Fellow and editor of MPEG-DASH, discusses the evolution of ad insertion technologies and explores the potential of extending these techniques to client-side overlays.

Discover some of the most powerful use cases for Overlays

Warning Alert with HTML Overlay

By using the HTML overlays inserted in the MPD, it is possible to alert all users of any threat that may be near their home or the location where they are viewing the content.

Add your logo in any FAST channel

Using your VOD library to create FAST channels is a great way to monetize your content. Now, with Overlays, it’s also possible to add your logo without the need to pre-process the video. In this example, you can see an overlay of a video with transparency on top of the FAST channel content

Picture-in-Picture Sports Match Overlay

Two important sporting events happening at the same time? Create Picture-in-Picture experiences showcasing these events on the MPD so your customers don't need to do more channel surfing.

Ad Overlays

With Overlays, you can monetize your content seamlessly by displaying ads directly over your videos using HTML or video Overlays.

Synchronized overlay content

By enabling communication between the main content and the HTML overlay, it is possible to create overlays synchronized with the main content. Thanks to this, we can create identical experiences for all users.

Picture-in-Picture Sign Language Video

As overlays can be videos you can make content accessible for everyone adding sign language interpretation to your videos by doing a Picture-in-Picture.

Overlays in action

Through events signaled within the MPD, it is proposed to allow the player to announce Overlay Events based on HTML content, images or videos with transparency. These events enable a wide range of use cases, such as inserting logos for FAST channels, adding banners with ads, interactive content like scoreboards for sports events, Picture-in-Picture videos, among many other use cases.

It is also important to note that in other events, it is possible to update the content of an already existing overlay. This way, the video content and the overlay will always remain synchronized regardless of the specific latency of each player.

dash.js Overlays demo

Shaka Player Overlays demo

Alvaro Velad Galván

A special thanks to Alvaro, Advanced Research Engineer at Ateme, for implementing Overlays and Alternative MPD in Shaka Player, contributing to the advancement of these standards, and for his collaboration with us during the implementation of both features.

To try out Shaka Player with the latest features you can use the Nightly builds by adding the following scripts in your site:

Technical details

Within the MPD, it will be possible to send Overlay events, which can be videos or HTML content. In this events it's also possible to squeeze the main content, show L-Shaped ads or place the overlays on top of the video. The Overlays is signaled inside in a Event.

This schema is not yet finalized, but it has a lot of potential, and we are eager to hear you and learn about other use cases in order to create a specification.

Overlays prototipe schema

<?xml version="1.0" encoding="UTF-8"?>

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified">

<xs:complexType name="XYType">

<xs:attribute name="x" type="xs:unsignedInt" use="required"/>

<xs:attribute name="y" type="xs:unsignedInt" use="required"/>

</xs:complexType>

<xs:complexType name="OverlayEvent">

<xs:sequence>

<xs:element name="Viewport" type="XYType" minOccurs="0" maxOccurs="1"/>

<xs:element name="TopLeft" type="XYType" minOccurs="0" maxOccurs="1"/>

<xs:element name="Size" type="XYType" minOccurs="0" maxOccurs="1"/>

<xs:element name="SqueezeCurrent" minOccurs="0" maxOccurs="1">

<xs:complexType>

<xs:attribute name="percentage" type="xs:float" use="required"/>

</xs:complexType>

</xs:element>

</xs:sequence>

<xs:attribute name="uri" type="xs:anyURI" use="required"/>

<xs:attribute name="mimeType" type="xs:token" use="required"/>

<xs:attribute name="earlestResolutionTime" type="xs:float" use="required"/>

<xs:attribute name="loop" type="xs:boolean" default="false"/>

<xs:attribute name="z" type="xs:integer" default="1"/>

<xs:attribute name="mode" type="xs:token" default="start"/>

<xs:attribute name="refID" type="xs:unsignedInt"/>

</xs:complexType>

</xs:schema>

MPD example with iframe content

<BaseURL>https://dash.akamaized.net/akamai/bbb_30fps/</BaseURL>

</Event>

</EventStream>

</AdaptationSet>

</Representation>

</AdaptationSet>

</Period>

</MPD>