Web component and types to integrate the glomex player
@glomex/integration-web-component exposes a Web Component and types to easily integrate the glomex player. In order to use this component, you need to have a glomex account. You can get one by following the instructions in the Getting Started section.
If you use React, you can install the @glomex/integration-react package instead.
glomex operates Germany’s largest marketplace for premium video content. Our platform connects publishers, content creators, and advertisers, enabling the seamless distribution of high-quality video content across the web.
Our ecosystem is designed to create value for all participants:
- Publishers gain access to premium video content and monetization opportunities
- Content Owners receive wide distribution and revenue for their video assets
- Advertisers reach targeted audiences across a network of quality websites
For plain JavaScript projects, you can follow this guide.
You though can use the @glomex/integration-web-component helper to load the integration component and styles also in JavaScript projects.
``ts
import {
IntegrationEvent,
ComponentName,
loadIntegrationComponent,
loadIntegrationStyles
} from '@glomex/integration-web-component';
// Get the container element where the player will be placed
const container = document.getElementById('player-container-on-site');
const integrationId = 'FILL_IN_INTEGRATION_ID';
const playlistId = 'FILL_IN_PLAYLIST_ID';
// It makes sense to load integration css
// as early as possible to reduce layout shifts.
// You also can get the CSS URL with this helper:
// import { getIntegrationCssUrl } from '@glomex/integration/load';
loadIntegrationStyles(integrationId);
// load the integration web component
loadIntegrationComponent();
// create the fully typed integration element
const integration = document.createElement(ComponentName.INTEGRATION);
integration.setAttribute('integration-id', integrationId);
integration.setAttribute('playlist-id', playlistId);
integration.addEventListener(IntegrationEvent.CONTENT_START, () => {
console.log('content start', integration.content);
});
// attach the integration element
container.appendChild(integration);
// wait until the integration was upgraded to access web component methods
await window.customElements.whenDefined(ComponentName.INTEGRATION);
integration.play();
`ts
import {
IntegrationEvent,
type ConnectIntegration
} from '@glomex/integration-web-component';
// with this you get a fully typed integration
export const connectIntegration: ConnectIntegration = (integration) => {
integration.addEventListener(IntegrationEvent.CONTENT_PLAY, () => {
console.log('play', integration.content);
});
};
``