DASH Overlays
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.
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:
<link rel="stylesheet" href="https://nightly-dot-shaka-player-demo.appspot.com/dist/controls.css">
<script src="https://nightly-dot-shaka-player-demo.appspot.com/dist/shaka-player.ui.js"></script>
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>
<!-- If we want to cover less than full frame, what is the full frame -->
<xs:element name="Viewport" type="XYType" minOccurs="0" maxOccurs="1"/>
<!-- Top Left of the overlay, in viewport coordinates -->
<!-- Depends on Viewport being present -->
<xs:element name="TopLeft" type="XYType" minOccurs="0" maxOccurs="1"/>
<!-- Size of the overlay, in viewport units -->
<!-- Depends on Viewport being present -->
<xs:element name="Size" type="XYType" minOccurs="0" maxOccurs="1"/>
<!-- Reduce current video to a percentage of its size -->
<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"/>
<!-- HTML w/png/apng/avif, non-segmented video, DASH MPD -->
<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"/>
<!-- if -1, we display on background, shrinking the current video. -->
<!-- if 0, we display on current video, but not on alternative presentation. -->
<!-- if 1, we display over either current video or over alternative presentation. -->
<xs:attribute name="z" type="xs:integer" default="1"/>
<!-- what to do with the event: "start", "stop", "extend" -->
<xs:attribute name="mode" type="xs:token" default="start"/>
<!-- if we are modifying a previous event, the @id of this event -->
<xs:attribute name="refID" type="xs:unsignedInt"/>
</xs:complexType>
</xs:schema>
MPD example with iframe content
<MPD mediaPresentationDuration="PT634.566S" minBufferTime="PT2.00S" profiles="urn:hbbtv:dash:profile:isoff-live:2012,urn:mpeg:dash:profile:isoff-live:2011" type="static" xmlns="urn:mpeg:dash:schema:mpd:2011" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="urn:mpeg:DASH:schema:MPD:2011 DASH-MPD.xsd">
<BaseURL>https://dash.akamaized.net/akamai/bbb_30fps/</BaseURL>
<Period>
<EventStream schemeIdUri="urn:scte:dash:scte214-events" timescale="1000">
<Event presentationTime="3000" id="123" duration="5000">
<OverlayEvent uri="https://www.qualabs.com/" mimeType="text/html" earliestResolutionTime="0"></OverlayEvent>
</Event>
</EventStream>
<AdaptationSet mimeType="video/mp4" contentType="video" subsegmentAlignment="true" subsegmentStartsWithSAP="1" par="16:9">
<SegmentTemplate duration="120" timescale="30" media="$RepresentationID$/$RepresentationID$_$Number$.m4v" startNumber="1" initialization="$RepresentationID$/$RepresentationID$_0.m4v"/>
<Representation id="bbb_30fps_1280x720_4000k" codecs="avc1.64001f" bandwidth="4952892" width="1280" height="720" frameRate="30" sar="1:1" scanType="progressive"/>
</AdaptationSet>
<AdaptationSet mimeType="audio/mp4" contentType="audio" subsegmentAlignment="true" subsegmentStartsWithSAP="1">
<Accessibility schemeIdUri="urn:tva:metadata:cs:AudioPurposeCS:2007" value="6"/>
<Role schemeIdUri="urn:mpeg:dash:role:2011" value="main"/>
<SegmentTemplate duration="192512" timescale="48000" media="$RepresentationID$/$RepresentationID$_$Number$.m4a" startNumber="1" initialization="$RepresentationID$/$RepresentationID$_0.m4a"/>
<Representation id="bbb_a64k" codecs="mp4a.40.5" bandwidth="67071" audioSamplingRate="48000">
<AudioChannelConfiguration schemeIdUri="urn:mpeg:dash:23003:3:audio_channel_configuration:2011" value="2"/>
</Representation>
</AdaptationSet>
</Period>
</MPD>