nexxPLAY
  • Introduction
  • Javascript SDK
    • Basic Integration
    • Advanced Integration
    • Player Configuration
    • Player Management
    • Playback Control
  • iFrame Integration
    • Embed Codes
    • PostMessage Control
  • native Players
    • nexxPLAY for iOS
    • nexxPLAY for Android
    • nexxPLAY for Flutter
  • Platform Plugins
    • Google AMP
    • Wordpress Plugin
    • React Plugin
  • Integration Enhancements
    • Player UI
    • Audio Player
    • Player DataMode
    • Player Events
    • SDK Override Options
    • VAST Macros
    • GET Parameters
  • Widgets
    • Javascript SDK
    • iFrame Integration
    • Widgets for native Apps
      • iOS Widget
      • Android Widget
      • Android TV Channel
      • Windows 10 LiveTile
    • Widget React Plugin
    • Widget Override Options
  • more Integrations
    • WebViews
    • oEmbed Discovery
    • WebComponent
    • Preview Links
    • Cover Service
    • Reporting for external Players
  • Addons
  • Security and Accessibility
    • Data Protection and Security
    • GDPR and TCF 2.0
    • Accessibility and WCAG
  • Compatibility
  • Changelog
Powered by GitBook
On this page
  1. more Integrations

WebComponent

The nexxPLAY SDK also supports Integration via WebComponents.

After the initialization of the SDK, a WebComponent Class can be registered globally, if the Browser supports these APIs.

The nexxPLAY WebComponent will be integrated into HTML like this:

<nexx-play 
    id="player" 
    data-mediaid="12345" 
    data-streamtype="video" 
    data-config='{"disableAds":1}'
></nexx-play>

The HTML Tag supports the Attributes data-mediaid (necessary), data-streamtype (optional, will be set to "video", if omitted) and an optional data-config Attribute.

The Config Attribute must be a JSON encoded String of an Object, that would serve as Source for a _play.PlayerConfiguration Object.

After the nexxPLAY SDK has been loaded, the Instance can be started as a WebComponent:

_play.config.enableWebComponents().then(function(){
    window.customElements.define("nexx-play",nexxPLAY);
}catch(function(){
    // provider a Fallback
});

In this Moment, the custom HTML Tag has been registered and will start the nexxPLAY Instance in the given Container. For registering for Events or further Control, the WebComponent Container offers a method to get the _play.PlayerInstance Instance, which runs inside the HTML Container and exposes the regular SDK Methods:

let instance = document.getElementById("player").getInstance();
let mediaData = instance.getMediaData();
PreviousoEmbed DiscoveryNextPreview Links

Last updated 4 years ago