Respect user preference for reduced motion when autoplaying

packages/vidstack/src/core/state/media-player-delegate.ts

@@ -156,7 +156,7 @@ export class MediaPlayerDelegate {
           ?.errorGroup('[vidstack] auto-play request failed')
           .labelledLog(
             'Message',
-            `Autoplay was requested but failed most likely due to browser autoplay policies.${muteMsg}`,
+            `Autoplay was requested but failed most likely due to browser autoplay policies or accessibility reasons.${muteMsg}`,
           )
           .labelledLog('Trigger Event', trigger)
           .labelledLog('Error', error)

packages/vidstack/src/core/state/media-request-manager.ts

@@ -22,6 +22,7 @@ import { MediaPlayerController } from '../api/player-controller';
 import { boundTime } from '../api/player-state';
 import { MediaControls } from '../controls';
 import type { MediaStateManager } from './media-state-manager';
+import { prefersReducedMotion } from '../../utils/aria';
 
 /**
  * This class is responsible for listening to media request events and calling the appropriate
@@ -155,6 +156,7 @@ export class MediaRequestManager extends MediaPlayerController implements MediaR
     try {
       const provider = peek(this.#$provider);
       throwIfNotReadyForPlayback(provider, peek(canPlay));
+      throwIfAutoplayingWithReducedMotion(isAutoPlaying);
       return await provider!.play();
     } catch (error) {
       if (__DEV__) this.#logError('play request failed', error, trigger);
@@ -887,6 +889,15 @@ function throwIfFullscreenNotSupported(
   );
 }
 
+function throwIfAutoplayingWithReducedMotion(autoplaying: boolean) {
+  if (!prefersReducedMotion() || !autoplaying) return;
+  throw Error(
+    __DEV__
+      ? '[vidstack] autoplay is blocked due to user preference for reduced motion'
+      : '[vidstack] autoplay blocked',
+  );
+}
+
 export class MediaRequestContext {
   seeking = false;
   looping = false;

packages/vidstack/src/utils/aria.ts

@@ -7,3 +7,8 @@ export function ariaBool(value: boolean): 'true' | 'false' {
 export function $ariaBool(signal: ReadSignal<boolean>): ReadSignal<'true' | 'false'> {
   return () => ariaBool(signal());
 }
+
+export function prefersReducedMotion() {
+  if (typeof window === 'undefined') return false;
+  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}