Basic instantiation code

Basic instantiation code per platform

Web

React App
No React
No package manager

// DIVA Player SDK
import { DivaWebComponent } from "@deltatre-vxp/diva-sdk/diva-web-sdk";
import type { DivaConfiguration, VideoMetadata, VideoMetadataClean } from "@deltatre-vxp/diva-sdk/diva-web-sdk";
// Import SDK style
import "@deltatre-vxp/diva-sdk/diva-web-sdk/index.min.css";

const libs = {
  mux: "https://cdnjs.cloudflare.com/ajax/libs/mux.js/6.2.0/mux.min.js",
  shaka: "https://cdnjs.cloudflare.com/ajax/libs/shaka-player/4.11.2/shaka-player.compiled.js",
  hlsJs: "https://cdn.jsdelivr.net/npm/hls.js@1.5.7",
  googleIMA: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js',
  googleDAI: 'https://imasdk.googleapis.com/js/sdkloader/ima3_dai.js',
  googleCast: 'https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1',
  threeJs: 'https://cdnjs.cloudflare.com/ajax/libs/three.js/0.148.0/three.min.js',
};

const config: DivaConfiguration = {
  videoId: "<video id>",
  libs: libs,
  setting: {
    general: {
      culture: 'en-GB',
  }
  }, 
  dictionary: {
  messages: {},
  },
  videoMetadataProvider: async (
    videoId: string,
    currentVideoMetadata?: VideoMetadataClean,
    playbackState?: {
      chromecast?: boolean | undefined;
    }): Promise<VideoMetadata> => {
    return {
      "title": "Video Title",
      "sources": [
        {
        "uri": "https://bitdash-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd",
        "format": "DASH"
        }
      ],
      "videoId": "<video id>",
    };
  }
};

export const App = () => {
  return <DivaWebComponent config={config} />;
};

// DIVA Player SDK
import { DivaWeb } from "@deltatre-vxp/diva-sdk/diva-web-sdk";
import type { DivaConfiguration, VideoMetadata, VideoMetadataClean } from "@deltatre-vxp/diva-sdk/diva-web-sdk";
// Import SDK style
import "@deltatre-vxp/diva-sdk/diva-web-sdk/index.min.css";

const libs = {
  mux: "https://cdnjs.cloudflare.com/ajax/libs/mux.js/6.2.0/mux.min.js",
  shaka: "https://cdnjs.cloudflare.com/ajax/libs/shaka-player/4.11.2/shaka-player.compiled.js",
  hlsJs: "https://cdn.jsdelivr.net/npm/hls.js@1.5.7",
  googleIMA: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js',
  googleDAI: 'https://imasdk.googleapis.com/js/sdkloader/ima3_dai.js',
  googleCast: 'https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1',
  threeJs: 'https://cdnjs.cloudflare.com/ajax/libs/three.js/0.148.0/three.min.js',
};

const config: DivaConfiguration = {
  videoId: "<video id>",
  libs: libs,
  setting: {
    general: {
      culture: 'en-GB',
    }
  }, 
  dictionary: {
    messages: {},
  },
  videoMetadataProvider: async (
    videoId: string,
    currentVideoMetadata?: VideoMetadataClean,
    playbackState?: {
      chromecast?: boolean | undefined;
    }): Promise<VideoMetadata> => {
    return {
      "title": "Video Title",
      "sources": [
        {
        "uri": "https://bitdash-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd",
        "format": "DASH"
        }
      ],
      "videoId": "<video id>",
    };
  }
};

const el = document.getElementById("video-player-container");

(async () => {
    try {
    const divaPlayer = new DivaWeb(el, config);

    // To be run when it is required to cleanup Diva after its usage
    const onUnmount = () => {
      divaPlayer.unmount();
    }
    } catch (e) {
        // Here it is possible to react to DIVA Player exceptions
    }
})();

<html>

<head>
  <!-- DIVA Player SDK -->
  <script src="path/to/diva/webPlayer.reactBundled.js"></script>
  <!-- Import SDK style -->
  <link rel="path/to/diva.bundle.min.css" />
</head>

<body>
  <!-- ... -->
  <div id="diva-container"></div>
  <!-- ... -->

  <script>
    const libs = {
      mux: "https://cdnjs.cloudflare.com/ajax/libs/mux.js/6.2.0/mux.min.js",
      shaka: "https://cdnjs.cloudflare.com/ajax/libs/shaka-player/4.11.2/shaka-player.compiled.js",
      hlsJs: "https://cdn.jsdelivr.net/npm/hls.js@1.5.7",
      googleIMA: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js',
      googleDAI: 'https://imasdk.googleapis.com/js/sdkloader/ima3_dai.js',
      googleCast: 'https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1',
      threeJs: 'https://cdnjs.cloudflare.com/ajax/libs/three.js/0.148.0/three.min.js',
    };

    const config = {
      videoId: "<video id>",
      libs: libs,
      setting: {
        general: {
            culture: 'en-GB',
        }
      }, 
      dictionary: {
        messages: {},
      },
      videoMetadataProvider: async (
        videoId,
        currentVideoMetadata,
        playbackState) => {
        return {
          "title": "Video Title",
          "sources": [
            {
              "uri": "https://bitdash-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd",
              "format": "DASH"
            }
          ],
          "videoId": "<video id>",
        };
      }
    };

    const el = document.getElementById("video-player-container");

    (async () => {
      try {
        const divaPlayer = await new divaWebSdk.DivaWeb(el, config);

        // To be run when it is required to cleanup Diva after its usage
        const onUnmount = () => {
          divaPlayer.unmount();
        }
      } catch (e) {
        // Here it is possible to react to DIVA Player exceptions
      }
  })();
  </script>
</body>

</html>

Web Chromeless

React App
No React
No package manager

// DIVA Player SDK
import { DivaWebChromelessComponent } from "@deltatre-vxp/diva-sdk/diva-web-chromeless-sdk";
import type { DivaWebChromelessConfiguration, VideoMetadata, VideoMetadataClean } from "@deltatre-vxp/diva-sdk/diva-web-chromeless-sdk";

const isWebTV = false;

const libs = {
  mux: "https://cdnjs.cloudflare.com/ajax/libs/mux.js/6.2.0/mux.min.js",
  shaka: "https://cdnjs.cloudflare.com/ajax/libs/shaka-player/4.11.2/shaka-player.compiled.js",
  hlsJs: "https://cdn.jsdelivr.net/npm/hls.js@1.5.7",
  googleIMA: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js',
  googleDAI: 'https://imasdk.googleapis.com/js/sdkloader/ima3_dai.js',
  googleCast: 'https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1',
  threeJs: 'https://cdnjs.cloudflare.com/ajax/libs/three.js/0.148.0/three.min.js',
};

const config: DivaConfiguration = {
  videoId: "<video id>",
  libs: libs,
  setting: {
    general: {
      culture: 'en-GB',
    }
  }, 
  dictionary: {
    messages: {},
  },
  videoMetadataProvider: async (
    videoId: string,
    currentVideoMetadata?: VideoMetadataClean,
    playbackState?: {
      chromecast?: boolean | undefined;
    }): Promise<VideoMetadata> => {
    return {
      "title": "Video Title",
      "sources": [
        {
        "uri": "https://bitdash-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd",
        "format": "DASH"
        }
      ],
      "videoId": "<video id>",
    };
  }
};

const props = {
  config: config,
  muted=false,
  volume=1,
  adCover: true,
  videoCover: true,
}

export const App = () => {
  return <DivaWebChromelessComponent { ...props } />;
};

// DIVA Player SDK
import { createDivaWebChromeless } from "@deltatre-vxp/diva-sdk/diva-web-chromeless-sdk";

const isWebTV = false;

const libs = {
  mux: "https://cdnjs.cloudflare.com/ajax/libs/mux.js/6.2.0/mux.min.js",
  shaka: "https://cdnjs.cloudflare.com/ajax/libs/shaka-player/4.11.2/shaka-player.compiled.js",
  hlsJs: "https://cdn.jsdelivr.net/npm/hls.js@1.5.7",
  googleIMA: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js',
  googleDAI: 'https://imasdk.googleapis.com/js/sdkloader/ima3_dai.js',
  googleCast: 'https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1',
  threeJs: 'https://cdnjs.cloudflare.com/ajax/libs/three.js/0.148.0/three.min.js',
};

const config: DivaConfiguration = {
  videoId: "<video id>",
  libs: libs,
  setting: {
    general: {
      culture: 'en-GB',
    }
  }, 
  dictionary: {
    messages: {},
  },
  videoMetadataProvider: async (
    videoId: string,
    currentVideoMetadata?: VideoMetadataClean,
    playbackState?: {
      chromecast?: boolean | undefined;
    }): Promise<VideoMetadata> => {
    return {
      "title": "Video Title",
      "sources": [
        {
        "uri": "https://bitdash-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd",
        "format": "DASH"
        }
      ],
      "videoId": "<video id>",
    };
  }
};

const el = document.getElementById("video-player-container");

const props = {
  el: el,
  config: config,
}

  (async () => {
    try {
      const diva = await createDivaWebChromeless(props);
      diva.setStyle({ adCover: true, videoCover: true });
      diva.setVolume(0.5);

      // To be run when it is required to cleanup Diva after its usage
      const onUnmount = () => {
        diva.stop();
      }
    } catch (e) {
      // Here it is possible to react to DIVA Player exceptions
    }
  })();

<html>

<head>
  <!-- ... -->
  <script src="path/to/diva/chromeless.reactBundled.js"></script>
</head>

<body>
  <!-- ... -->
  <div id="diva-container"></div>
  <!-- ... -->

  <script>
    const libs = {
      mux: "https://cdnjs.cloudflare.com/ajax/libs/mux.js/6.2.0/mux.min.js",
      shaka: "https://cdnjs.cloudflare.com/ajax/libs/shaka-player/4.11.2/shaka-player.compiled.js",
      hlsJs: "https://cdn.jsdelivr.net/npm/hls.js@1.5.7",
      googleIMA: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js',
      googleDAI: 'https://imasdk.googleapis.com/js/sdkloader/ima3_dai.js',
      googleCast: 'https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1',
      threeJs: 'https://cdnjs.cloudflare.com/ajax/libs/three.js/0.148.0/three.min.js',
    };

    const config = {
      videoId: "<video id>",
      libs: libs,
      setting: {
        general: {
            culture: 'en-GB',
        }
      }, 
      dictionary: {
        messages: {},
      },
      videoMetadataProvider: async (
        videoId,
        currentVideoMetadata,
        playbackState) => {
        return {
          "title": "Video Title",
          "sources": [
            {
              "uri": "https://bitdash-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd",
              "format": "DASH"
            }
          ],
          "videoId": "<video id>",
        };
      }
    };

    const el = document.getElementById("video-player-container");

    const props = {
      el: el,
      config: config
    }

      (async () => {
        try {
          const diva = await divaWebChromelessSdk.createDivaWebChromeless(props);
          diva.setStyle({ adCover: true, videoCover: true });
          diva.setVolume(0.5);

          // To be run when it is required to cleanup Diva after its usage
          const onUnmount = () => {
            diva.stop();
          }
        } catch (e) {
          // Here it is possible to react to DIVA Player exceptions
        }
      })();
  </script>
</body>

</html>

WebTV

React App
No React
No package manager

// DIVA Standalone SDK
import { DivaWebTV } from "@deltatre-vxp/diva-sdk/diva-webtv-sdk";
import type { 
  DivaWebTVInitType, 
  DivaWebTVProps, 
  VideoMetadata, 
  VideoMetadataClean
} from "@deltatre-vxp/diva-sdk/diva-webtv-sdk";

// Import SDK style
import "@deltatre-vxp/diva-sdk/diva-webtv-sdk/index.min.css";

const init: DivaWebTVInitType = {
  setting: {
    general: {
      culture: "en-GB",
    }
  },
  videoId: "<video id>"
};

const libs = {
  mux: "https://cdnjs.cloudflare.com/ajax/libs/mux.js/6.2.0/mux.min.js",
  shaka: "https://cdnjs.cloudflare.com/ajax/libs/shaka-player/4.11.2/shaka-player.compiled.js",
  hlsJs: "https://cdn.jsdelivr.net/npm/hls.js@1.5.7",
  googleIMA: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js',
  googleDAI: 'https://imasdk.googleapis.com/js/sdkloader/ima3_dai.js',
};

const props: DivaWebTVProps = {
  init,
  libs,
  dictionary: {
    messages: {},
  },
  videoMetadataProvider: async (
    videoId: string,
    currentVideoMetadata?: VideoMetadataClean,
    playbackState?: {
      chromecast?: boolean | undefined;
    }): Promise<VideoMetadata> => {
    return {
      "title": "Video Title",
      "sources": [
      {
      "uri": "https://bitdash-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd",
      "format": "DASH"
      }
      ],
      "videoId": "<video id>",
    };
  }
};


export const App = () => {
  return <DivaWebTV {...props} />;
}

// DIVA Player SDK
import { createDivaWebTV } from "@deltatre-vxp/diva-sdk/diva-webtv-sdk";
import type { 
  DivaWebTVInitType, 
  DivaWebTVProps, 
  VideoMetadata, 
  VideoMetadataClean
} from "@deltatre-vxp/diva-sdk/diva-webtv-sdk";
// Import SDK style
import "@deltatre-vxp/diva-sdk/diva-webtv-sdk/index.min.css";

const init: DivaWebTVInitType = {
  setting: {
    general: {
      culture: "en-GB",
    }
  },
  videoId: "<video id>"
};

const libs = {
  mux: "https://cdnjs.cloudflare.com/ajax/libs/mux.js/6.2.0/mux.min.js",
  shaka: "https://cdnjs.cloudflare.com/ajax/libs/shaka-player/4.11.2/shaka-player.compiled.js",
  hlsJs: "https://cdn.jsdelivr.net/npm/hls.js@1.5.7",
  googleIMA: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js',
  googleDAI: 'https://imasdk.googleapis.com/js/sdkloader/ima3_dai.js',
};

const props: DivaWebTVProps = {
  init,
  libs,
  dictionary: {
    messages: {},
  },
  videoMetadataProvider: async (
    videoId: string,
    currentVideoMetadata?: VideoMetadataClean,
    playbackState?: {
      chromecast?: boolean | undefined;
    }): Promise<VideoMetadata> => {
    return {
      "title": "Video Title",
      "sources": [
      {
      "uri": "https://bitdash-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd",
      "format": "DASH"
      }
      ],
      "videoId": "<video id>",
    };
  }
};

(async () => {
  try {
    const diva = await createDivaWebTV(props);

    // To be run when it is required to cleanup Diva after its usage
    const onUnmount = () => {
      diva.unmount();
    }
  } catch (e) {
    // Here it is possible to react to DIVA Player exceptions
  }
})();

<html>

<head>
  <!-- ... -->
  <script src="path/to/diva/webTVSdk.reactBundled.js"></script>
  <link rel="path/to/diva/webTVSdk.reactBundled.css" />
</head>

<body>
  <!-- ... -->
  <div id="diva-container"></div>
  <!-- ... -->

  <script>
    const init = {
      setting: {
        general: {
          culture: "en-GB",
        }
      },
      videoId: "<video id>"
    };

    const libs = {
      mux: "https://cdnjs.cloudflare.com/ajax/libs/mux.js/6.2.0/mux.min.js",
      shaka: "https://cdnjs.cloudflare.com/ajax/libs/shaka-player/4.11.2/shaka-player.compiled.js",
      hlsJs: "https://cdn.jsdelivr.net/npm/hls.js@1.5.7",
      googleIMA: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js',
      googleDAI: 'https://imasdk.googleapis.com/js/sdkloader/ima3_dai.js',
    };

    const props = {
      init,
      libs,
      dictionary: {
        messages: {},
      },
      videoMetadataProvider: async (
        videoId,
        currentVideoMetadata,
        playbackState): Promise<VideoMetadata> => {
        return {
          "title": "Video Title",
          "sources": [
          {
          "uri": "https://bitdash-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd",
          "format": "DASH"
          }
          ],
          "videoId": "<video id>",
        };
      }
    };

    const el = document.getElementById("video-player-container");
    (async () => {
      try {
        const diva = await divaWebtv.createDivaWebTV(props);

        // To be run when it is required to cleanup Diva after its usage
        const onUnmount = () => {
          diva.unmount();
        }
      } catch (e) {
        // Here it is possible to react to DIVA Player exceptions
      }
    })();
  </script>
</body>

</html>

Font

From version 5.10.4 the DIVA player does not import the font anymore, in order to lower loading charge for low performing devices.
It is now required to import it in the integration app.
To import the font in the integration app, you can add this line in your stylesheet:

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");

Further available configurations

Learn the full configuration of the DIVA player in the Diva Configuration section.

Basic instantiation code per platform​

Web​

Web Chromeless​

WebTV​

Font​

Further available configurations​

Basic instantiation code per platform

Web

Web Chromeless

WebTV

Font

Further available configurations