Skip to main content

Dynamic Configuration

Sometimes, it doesn't make sense to hard-code the distributionId into the configuration, especially if you want to use the same configuration across multiple pages. In this case there are a few options:

note

When specifying a distributionId either statically or by specifying it in an attribute, the distributionId is the ID of the distribution from the SourceSync platform. This means, you must have obtained it and stored it in your own application to be provided in the page.

Using attribute​

You can use a custom attribute on the video element to specify the distributionId. For this, you can specify the attribute option in the configuration, and ensure that the attribute is present on the video element that is reference by el.

Example​

<video
    data-sd-video
    data-sd-distribution-id="getting-started"
    src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
    autoplay 
    muted
    controls
></video>

Here is the configuration for that HTML.

const config = {
    el: 'video[data-sd-video]',
    attribute: 'data-sd-distribution-id',
    strategy: 'direct-iframeless'
}

Using a clientId​

You can specify a clientId in the configuration, which is your own identifier that is associated with the distribution. When you specify a clientId, you must also specify your organizationId.

note

As of the time of this writing, clientId is only available for those who have data feed integrations with SourceSync. If you are interested in this feature, please contact your SourceSync representative.

Static Example​

While this is not a dynamic example, it's important to understand that a literal clientId may be used in the configuration.

Here is an example of a static clientId configuration where we specify the value my-client-id.

const config = {
    el: 'video[data-sd-video]',
    clientId: 'my-client-id', // the literal clientId value
    organizationId: 1234
}

By Video attribute​

This example shows an example where your clientId is stored in a custom attribute on the video element.

Here is the HTML:

<video
    data-sd-video
    data-media-uuid="my-client-id"
    src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
    autoplay 
    muted
    controls

And here is the matching configuration to extract the clientId from the data-media-uuid attribute.

const config = {
    el: 'video[data-sd-video]',
    clientId: {
        selector: 'video[data-sd-video]',
        attribute: 'data-media-uuid'
    }
}

By any selector's attribute​

What if your clientId is not on the video element? You can specify a selector that is different from the el selector to extract the clientId.

If your clientId happens to be stored on the document body, you can specify the selector as body and the attribute as data-media-uuid.

Here is the HTML:

<body data-media-uuid="my-client-id">
    <video
        data-sd-video
        src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
        autoplay 
        muted
        controls
    ></video>
</body>

And here is the matching configuration to extract the clientId from the data-media-uuid attribute on the body element.

const config = {
    el: 'video[data-sd-video]',
    clientId: {
        selector: 'body',
        attribute: 'data-media-uuid'
    }
}

Extracting with RegEx​

If you need to extract the clientId from a more complex string, you can use a regular expression to extract the value.

Here is the HTML:

<body data-media-uuid="my-client-id-1234">
    <video
        data-sd-video
        src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
        autoplay 
        muted
        controls
    ></video>
</body>

And here is the matching configuration to extract the clientId from the data-media-uuid attribute on the body element.

const config = {
    el: 'video[data-sd-video]',
    clientId: {
        selector: 'body',
        attribute: 'data-media-uuid',
        regex: 'my-client-id-(\d+)'
    }
}

In this example, the regex option is used to extract the numeric portion of the clientId from the attribute value. So, the clientId would be 1234.

Using innerText​

If your clientId is not stored in an attribute, but in the inner text of an element, you can specify the innerText option.

Here is the HTML:

<body>
    <div data-info style="display:none">my-client-id-1234</div>
    <video
        data-sd-video
        src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
        autoplay 
        muted
        controls
    ></video>
</body>

And here is the matching configuration to extract the clientId from the inner text of the div element.

const config = {
    el: 'video[data-sd-video]',
    clientId: {
        selector: 'div[data-info]',
        innerText: true,
        regex: 'my-client-id-(\d+)'
    }
}

In this example, the regex option is used to extract the numeric portion of the clientId from the inner text of the element. So, the clientId would be 1234.