[ceyhun-o]

Summary

Migrates nine more old theoplayer.com Web SDK demos into the examples, using current SDK, browser and Open Video UI APIs (public light-DOM elements and player APIs only, no shadow-root access). Like the earlier batches, interactive controls live on the docs page (React components with Infima buttons and shared.module.css) and talk to the iframe through postMessage, so they follow the site's light/dark theme.

Example	UI	Notes
UI / Video fit	both	contain / cover / fill on a 21:9 player. Open Video UI uses --theoplayer-video-object-fit; change-video-fit.mdx now shows that usage and links to the example.
UI / Debug display	Open Video UI	<theoplayer-debug-display slot="overlay" hidden> + <theoplayer-debug-button>, loaded as ES modules through an import map (@theoplayer/web-ui/debug imports @theoplayer/web-ui and lit by name).
UI / Chapter markers	Open Video UI	Sintel with a side-loaded kind: 'chapters' WebVTT track. <theoplayer-default-ui> shows seek bar markers and the chapter title by default from Open Video UI 2.7.0; the page also shows show-chapter-markers + <theoplayer-chapter-display> for custom <theoplayer-ui> layouts.
Ads / Yospace SSAI	Open Video UI	YospaceConnector.setupYospaceSession({ sources: [{ src, ssai: { integration: 'yospace', streamType } }] }) with Yospace validation streams and an ad-event log. Explicitly SSAI.
Playback / Clip API with playlist	Open Video UI	Clips reset on every source change, so player.clip.startTime/endTime are set again on durationchange; next item on ended.
UI / Chromeless UI	none	A UI built from scratch on ChromelessPlayer: scrubber with buffered range, elapsed/remaining time, spinner, subtitle and audio track menus, mute with a volume slider pop-up, fullscreen of the whole container (falls back to player.presentation), keyboard and auto-hide.
Playback / Web Audio API	Open Video UI	player.audio.createAudioSourceNode(context) → panner → 3-band EQ → gain → analyser, with bypass, setTargetAtTime and context.resume() on interaction. Plays a progressive MP4 with crossOrigin: 'anonymous', because Safari doesn't pass MSE audio to Web Audio.
UI / Up Next	both	Default UI uses player.upnext and opens up-next/next-default-ui.html; Open Video UI builds the bar (with ×) and the countdown end screen in the overlay slot and opens up-next/next.html. The page points to Playlist and caching for switching source in the same player.
Playback / Peak limiter	Open Video UI	Browsers have no true limiter (DynamicsCompressorNode adds makeup gain), so this uses @synthlet/lookahead-limiter 0.2.0 (MIT, AudioWorklet), loaded from unpkg through an import map. Also plays a progressive MP4.

Related How-to and FAQ pages now link to these and earlier examples (e.g. Yospace, Clipping, Web Audio, Up Next, Chapter markers), and the Web SDK getting started guide links to the examples page.

Testing

• check-format, lint, spellcheck, typecheck and build pass locally.
• Each demo was run in headless Chrome, e.g. Up Next opens the right destination page after the countdown in both UIs, and the chapter markers demo shows 7 seek bar markers with the current and hovered chapter titles.
• Web Audio and Peak limiter were confirmed working in macOS Safari.
• Known issue: the first load of the Yospace DASH validation stream often fails with "Something went wrong determining the initial Period of the provided MPEG-DASH stream"; loading it again works. HLS is the default stream.

Link to Devin session: https://dolby.devinenterprise.com/sessions/34556ffd15af436280c9484b8486f1f7
Open in Devin Desktop: https://dolby.devinenterprise.com/desktop/session/34556ffd15af436280c9484b8486f1f7?variant=devin
Requested by: @ceyhun-o

[devin-ai-integration]

I'll fix CI failures and address comments from users with write access. I'll skip comments containing "(aside)".

• Disable automatic comment, CI, and merge conflict monitoring

[theoplayer-bot]

Documentation preview
🚀 View preview at https://docs-preview.optiview.dolby.com/pr-913/
Deployed from commit 03ea057 at 2026-10-20 12:22 UTC.