Add second batch of Web SDK demos to THEOplayer examples

[devin-ai-integration]

Summary

Moves the next 10 legacy Web SDK demos from theoplayer.com into the THEOplayer examples, following the structure of #887. Each page has an iframe demo under theoplayer/static/theoplayer/v11/examples/<slug>/ and an overview card generated from its frontmatter. Where the page needs to control the player, a parent-page controller in theoplayer/examples/_components/ talks to the iframe through <Example> messaging. player and THEOplayer are available in the console.

Categories

All examples, old and new, are grouped into sidebar categories. Each category is a subfolder with a _category_.json, following the convention in how-to-guides/web. The overview page uses <SubcategoryDocCardList />.

Category (folder)	Examples
Getting started (getting-started/)	Basic player
Streaming (streaming/)	4K, ABR, DVR, Fast source switching, LCEVC, VR
Playback control (playback/)	Frame accurate seeking, Playback speed, Keeping track of time, Continuous play, Bookmarks
User interface (ui/)	Adding buttons, Changing the UI with CSS, Custom error messages
Subtitles and metadata (subtitles-metadata/)	Closed captions & subtitles, ID3 metadata
Casting (casting/)	AirPlay, Chromecast
Content protection (content-protection/)	DRM
Ads (ads/)	Google DAI

URLs now include the category, e.g. /theoplayer/examples/abr/ becomes /theoplayer/examples/streaming/abr/. The 11 pages already published in #887 get redirects in redirectsTHEOPlayer.json. The links in the VR how-to and the AirPlay FAQ are updated.

Autoplay and UI naming (all examples)

• No player autoplays on page load; you start playback by clicking the player. The only exception is a page control that loads a new source: its handler sets player.autoplay = true just before player.source = ..., and those players keep mutedAutoplay: 'all' so the player mutes only when the browser requires it. This applies to ABR (strategy), Bookmarks (select bookmark), Closed captions & subtitles (source), DRM (source), Fast source switching (switch), Google DAI (Load stream) and LCEVC (DASH/HLS). Every other player has neither autoplay nor mutedAutoplay. No sample sets player.muted or calls player.play().
• The video.js-based UI created by new THEOplayer.Player() is now called the Default UI, matching the UI docs, and links to them. The legacy-ui.html files are renamed to default-ui.html (basic, adding-buttons, changing-ui-with-css, custom-error-messages).

New demos

Page	UI	Notes
Adding buttons	Open Video UI + Default UI	Open Video UI: a Skip intro <theoplayer-button slot="top-control-bar">, plus an Info menu (<theoplayer-menu-button>) that shows the current quality and duration. Default UI: a Video.js Button component, registered through THEOplayer.videojs and added to controlBar.
Changing UI with CSS	Open Video UI + Default UI	Both sections have an accent color picker. Open Video UI uses CSS custom properties and ::part(center-play-button). The Default UI overrides its color classes (.theo-primary-color, .vjs-selected, .theo-primary-background) with a --accent-color custom property, so one rule recolors the big play button, progress bar and menus. The settings icon stays visible.
Closed captions & subtitles	Open Video UI	Elephants Dream with a sideloaded SRT (Dutch (SRT), format: 'srt') or WebVTT (English (WebVTT), format: 'webvtt') track, plus CEA-608 and DASH TTML sources. For CEA-608 and TTML, the first captions/subtitles track (English when available) is set to showing on addtrack. Includes a track readout and player.textTrackStyle presets.
Continuous play	Open Video UI	The playhead is saved in localStorage per source and restored on reload. Clear saved position turns saving off until the next play, so a pending timeupdate/pause/pagehide save can't write the position back before a reload.
Bookmarks	Open Video UI	Bookmarks across two streams: set the source, then seek on loadedmetadata. A button adds a bookmark at the current time.
DVR and sliding windows for live streams	Open Video UI	Uses https://demo.unified-streaming.com/k8s/live/stable/live.isml/.m3u8. Controls for −30 s, +30 s, start of window and live. Buffered and seekable bars, scaled to the moving seekable window, with a playhead. Also shows time behind live and program date time.
Fast source switching	Open Video UI	The three requested sources, plus a custom URL/type input. Shows TTFF (play → playing) and time since the source change for the last 10 switches. The initial source doesn't autoplay, so its row shows TTFF only. Events from superseded switches are ignored.
Google DAI	Open Video UI	The form has VOD/Live and HLS/DASH toggles. The ID fields are prefilled with Google's sample streams. Optional fields: API key, plus auth token, network code, stream activity monitor ID and nonce under Advanced options. A key/value editor sets adTagParameters, like Google's VSI demo. A live code block shows the resulting player.source. Below the player: a log of player.ads events, a table of scheduled ad breaks, and stream/content time from player.ads.dai.contentTimeForStreamTime.
Keeping track of time	Open Video UI	Shows currentTime, duration and paused, and the played, buffered and seekable ranges as bars (shared RangeBar component, also used by DVR).
MPEG-5 LCEVC	Open Video UI	DASH/HLS toggle with lcevc: true, the decoder pinned to lcevc_dec.js@1.3.0, and a quality readout.

Verification / not verified

• Checked every demo in Chrome: iframe behavior, plus the full page at 1280px and 400px with no horizontal overflow. Pages stay paused on load; on Fast source switching and Bookmarks, clicking a source or bookmark starts playback. I saw CEA-608 and TTML cues on screen. Clear saved position followed by Reload player starts at 0:00, whether playback was playing or paused. lint, check-format, spellcheck, typecheck and build pass locally.
• LCEVC: DASH and HLS play with the decoder and show the "Enhanced" state in a virtual display. Enhancement quality on real hardware is not verified.
• Google DAI: VOD and live streams load and emit ad events, including with a description_url ad tag parameter. Google's impression/tracking requests returned 403 here, so tracking beacons are not verified, and I did not capture a stream request URL showing the ad tag parameter. Ad blockers can also block the IMA DAI SDK; the page mentions this.

Link to Devin session: https://dolby.devinenterprise.com/sessions/cd9295ea72a94a878e21621ee309983b
Open in Devin Desktop: https://dolby.devinenterprise.com/desktop/session/cd9295ea72a94a878e21621ee309983b?variant=devin

[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