Skip to content
Breaking changes

v10.0.0-rc.2

Compare changes on GitHub

Posters and timeline previews now have room for the layers your player needs, while the surrounding controls behave more reliably as media loads.

Breaking changes

  • React posters use compound parts (#2563). Replace <Poster /> with <Poster.Root><Poster.Image /></Poster.Root>. Move image styling to media-poster-image; keep visibility and loading styles on media-poster.
  • React thumbnails use compound parts (#2566). Replace <Thumbnail time={time} /> with <Thumbnail.Root time={time}><Thumbnail.Image /></Thumbnail.Root>, and replace ThumbnailProps with ThumbnailRootProps and ThumbnailImageProps.
  • React slider thumbnails use compound parts (#2568). Replace <Slider.Thumbnail /> with <Slider.Thumbnail.Root><Slider.Thumbnail.Image /></Slider.Thumbnail.Root>. Rename SliderThumbnailProps to SliderThumbnailRootProps, and pass image props to Slider.Thumbnail.Image.
  • HTML thumbnails adopt their image child (#2572). For custom thumbnail markup, provide a native <img> inside <media-thumbnail> or <media-slider-thumbnail>; the thumbnail root now controls that image’s src and srcset. Without a child, style the fallback through ::part(image).

Composable previews

Poster, thumbnail, and slider thumbnail surfaces now separate state from the controlled image. That gives you a stable root for loading state and sizing, plus a place for overlays, blur previews, and other sibling layers. React uses Root and Image parts, while HTML poster and thumbnail elements adopt an optional light-DOM image and otherwise render a fallback image (breaking changes, #2563, #2566, #2568, #2572).

See the Poster reference for HTML and React, Thumbnail for HTML and React, and timeline previews for HTML and React. The guide now explains which thumbnail props the slider supplies and which you provide (#2681).

Controls and skins

Before media metadata is available, time-dependent controls now show their unavailable state instead of offering a misleading zero-duration timeline: seeking, live-edge seeking, the time slider, and picture-in-picture wait until they have a usable range (#2525). Held slider keys now advance steadily, stay in range, and keep controls visible for the full press (#2553). Read the Time reference for HTML and React, and LiveButton for HTML and React (#2680).

The shared skins also tighten narrow-player spacing, keep video controls above captions, and size seek previews responsively (#2558). A finite clipping radius avoids a Safari clip-path bug (#2679), and Safari now applies poster and slider-thumbnail styling correctly when those elements host or slot Shadow DOM content (#2693).

Documentation updates

The docs now cover always-visible controls in the HTML and React guides, compound React radio-group parts, container-scoped error-dialog modality, and playback-adapter terminology in React hooks (#2687, #2688, #2686, #2685).