TD Web Player SDK 2.9 - Simple implementation demo

--- title: "Embed the TD Web Player" slug: "embedding-the-td-web-player-sdk" updated: 2026-02-20T15:12:20Z published: 2026-02-20T15:12:20Z canonical: "help.tritondigital.com/embedding-the-td-web-player-sdk" --- > ## Documentation Index > Fetch the complete documentation index at: https://help.tritondigital.com/llms.txt > Use this file to discover all available pages before exploring further. # Embed the TD Web Player You can embed a Triton Digital Web Player in a web page. You configure it with a JSON object that specifies the modules to load. Each module provides features for the player. ## Include the Web Player SDK Include the following JavaScript library files in the body of your HTML page. For details, see [SDK Endpoints](/user/docs/sdk-endpoints). ```xml ... ``` ## Configure and Embed the Media Player This example configures and embeds a player in a web page: - The web player is configured with a JSON object, **tdPlayerConfig.** The main property of this JSON object is **coreModules** and contains the list of modules to load. - In this example, only the **MediaPlayer** module is defined, which specifies the **div** element **td_container** as the player’s container. For details, see [JSON Configuration Object](/user/docs/json-configuration-object). - The media player instance is ready to be used when the function **onPlayerReady** is called. - To attach other listeners on the SDK, use the function **addEventListener( eventName, callback )**. ```xml TD Web Player SDK 2.9 - Simple implementation demo

``` ## Module: MediaPlayer Live playback of audio and video with cue points and ads features. Example: ```javascript { id: 'MediaPlayer', playerId: 'td_container' } ``` ### playerId String. Required. DOM Element used to embed the media player. To be able to display video ads (preroll or video mid-rolls), you must define the CSS stylesheet on the **playerId** div element in the page. The SDK itself does not change any CSS stylesheet on the **playerId** div element, it is your responsibility to define the CSS stylesheet corresponding to your own integration. Example: when a preroll is playing, show the **playerId** element in the page, then when the live audio is playing, you can hide the **playerId** div element. Register callbacks on the SDK events (ad-playback-start, ad-playback-complete, stream-start) to define the CSS styles at the right time. **playerId: 'td_container'** ### platformId String. Platform environment. Default: **'prod01'** ### sbm Object. Sideband Metadata configuration object. If your station does not support Sideband metadata technology, set it to **false**. Then, stream data will be received via **aSyncCuePoint** technology (polling). If you don't want to receive data at all, set **aSyncCuePointFallback** to **false**. **sbm: { active:true|false, aSyncCuePointFallback:true|false }** ### hls Boolean. Default value: **true**. Activate / Deactivate HLS technology support (iOS only). **hls: true/false** ### forceHls Boolean. Default value: **false**. Force HLS technology support on all platforms. **forceHls: true/false** ### audioAdaptive Boolean. Activate / Deactivate Adaptive Audio support. Default value: **false**. **audioAdaptive: true/false** ### idSync Object. Required. Cookie synchronization configuration object. Five options are available to support Cookie synchronization: **station**, **stationId**, **mount**, **gdpr**, and **gdpr_consent**. Each option automatically appends a Javascript script to the page’s **** element. | Example option | Appended script | | --- | --- | | **idSync: {station:'ABCDFM'}** | **** | ### plugins Array. The plugins array is specific to the MediaPlayer module. Each plugin contains ID (String) and other optional configurations. See [MediaPlayer Plugins](/user/docs/embed-the-td-web-player-sdk-draft#mediaplayer-plugins). Example: **plugins: [ {id:"vastAd"}, {id:"mediaAd"} ]** ### playerServicesRegion String. When the SDK loads, it gets its station configuration from our provisioning servers. To speed up the process, we have provisioning servers in several regions including North America, Europe, and Asia. For best results, use the provisioning servers that are closest to your stations. The default provisioning region is North America; to use one of the other regions, specify it using the **playerServicesRegion** property as seen in the example below. Options: - European = **eu** - Asia = **ap** Example: **playerServicesRegion: "eu"** ### geoTargeting Object. Used to enable or disable geo-targeting. Options: - Disabled: **false** - Enabled: **true** If the **geoTargeting** property is not used, then geo-targeting is enabled by default for desktop only. To enable geo-targeting for mobile, the property must be present along with the **true** option for mobile, as shown in the example below. **geoTargeting: {** **desktop: {** **isActive: true** **},** **iOS: {** **isActive: true** **},** **android: {** **isActive: true** **}** **}** ### streamWhileMuted Object. Used to enable or disable stream continuing to play when user mutes the audio. Default is **false**. Options: - Disabled (stream stops when muted): **false** - Enabled (stream continues when muted, but user does not hear audio): **true** ### burstTime Number. Minimum value: **1**. Default value: **15**. Controls the initial burst buffer size, in seconds, for progressive HTTP streams. Specifies the number of seconds of audio the server should send in the initial burst. This parameter is appended to the stream URL as **burst-time** and is only effective for progressive streams (not HLS). Higher values provide better buffering for unstable connections but may increase initial load time. There is no upper limit, but setting it too high will cause performance issues. For related information, see [Playback Buffer](/user/docs/triton-digital-streaming-specification-playback-buffer). ### hlsBufferLength Number. Minimum value: **1**. Default value: **30**. Controls the HLS.js buffer length in seconds. Specifies how much audio HLS.js will buffer ahead of the playhead for HLS streams. Higher values provide better protection against network interruptions but consume more memory. This setting only applies to HLS streams and has no effect on progressive streams. There is no upper limit, but setting it too high will cause performance issues. ## Module: NowPlayingApi Retrieves a stream playback history. Useful for song history. ## Module: TargetSpot Allows preroll ads, including syncing banner ads with audio ads and volume syncing the audio between the live stream and ad. ## Module: SyncBanners Required to display Ad Companions. This module is required to display on-demand Ad Companions (Preroll). It listens for in-stream Ad breaks to display synchronized Ad Companions. The synchronized Ad Companions are displayed when receiving an ad-break cue point. The SyncBanners module handles the process, so all you have to do is configure the module by specifying the list of ad elements in your page (div IDs and dimensions). Every time an Ad companion is displayed "ad-break-synced-element" event id fired. At the end of an Ad Break, a "ad-break-cue-point-complete" event is fired. You can listen this event in order to hide Ad companions divs, if necessary, in your player page. Synchronized Ad Companions: both VAST In-Stream mid-roll and VAST / Legacy (Ando) synced banners. The MediaPlayer **vastAd** plugin is required for VAST In-Stream. | **Banner Capability Flag** | **Capability** | | --- | --- | | IAB Medium Rectangle (300x250) | 300x250 | | IAB Rectangle (180x150) | 180x150 | | IAB Leaderboard (728x90) | 728x90 | | IAB Wide Skyscraper (160x600) | 160x600 | | IAB Half Page (300x600) | 300x600 | | IAB Button 2 (120x60) | 120x60 | | IAB Microbar (88x31) | 88x31 | | IAB Smartphone Static Banner (300x50) | 300x50 | | IAB Smartphone Static Wide Banner (320x50) | 320x50 | Example: ```javascript { id: 'SyncBanners', elements: [{ id: 'td_synced_bigbox', width: 300, height: 250 }, { id: 'td_synced_leaderboard', width: 728, height: 90 }], keepElementsVisible: false, vastCompanionPriority: ['static', 'iframe', 'html'] } ``` ### elements Array. Required. The list of external HTML elements in the page that are used as placeholders to display the Ad Companions. Each element must define an ID of the containing element in the page, a width, and a height. ### keepElementsVisible Boolean. Set to **true** to keep synced ad banners in the page after the end of the ad’s break duration. Set it to **false** to hide ad synced banners at the end of the ad’s break duration. ### vastCompanionPriority Array. The priority order of companions type supported by the ad sync banners (VAST campaign): **'static'**, **'iframe'**, and **'html'**. Default: **['static','iframe','html']**. For VAST In-Stream, the MediaPlayer plugin "vastAd" is required. ## MediaPlayer Plugins Below is the list of the plugins currently supported by the MediaPlayer module. ### Plugin: vastAd The **vastAd** plugin is required if you want to play VAST/VPAID/VMAP/DAAST Ads in your player for preroll or VAST/DAAST for in-stream. It supports both VAST 1.0 / VAST 2.0 / VMAP / DAAST 1.0. The plugin supports VAST/DAAST wrappers, audio/video inline Ads, and Companion Ads. This plugin must be used to access the **VAST/DAAST Ad campaigns** (TritonRunSpot V4.0+ and Tap). Capabilities of this plugin: Ad playback start / Ad playback complete / Ad countdown / Play ad / Skip Ad. ### Plugin: mediaAd The **mediaAd** plugin allows the playback of any media ad, audio or video. The configuration of this plugin is straightforward. ust provide the mediaAd URL and an optional external link. Capabilities of this plugin: Ad playback start / Ad playback complete / Ad countdown / Play ad / Skip Ad.