Two ways to run an Ad

A linear Ad takes the picture. A non-linear Ad shares it.

A linear Ad replaces the programme for as long as it runs: the viewer cannot see the match, and the programme comes back when the Ad ends. That is the break everybody knows, and it still works. A non-linear Ad is drawn into a box over a programme that never stopped. Same break, same inventory, and the picture underneath keeps running.

And what goes inside one of those boxes

• 4 Ads in one break
• 3 shapes: still image, concurrent video, linear at full frame

Three shapes because that is what this minute plays, not because the mechanism has three. A layout declares where each box sits over the picture, which is a geometry and not a list of names.

The signalling class

One playlist. One tag. Four Ads, and the match never stopped.

The programme carries a single EXT-X-DATERANGE of a custom class. An unmodified hls.js plays it; a library on top reads the asset-list the tag points at, and draws each Ad into the box the layout declares — over the picture, without replacing it.

• A break carries several Ads, and they play in the order the asset-list declares them.
• Every box is declared as percentage insets of the picture, and the programme is one of those boxes: the primary content is an element of the layout like any other.
• An element can be a video or a still image, and this minute plays both.
• Audio is declared per element, so each box arrives with its own volume, and the composition keeps one control for all of it.
• The concurrent class never changes the length of the timeline. Nothing is skipped and nothing is added: the Ad is drawn over a clock that was already running.

It does not replace the interstitial. It stands next to it. com.apple.hls.interstitial goes on meaning exactly what it means today. The concurrent class is its sibling and not an extension of it: in HLS the class of a Date Range is compared as an exact string, so a client that has never heard of com.qualabs.hls.concurrentInterstitial ignores it. That is not a limitation to work around. It is what lets both be served at once — one playlist can carry the two tags at the same START-DATE, and each client keeps the one it understands, which is what the other demo in this repository shows with two players side by side. Inside the break the same thing holds: an ASSET with no layout block is a full-frame Ad, played down the same code path. The interstitial we are used to is one of the options, not the thing being taken away.

One media playlist, and it carries both.

• EXT-X-DATERANGE com.apple.hls.interstitial
• EXT-X-DATERANGE com.qualabs.hls.concurrentInterstitial

Same START-DATE, one ID each.

A client in the market today

plays com.apple.hls.interstitial

The class it does not know is compared as an exact string, with no inheritance to fall back on, so it goes straight past it. The Ad replaces the programme, exactly as it does today, and not one option of the player had to change.

The same client, with the library on top

plays com.qualabs.hls.concurrentInterstitial

Same hls.js and the same version: the new class is read by a library on top of the player and not by a change inside it. The Ad is drawn into the box the layout declares, and the programme underneath keeps running.

The signalling, as it is served

Read off this page’s own playlist, right now.

Not an illustration. The tag below is the one in the media playlist this player is playing, and the JSON is the asset-list it fetched.

loading…