Basic instantiation code

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>

Web​

Web Chromeless​

WebTV​

Web

Web Chromeless

WebTV