Interface: DynamicContent

A dynamic content ES module must export a create function matching this interface. Sources of this type are identified by the Mimetype.DYNAMIC_CONTENT mimetype.

The player dynamically import()s the module and awaits the promise returned by create() before starting playback. The resolved object’s destroy is called when the player unloads the content.

The module runs in the embedding page’s realm — window and document are the page’s globals. container is an element rendered inside a dedicated shadow root, so DOM and CSS appended to it are isolated in both directions.

When a TCF consent string is available it is appended as the consent query parameter to the module URL; read it via new URL(import.meta.url).searchParams.get('consent').

Examples

export async function create({ mediaElement, container }) {
  // render into container, listen to mediaElement events …
  return { destroy() { /* tear down */ } };
}

Dynamic content is delivered as a regular media item source whose mimetype is application/x-turbo-dynamic-content and whose src points to the ES module URL. The simplest way to wire it up is via ExternalMediaItemElement. The media item’s duration (in seconds) controls playback length — the player‑supplied mediaElement reports it as its duration.

<your-integration
  <!-- e.g. glomex-integration, joyn-integration -->
  integration-id="REPLACE_WITH_INTEGRATION_ID"
>
  <external-media-item>
    <script type="application/external-media-item+json">
      {
        "id": "my-dynamic-content",
        "title": "My Dynamic Content",
        "poster": "POSTER_URL",
        "duration": 15,
        "sources": [
          {
            "src": "https://example.com/my-dynamic-content.js",
            "mimetype": "application/x-turbo-dynamic-content"
          }
        ]
      }
    </script>
  </external-media-item>
</your-integration>

Methods

create()

create(context): Promise<{ destroy: void; }>

Parameters

context

container

HTMLElement

Element to render into. Lives inside its own shadow root, so DOM and CSS appended here are isolated from the embedding page and the player UI in both directions. Sized to the player viewport — use getBoundingClientRect() or a ResizeObserver, not window.innerWidth.

mediaElement

HTMLMediaElement

The player’s media element, proxied so that listeners added via addEventListener() are removed automatically on destroy. Listeners attached to other objects, or via handler properties (onplay = ...), are not cleaned up automatically.

Returns

Promise<{ destroy: void; }>