Skip to main content

Next Sanity Starter

Mux Video

Studio upload (sanity-plugin-mux-input). Tokens in studio/.env. Preview shows resolution/duration on asset.

Schema

  • media.video — player, poster, autoplay/controls, caption
  • media.videoLoop — loop, poster, allowUnmute
  • Both via module.media (image/video/loop) + carousel slides

Video <MuxPlayer /> (MediaVideo)

  • Lazy @mux/mux-player-react/lazy · aspect from tracks, 16:9 fallback
  • Poster: Sanity or Mux thumbTime, retina ~2×, max 3840px
  • ABR: max 2160p, min 1080p · renditionOrder="desc" · autoplay muted · controls optional
  • Tracking/cookies off (optional re-enable)

Loop (MediaVideoLoop + hls.js)

  • Viewport gate (IO 400px) · prefers-reduced-motion → poster only
  • Poster WebP t=0, srcset up to 1920px
  • ABR: max 1440p, min 540p · object-cover pick · DPR cap 1.25
  • Codecs AV1→HEVC→H.264 (HW via MediaCapabilities) · allowUnmute · carousel pre-buffer

Renditions — 270p–2160p, up to source resolution

Upload — player: 1080p/2160p source · loops: 1080p/1440p, 5–15s, aspect near slot · poster optional (loops: frame 0)

Infra — preconnect stream.mux.com/image.mux.com · next.config image domain · GROQ playbackId + tracks