Basic instantiation code - Web

Web

React App
No React
No package manager

// BO Adapter SDK
import { DivaWebBoAdapter } from "@deltatre-vxp/diva-sdk/diva-web-bo-adapter";
// 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: false,
  googleDAI: false,
  googleCast: false,
  threeJs: false
};

const config = {
  videoId: "<video id>",
  libs: libs,
};

const props = {
  settingsUrl: "<settings URL>",
  languageCode: "en-US",
  languageDictionary: "en-US",
  onDivaBoAdapterError: console.error,
  config: config
}

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

// BO Adapter SDK
import { createDivaWebBoAdapter } from "@deltatre-vxp/diva-sdk/diva-web-bo-adapter";
// 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: false,
  googleDAI: false,
  googleCast: false,
  threeJs: false
};

const config = {
  videoId: "<video id>",
  libs: libs,
};

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

const props = {
  el: el,
  settingsUrl: "<settings URL>",
  languageCode: "en-US",
  languageDictionary: "en-US",
  onDivaBoAdapterError: console.error,
  config: config
}

  (async () => {
    try {
      const divaBo = await createDivaWebBoAdapter(props);

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

<html>

<head>
  <!-- BO Adapter SDK -->
  <script src="path/to/diva/webBOAdapter.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: false,
      googleDAI: false,
      googleCast: false,
      threeJs: false
    };

    const config = {
      videoId: "<video id>",
      libs: libs,
    };

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

    const props = {
      el: el,
      settingsUrl: "<settings URL>",
      languageCode: "en-US",
      languageDictionary: "en-US",
      onDivaBoAdapterError: console.error,
      config: config
    }

      (async () => {
        try {
          const divaBo = await divaWebBoAdapter.createDivaWebBoAdapter(props);

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

</html>

Web Chromeless

React App
No React
No package manager

// BO Adapter SDK
import { DivaChromelessBoAdapter } from "@deltatre-vxp/diva-sdk/diva-web-chromeless-bo-adapter";

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: false,
  googleDAI: false,
  googleCast: false,
  threeJs: false
};

const config = {
  videoId: "<video id>",
  libs: libs,
  webTv: isWebTV,
};

const props = {
  settingsUrl: "<settings URL>",
  languageCode: "en-US",
  languageDictionary: "en-US",
  onDivaBoAdapterError: console.error,
  config: config,
  muted=false
  volume=1
}

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

// BO Adapter SDK
import { createChromelessBoAdapter } from "@deltatre-vxp/diva-sdk/diva-web-chromeless-bo-adapter";

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: false,
  googleDAI: false,
  googleCast: false,
  threeJs: false
};

const config = {
  videoId: "<video id>",
  libs: libs,
  webTv: isWebTV,
};

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

const props = {
  el: el,
  settingsUrl: "<settings URL>",
  languageCode: "en-US",
  languageDictionary: "en-US",
  onDivaBoAdapterError: console.error,
  config: config,
  muted=false
  volume=1
}

  (async () => {
    try {
      const divaBo = await createChromelessBoAdapter(props);

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

<html>

<head>
  <!-- ... -->
  <script src="path/to/diva/chromelessBOAdapter.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: false,
      googleDAI: false,
      googleCast: false,
      threeJs: false
    };

    const config = {
      videoId: "<video id>",
      libs: libs,
    };

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

    const props = {
      el: el,
      settingsUrl: "<settings URL>",
      languageCode: "en-US",
      languageDictionary: "en-US",
      onDivaBoAdapterError: console.error,
      config: config
    }

      (async () => {
        try {
          const divaBo = await divaWebChromelessBoAdapter.createChromelessBoAdapter(props);

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

</html>

WebTV

React App
No React
No package manager

// BO Adapter SDK
import { DivaWebTvBoAdapter } from "@deltatre-vxp/diva-sdk/diva-webtv-bo-adapter";
// 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: false,
  googleDAI: false,
  googleCast: false,
  threeJs: false
};

const init = {
  videoId: "<video id>",
}

const config = {
  init: init,
  libs: libs,
};

const props = {
  settingsUrl: "<settings URL>",
  languageCode: "en-US",
  languageDictionary: "en-US",
  onDivaBoAdapterError: console.error,
  config: config
}

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

// BO Adapter SDK
import { createDivaWebTvBoAdapter } from "@deltatre-vxp/diva-sdk/diva-webtv-bo-adapter";
// Import SDK style
import "@deltatre-vxp/diva-sdk/diva-webtv-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: false,
  googleDAI: false,
  googleCast: false,
  threeJs: false
};

const init = {
  videoId: "<video id>",
}

const config = {
  init: init,
  libs: libs,
};

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

const props = {
  el: el,
  settingsUrl: "<settings URL>",
  languageCode: "en-US",
  languageDictionary: "en-US",
  onDivaBoAdapterError: console.error,
  config: config
}

  (async () => {
    try {
      const divaBo = await createDivaWebTvBoAdapter(props);

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

<html>

<head>
  <!-- ... -->
  <script src="path/to/diva/webTVBOAdapter.reactBundled.js"></script>
  <link rel="path/to/diva/webTVSdk.reactBundled.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: false,
      googleDAI: false,
      googleCast: false,
      threeJs: false
    };

    const init = {
      videoId: "<video id>",
    }

    const config = {
      init: init,
      libs: libs,
    };

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

    const props = {
      el: el,
      settingsUrl: "<settings URL>",
      languageCode: "en-US",
      languageDictionary: "en-US",
      onDivaBoAdapterError: console.error,
      config: config
    }

      (async () => {
        try {
          const divaBo = await divaWebtvBoAdapter.createDivaWebTvBoAdapter(props);

          // To be run when it is required to cleanup Diva after its usage
          const onUnmount = () => {
            divaBo.unmount();
          }
        } catch (e) {
          // Here it is possible to react to BoAdapterIssues
        }
      })();
  </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.

Web​

Web Chromeless​

WebTV​

Font​

Further available configurations​

Web

Web Chromeless

WebTV

Font

Further available configurations