Vidzone HTML5 SDK

Initialization

1. Install library

npm install vidzone-sdk

2. Create and init instance of VidzoneSDK:

import VidzoneSDK from 'vidzone-sdk';

const vidzoneSDK = new VidzoneSDK()

vidzoneSDK.init().then(function () {
    //now we are ready to generate nonce 
})

3. After init has been done and before start loading stream URL - request for nonce:

vidzoneSDK.generateNonce({
    adWillAutoPlay: true,
    adWillPlayMuted: false,
    playerType: "player name",
    playerVersion: "version",
    ppid: "your platform name",
    sessionId: "some UUID",
    url: "https://some.com/some/page",
    videoHeight: 1080,
    videoWidth: 1920,
}).then(function (manager) {
    //start playback and pass nonce
    console.log("nonce generated: ", manager.getNonce())
    startPlayback(manager)
}).catch(function (err) {
    //log error and try to fix
})

Parameters Description

| Name | Type | Description | |-----------------|--------|------------------------------------------------------------------------------------------------------------------------------------------------------------| | adWillAutoPlay | bool | Set to true if the ad will be auto-played without waiting for user interaction. Set to false if the ad will wait for user interaction before being played. | | adWillPlayMuted | bool | Set to true if the ad will be played while muted. Set to false if the ad will play unmuted. | | playerType | string | Your player name. | | playerVersion | string | Your player version. | | ppid | string | Your platform name + geo. | | sessionId | string | The session ID is a temporary random ID. It is used exclusively for frequency capping on connected TVs (smart TVs, game consoles, and set-top-boxes). | | pageUrl | string | The URL to which the ads will be targeted. By default, this is the same as the page that will display the ads, but it may be manually set. | | videoHeight | number | The height of the ad video element. | | videoWidth | number | The width of the ad video element. |

Working with VidzoneNonceManager

After the nonce has been generated, the VidzoneNonceManager object is used to manage playback state.

function startPlayback(manager) {
    let streamURLWithNonce = streamURL + "?vidsdk=" + manager.getExtraParams(); // or append the parameter with ? if there are no other query params in the URL
    console.log("Play stream", streamURLWithNonce);
    playStream(streamURLWithNonce);
    manager.onPlaybackStart();  // Notify the manager that playback has started
}

function onPlaybackEnd(manager) {
    manager.onPlaybackEnd();  // Notify the manager that playback has ended
}

Methods of VidzoneNonceManager

Returns the generated nonce.

let nonce = manager.getNonce();

Notifies the system that the video playback has started.

manager.onPlaybackStart();

Notifies the system that the video playback has ended.

manager.onPlaybackEnd();

Returns the additional parameters to pass in the stream URL.

manager.getExtraParams();

Full Example

import VidzoneSDK from 'vidzone-sdk';

(async function () {
    let v = new VidzoneSDK(true);
    
    try {
        await v.init();
        const manager = await v.generateNonce({
            playerType: "test",
            playerVersion: "v0.1",
            ppid: "some ppid",
            sessionId: "some uuid",
            url: window.location.href || "https://some.com/some/page",
            videoHeight: 1080,
            videoWidth: 1920
        });
        console.log("Nonce generated:", manager.getExtraParams());
        
        // Start playback
        startPlayback(manager);
        
        // End playback when done
        onPlaybackEnd(manager);
    } catch (err) {
        console.error("Error:", err);
    }
})();

function startPlayback(manager) {
    let streamURLWithNonce = "https://stream.url" + "?vidsdk=" + manager.getExtraParams();
    console.log("Play stream", streamURLWithNonce);
    // playStream(streamURLWithNonce);
    manager.onPlaybackStart();
}

function onPlaybackEnd(manager) {
    manager.onPlaybackEnd();
}