Banner Advertisements (Beta)

Add the <dl8-advertisement> tag as a child of a <dl8-video> tag.

It requires the attribute on-request-advertisement to be present, which takes a function identifier as a value (see Javascript section for more information about the function implementation).

<dl8-video>
	...
	<dl8-advertisement on-request-advertisement="requestAdvertisement">
</dl8-video>

You can define a custom function which acts as a binding layer between the player and your ad provider. This function is called every time the player can display a certain advertisement spot. Information about the spot is passed in the requirement object, passed as a first parameter. Hints are provided in a second object, for contextualized information that could be used to make better decisions on the ad type that is ultimately requested and finally a callback is passed that needs to be called with the final data of what to display. Note that if you don’t want a certain spot to be filled you should call the callback function with null. Below you will find the details needed to implement each part:

Sample

function requestAdvertisement(requirement, hints, callback) {
   switch (requirement.spot) {
      case 'DESKTOP_PAUSE_CENTRE_RECTANGLE_300X250': {
         ...
         const advertisement = // Fetch your advertisement from ad network
         ...
         // or callback(null) when no ad should be displayed
         return callback({
            type: //advertisement type
            payload: {
               uri: //advertisement source uri
               adLink: // advertisement url link (only for type image)
            }
         })
      }
      ... // Other cases implementation
   }
}

requirement (object)

An object that provides information about what spot should be filled, please refer to it to provide a well defined callback object

Requirement object sample:

{
   spot: 'DESKTOP_PAUSE_CENTRE_RECTANGLE_300X250',
   type: ['image']
}

spot (String)

Spot identifier which can be used, for example, in a switch statement to fetch a different asset for this specific spot

type (Array)

Array of available types for the advertisement asset. Values can be image and/or iframe

hints (Object)

An object that provides hints about the state of the player. Useful for data manipulation upon certain conditions, before firing the callback function

hints = {
   screen: {
      width: Integer (px) // Player width,
      height: Integer (px) // Player height,
      fullscreen: Boolean,
      portrait: Boolean,
      vrActive: Boolean
   },
   device: {
      mobile: Boolean,
      tablet: Boolean,
      android: Boolean,
      ios: Boolean,
      ie: Boolean,
      vr: Boolean
   }
}

callback (Function)

A function that must be called with an object as the first parameter that adheres to the following structure:

{
   type: String,
   payload: {
      uri: String,
      adLink: String			
   }
}