SDK Embedding

This document explains how to embed a VMS player into your page via the JS SDK Embedding.

Javascript

Copy-paste the javascript <script> into the <body> part of the html page as the last script element.

<script src="https://vms-embed.rtl.de/embed/v1/sdk.min.js" id="vms-sdk-javascript">
{
    "client": "rtl"
}
</script>

HTML

Add the data attributes to the HTML Video Container to configure the embedding of the VMS player.

Attribute	Description	Default	Mandatory
data-vms-video-id	The ID of the video		yes

<video controls data-vms-video-id="5d5db5661d90da5cd9228f92">
    <source src="https://url-to-the-video.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

Communication between SDK and Page

Events dispatched by the SDK

Event	Description	Payload
rtl_video_sdk_error_load_config_not_found	The global configuration for the SDK could not be found.
rtl_video_sdk_error_load_config_parse_error	The global configuration for the SDK could not be parsed.
rtl_video_sdk_error_load_config_validation	The global configuration for the SDK could not be validated.	{message: <string>}
rtl_video_sdk_error_load_player_scripts	The CBC Video Player Scripts could not be loaded within the given timeout.
rtl_video_sdk_constructed	The SDK is successfully constructed.
rtl_video_sdk_video_elements_selected	The Video Elements on the page were selected.

Listen to Events from SDK

Examples

<script type="application/javascript">
    window.addEventListener("rtl_video_sdk_constructed", function(event) {
        console.log("page listened to: " + event.type);
    });

    window.addEventListener("rtl_video_sdk_video_elements_selected", function(event) {
        console.log("page listened to: " + event.type);
    });
</script>

Events dispatched by the page

Event	Description	Payload
rtl_video_page_tcf_ready	Fired when TCF of the page is ready
rtl_video_page_tcf_error	Fired when TCF of the page has an error
rtl_video_page_ac_ready	Fired when Ad Control of the page is ready

Dispatch Events to the SDK

Examples

<script type="application/javascript">
    window.dispatchEvent(
        new CustomEvent("rtl_video_page_tcf_ready", { detail: {} })
    );

    window.dispatchEvent(
            new CustomEvent("rtl_video_page_ac_ready", { detail: {} })
    );
</script>