Skip to Content

Class: TurboIntegrationElement

A multi-tenant integration custom element that automatically determines the correct tenant from the domain the script was loaded from.

When the integration bundle is served from player.joyn.de the tenant resolves to "joyn"; when served from player.glomex.com it resolves to "glomex", and so on. The mapping is driven by the domains list in each tenant configuration (see @glomex/turbo-shared-types).

For local development the tenant can still be overridden via the tenant HTML attribute / DOM property so that developers can test any tenant without deploying to the corresponding CDN.

The legacy <glomex-integration> element is kept for backwards compatibility. New tenants should use <turbo-integration>.

Tagname

turbo-integration

Examples

<turbo-integration integration-id="joyn-vod" > <joyn-media-item id="MEDIA_ID"></joyn-media-item> </turbo-integration>
<turbo-integration integration-id="joyn-vod" tenant="joyn" ></turbo-integration>

Extends

Constructors

Constructor

new TurboIntegrationElement(): TurboIntegrationElement

Returns

TurboIntegrationElement

Overrides

IntegrationElement.constructor

Properties

hidden

hidden: boolean = false

Hides the integration element when set to true.

Attribute

hidden

Inherited from

IntegrationElement.hidden


IntegrationEvent

static IntegrationEvent: typeof IntegrationEvent

Inherited from

IntegrationElement.IntegrationEvent


KnownMarkerName

static KnownMarkerName: typeof KnownMarkerName

Inherited from

IntegrationElement.KnownMarkerName


MarkerType

static MarkerType: typeof MarkerType

Inherited from

IntegrationElement.MarkerType


Mimetype

static Mimetype: typeof Mimetype

Inherited from

IntegrationElement.Mimetype


PlaybackMode

static PlaybackMode: typeof PlaybackMode

Inherited from

IntegrationElement.PlaybackMode


PresentationMode

static PresentationMode: typeof PresentationMode

Inherited from

IntegrationElement.PresentationMode


ready

ready: Promise<void>

Resolves when the integration API is available (e.g. setting volume, play, pause, etc.). Alternatively to element.addEventListener(IntegrationEvent.READY, () => {...})

Inherited from

IntegrationElement.ready


sharedContext

static sharedContext: SharedContext

Inherited from

IntegrationElement.sharedContext


topLevelIframe

topLevelIframe: boolean = false

An optional flag that can mark the integration as if it is running in a top-level window context. Useful when the embedded iframe represents an article, which contains this integration.

Attribute

top-level-iframe

Inherited from

IntegrationElement.topLevelIframe


adPlayer?

optional adPlayer: string

Inherited from

IntegrationElement.adPlayer


crossorigin?

optional crossorigin: "" | "none" | "anonymous" | "use-credentials" = 'anonymous'

The crossorigin attribute  is used to define the CORS (Cross-Origin Resource Sharing) policy for the video element. Defaults to anonymous. If set to none (non-standard value) it won’t require CORS headers for the loaded media files, though text-tracks from foreign origins then cannot be loaded.

Attribute

crossorigin

Inherited from

IntegrationElement.crossorigin


extraContext?

optional extraContext: ExtraContext

An optional context object that can be used to pass additional application, device and user information to the integration. Updates must be performed immutably: always provide a new object to the IntegrationElement#extraContext property when modifying any property or nested field.

Inherited from

IntegrationElement.extraContext


index?

optional index: number = undefined

Determines the index of the media item within the playlist that should be or is currently selected.

This property can be used to:

  • Switch between media items: Set this property to navigate to a different item in the playlist (zero-based index).
  • Get the current playlist index: Read this property to determine which media item is currently active in the playlist.

Attribute

index

Inherited from

IntegrationElement.index


integrationId?

optional integrationId: string

The identifier for this integration. This value is used to determine the configuration and behavior of the integration.

Attribute

integration-id

Inherited from

IntegrationElement.integrationId


passback()?

optional passback: (payload) => void

Optional callback function invoked when the integration fails to load an advertisement. The callback receives an object with a reason property that explains why no ad was loaded. It must be defined before the element gets attached to the DOM.

Parameters

payload
reason

string

Returns

void

Inherited from

IntegrationElement.passback


placement?

optional placement: string

Allows the publisher to provide an optional placement attribute, which supplies additional contextual information for enhanced analytics tracking. This can be a simple string or a stringified JSON object. If it is a stringified JSON object, its contents are forwarded as placementDetail. If the object contains a property key name, its value will be tracked for the placement attribute.

Attribute

placement

Inherited from

IntegrationElement.placement


playlistId?

optional playlistId: string

Defines the playlist / content identifier that should be loaded and managed by the integration. It can be a single content id, a playlist id or auto. It must be empty when the content is provided via the media-item web components inside the integration.

Attribute

playlist-id

Inherited from

IntegrationElement.playlistId


schain?

optional schain: string

Supply chain (schain) information provided by the integrating party (e.g. meta-publisher). Must be set as an IAB serialized string (e.g. "1.0,1!exchange.com,123,1"). Supply chain nodes provided here are extended with the relevant downstream nodes.

Attribute

schain

Inherited from

IntegrationElement.schain


userLanguage?

optional userLanguage: string

Preferred language for the current user. When provided, this value is used for the UI instead of the browser language detected in the environment. Accepts a BCP 47 language tag (e.g. “de”, “en-US”).

Attribute

user-language

Inherited from

IntegrationElement.userLanguage


variant?

optional variant: string

Inherited from

IntegrationElement.variant

Accessors

adCurrentTime

Get Signature

get adCurrentTime(): number

Returns the current playback time (in seconds) for the ad content. If no ad is currently active, this value is NaN.

Returns

number

Inherited from

IntegrationElement.adCurrentTime


adDuration

Get Signature

get adDuration(): number

Retrieves the total duration (in seconds) of the ad content. If no ad is currently active, this value is NaN.

Returns

number

Inherited from

IntegrationElement.adDuration


adMuted

Get Signature

get adMuted(): boolean | undefined

Returns whether the ad playback is muted. If no ad is currently active, this value is undefined.

Returns

boolean | undefined

Inherited from

IntegrationElement.adMuted


adPaused

Get Signature

get adPaused(): boolean | undefined

Indicates whether the ad playback is currently paused. If no ad is currently active, this value is undefined.

Returns

boolean | undefined

Inherited from

IntegrationElement.adPaused


adVolume

Get Signature

get adVolume(): number | undefined

Retrieves the volume level for the ad playback. If no ad is currently active, this value is undefined.

Returns

number | undefined

Inherited from

IntegrationElement.adVolume


audioTracks

Get Signature

get audioTracks(): AudioTrackList | undefined

Returns the audio track list. You can use this to listen to audio track changes via audioTracks.addEventListener('change', ...).

Note: Audio tracks are available after the integration.ready promise resolves.

Examples
await integration.ready; for (const track of integration.audioTracks) { console.log(track); } const tracks = Array.from(integration.audioTracks);

Use the select() method to change the active audio track:

integration.audioTracks?.select(trackId);
Returns

AudioTrackList | undefined

Inherited from

IntegrationElement.audioTracks


buffering

Get Signature

get buffering(): boolean

Indicates whether the media is currently in a buffering state.

Returns

boolean

Inherited from

IntegrationElement.buffering


Get Signature

get consent(): Consent | undefined

Provides access to the user’s consent information.

Returns

Consent | undefined

Inherited from

IntegrationElement.consent


content

Get Signature

get content(): MediaItemResolved | undefined

Retrieves the currently selected content item.

Returns

MediaItemResolved | undefined

Inherited from

IntegrationElement.content


contentPlaybackTime

Get Signature

get contentPlaybackTime(): number

Retrieves the playback time (in seconds) of the current content.

Returns

number

Inherited from

IntegrationElement.contentPlaybackTime


currentAd

Get Signature

get currentAd(): Ad | undefined

Retrieves details about the currently selected ad, if any.

Returns

Ad | undefined

Inherited from

IntegrationElement.currentAd


currentTime

Get Signature

get currentTime(): number

Returns the current playback time (in seconds) of the media.

Returns

number

Set Signature

set currentTime(time): void

Seeks the media to the specified time, updating the current playback time.

To set an initial start time, use MediaItem.resumePosition on the media item.

Parameters
time

number

The time (in seconds) to seek to.

Returns

void

Inherited from

IntegrationElement.currentTime


duration

Get Signature

get duration(): number

Retrieves the total duration (in seconds) of the current media content.

Returns

number

Inherited from

IntegrationElement.duration


ended

Get Signature

get ended(): boolean

Indicates whether the media playback has ended.

Returns

boolean

Inherited from

IntegrationElement.ended


muted

Get Signature

get muted(): boolean

Indicates whether the media playback is currently muted.

Returns

boolean

Set Signature

set muted(value): void

Mutes or unmutes the media playback.

Parameters
value

boolean

A boolean value indicating whether to mute the media playback.

Returns

void

Inherited from

IntegrationElement.muted


page

Get Signature

get page(): Page | undefined

Retrieves information about the detected page.

Returns

Page | undefined

Inherited from

IntegrationElement.page


paused

Get Signature

get paused(): boolean

Returns true if the media playback is currently paused; otherwise, returns false.

Returns

boolean

Inherited from

IntegrationElement.paused


playbackRate

Get Signature

get playbackRate(): number

Returns the current playback speed.

Returns

number

Set Signature

set playbackRate(value): void

Sets the playback speed.

Parameters
value

number

The playback speed to be set (e.g. 0.5, 1, 1.5, 2).

Returns

void

Inherited from

IntegrationElement.playbackRate


playlist

Get Signature

get playlist(): MediaItemResolved[] | undefined

Retrieves the current playlist.

Returns

MediaItemResolved[] | undefined

Inherited from

IntegrationElement.playlist


presentationMode

Get Signature

get presentationMode(): PresentationMode

Retrieves the current presentation mode of the media player. This mode may affect how the media is displayed.

Returns

PresentationMode

Inherited from

IntegrationElement.presentationMode


seeking

Get Signature

get seeking(): boolean

Indicates whether the media is currently in a seeking state.

Returns

boolean

Inherited from

IntegrationElement.seeking


seekRange

Get Signature

get seekRange(): SeekRange

Retrieves the seekable range of the current media content. For VoD content, this typically represents the full duration (0 to duration). For live streams, this represents the DVR window that can be seeked to. The start and end properties are undefined if the seek range is not yet available.

Returns

SeekRange

Inherited from

IntegrationElement.seekRange


sessionId

Get Signature

get sessionId(): string

Returns the current session ID.

Returns

string

Inherited from

IntegrationElement.sessionId


source

Get Signature

get source(): SourceSelected | undefined

Retrieves the currently selected source.

Returns

SourceSelected | undefined

Inherited from

IntegrationElement.source


textTracks

Get Signature

get textTracks(): TextTrackList | undefined

Returns the text track list. You can use this to listen to text track changes via textTracks.addEventListener('change', ...).

Note: Text tracks are available after the integration.ready promise resolves.

Examples
await integration.ready; for (const track of integration.textTracks) { console.log(track); } const tracks = Array.from(integration.textTracks);

Use the select() method to change the active text track, or pass undefined to disable:

integration.textTracks?.select(trackId); integration.textTracks?.select(undefined); // disable text tracks
Returns

TextTrackList | undefined

Inherited from

IntegrationElement.textTracks


version

Get Signature

get version(): string

Version of the integration

Returns

string

Inherited from

IntegrationElement.version


videoTracks

Get Signature

get videoTracks(): VideoTrackList | undefined

Returns the video track list. You can use this to listen to video track changes via videoTracks.addEventListener('change', ...).

Note: Video tracks are available after the integration.ready promise resolves.

Examples
await integration.ready; for (const track of integration.videoTracks) { console.log(track); } const tracks = Array.from(integration.videoTracks);

Use the select() method to change the active video track, or pass 'auto' for automatic quality selection:

integration.videoTracks?.select(trackId); integration.videoTracks?.select('auto'); // enable ABR
Returns

VideoTrackList | undefined

Inherited from

IntegrationElement.videoTracks


volume

Get Signature

get volume(): number

Returns the current volume level of the media playback (0-1).

Returns

number

Set Signature

set volume(value): void

Sets the media playback volume to the specified level.

Parameters
value

number

The volume level to be set (0-1).

Returns

void

Inherited from

IntegrationElement.volume


wallClockTime

Get Signature

get wallClockTime(): number

Returns the current wall clock time (UNIX timestamp in seconds). Useful for livestreams.

Returns

number

Inherited from

IntegrationElement.wallClockTime

Methods

exitCurrentPresentationMode()

exitCurrentPresentationMode(options?): Promise<void>

Exits the current presentation mode.

Parameters

options?

Optional configuration.

byUser?

boolean

Indicates if the change was initiated by a user action.

Returns

Promise<void>

Inherited from

IntegrationElement.exitCurrentPresentationMode


getCurrentVideoFrame()

getCurrentVideoFrame(): Promise<ImageBitmap>

Snapshots current video frame. Requires crossorigin to be set to anonymous.

Returns

Promise<ImageBitmap>

Inherited from

IntegrationElement.getCurrentVideoFrame


getVideoPlaybackQuality()

getVideoPlaybackQuality(): { bandwidth: number; bitrate: number; bytes: number; corruptedVideoFrames: number; creationTime: number; droppedVideoFrames: number; height: number; liveLatency: number; throughput: number; totalVideoFrames: number; width: number; } | undefined

Returns the current extended playback quality.

Returns

{ bandwidth: number; bitrate: number; bytes: number; corruptedVideoFrames: number; creationTime: number; droppedVideoFrames: number; height: number; liveLatency: number; throughput: number; totalVideoFrames: number; width: number; } | undefined

Inherited from

IntegrationElement.getVideoPlaybackQuality


pause()

pause(): Promise<void>

Pauses the current media playback.

Returns

Promise<void>

Inherited from

IntegrationElement.pause


play()

play(options): Promise<void>

Initiates playback of the media content.

Parameters

options
startMethod

CLICK | AUTOPLAY_SCROLL | AUTOPLAY_SCROLL_OUT | CLICK_NEXT | CLICK_REPLAY | AUTOPLAY_NEXT

The method used to start playback (defaults to CLICK)

Returns

Promise<void>

Inherited from

IntegrationElement.play


setPresentationMode()

setPresentationMode(mode, options?): Promise<void>

Sets the presentation mode of the media player to the specified mode. This mode affects how the integration gets displayed (e.g. inline, dock, lightbox, fullscreen).

Parameters

mode

The presentation mode to set.

"inline" | "hidden" | PresentationMode | "dock" | "fullscreen" | "lightbox" | "lightbox-external" | "amp-dock"

options?

Optional configuration.

byUser?

boolean = false

Indicates if the change was initiated by a user action.

Returns

Promise<void>

Inherited from

IntegrationElement.setPresentationMode

Last updated on