Videos

To request a video with headless ads, you can use the request builder to define the parameters of your placement and some helper methods to Deserialize the response. Because there is a diversity of video players available, headless ads provides helpers to deserialize VAST video markup so that you can build a video player from scratch

Simple Videos

To handle the simplest use case, use the RequestBuilder to create a video request. The bidder's response will have an adm field with VAST XML:

import { initSurfsideCore, RequestBuilder, DeserializeVast } from '@surfside/ads-core';

const { bidder } = initSurfsideCore();

try {
    const response = await bidder.requestBids(
        (new RequestBuilder())
            .withVideo(
                800, 600, /* Width, Height */
                5, 30 /* Min duration, max duration */
            )
            .build()
    );

    const vast = DeserializeVideo(response);
    if(vast === null) { /* DeserializeVideo returns null if there was an issue with the response */
        console.error("Failed to load video!");
        return;
    }

    /* DeserializeVideo returns an object in Vast 4.0 format */
    const url = vast.ads[0].inline.creatives[0].mediaFiles[0].url;

    /* Construct an HTML5 video element */
    const video = document.createElement('video');
    video.src = url;
    video.width = 800;
    video.height = 600;

    document.body.appendChild(video);

} catch(e) {
    console.error("Failed to get bids!") // Bidder throws an error if no bids are returned
}

Other fields are available, such as event tracking callback URLs and other creative files that may have been returned by the bidder

Adding more details

The RequestBuilder allows you to add more details to you bid request, such as adding a Surfside Context or additional OpenRTB 2.6 fields:

import { initSurfsideCore, RequestBuilder, DeserializeVast } from '@surfside/ads-core';

const { bidder } = initSurfsideCore();

try {
    const response = await bidder.requestBids(
        (new RequestBuilder())
            .withSurfContext( /* Surfside context for site-specific targeting */
                '00000', /* Account ID, site ID, location ID, zone ID */
                'iddqd',
                '12345',
                'abcde'
            )
            .withVideo(
                800, 600, /* Width, Height */
                5, 30, /* Min duration, max duration */
                ['video/webm'], /* Specify which video MIMEs you want to support */
                {
                    pos: 4,      /* Additional OpenRTB 2.6 Video fields */
                    placement: 2
                }
            )
            .build()
    );

    const vast = DeserializeVideo(response);
    if(vast === null) { /* DeserializeVideo returns null if there was an issue with the response */
        console.error("Failed to load video!");
        return;
    }

    /* DeserializeVideo returns an object in Vast 4.0 format */
    const url = vast.ads[0].inline.creatives[0].mediaFiles[0].url;

    /* Construct an HTML5 video element */
    const video = document.createElement('video');
    video.src = url;
    video.width = 800;
    video.height = 600;

    document.body.appendChild(video);

} catch(e) {
    console.error("Failed to get bids!") // Bidder throws an error if no bids are returned
}