diff --git a/packages/core/src/dom/media/castable/index.ts b/packages/core/src/dom/media/castable/index.ts
index e3ccf130d..92c15cd10 100644
--- a/packages/core/src/dom/media/castable/index.ts
+++ b/packages/core/src/dom/media/castable/index.ts
@@ -2,14 +2,14 @@ import type { MixinReturn } from '@videojs/utils/types';
 import type { RemotePlaybackLike } from '../predicate';
 import { GoogleCastProvider } from './google-cast-provider';
 import { RemotePlayback } from './remote-playback';
-import type { CastableMediaProps, CastableMediaSuperclass } from './types';
+import type { CastableMedia, CastableMediaHostConstructor } from './types';
 import { getDefaultCastOptions, loadCastFramework, requiresCastFramework } from './utils';
 
 export type { CastableMediaElement } from './types';
 
-export const CastableMediaMixin = <Base extends CastableMediaSuperclass>(
+export const CastableMediaMixin = <Base extends CastableMediaHostConstructor>(
   superclass: Base
-): MixinReturn<Base, CastableMediaProps> => {
+): MixinReturn<Base, CastableMedia> => {
   class CastableMedia extends superclass {
     #castOptions = getDefaultCastOptions();
     #castCustomData: Record<string, unknown> | null | undefined;
@@ -222,5 +222,5 @@ export const CastableMediaMixin = <Base extends CastableMediaSuperclass>(
     }
   }
 
-  return CastableMedia as unknown as MixinReturn<Base, CastableMediaProps>;
+  return CastableMedia as unknown as MixinReturn<Base, CastableMedia>;
 };
diff --git a/packages/core/src/dom/media/castable/types.ts b/packages/core/src/dom/media/castable/types.ts
index 9de8c744f..4247357ec 100644
--- a/packages/core/src/dom/media/castable/types.ts
+++ b/packages/core/src/dom/media/castable/types.ts
@@ -2,7 +2,21 @@ import type { RemotePlaybackLike } from '../predicate';
 import type { RemotePlayback } from './remote-playback';
 import type { CastOptions } from './utils';
 
-export interface CastableMediaBase extends EventTarget {
+export interface CastableMediaProps {
+  castReceiver: string | undefined;
+  castContentType: string | undefined;
+  castStreamType: string | undefined;
+  castCustomData: Record<string, unknown> | null | undefined;
+}
+
+export const castableMediaDefaultProps: CastableMediaProps = {
+  castReceiver: undefined,
+  castContentType: undefined,
+  castStreamType: undefined,
+  castCustomData: undefined,
+};
+
+export interface CastableMediaHost extends EventTarget {
   readonly target: HTMLMediaElement | null;
   readonly remote: RemotePlaybackLike | undefined;
   title: string;
@@ -32,20 +46,16 @@ export interface CastableMediaBase extends EventTarget {
   querySelector<K extends keyof HTMLElementTagNameMap>(selectors: K): HTMLElementTagNameMap[K] | null;
 }
 
-export interface CastableMediaProps {
+export interface CastableMedia extends CastableMediaProps {
   readonly remote: RemotePlayback | RemotePlaybackLike | undefined;
   readonly castOptions: CastOptions;
-  castReceiver: string | undefined;
   castSrc: string;
-  castContentType: string | undefined;
-  castStreamType: string | undefined;
-  castCustomData: Record<string, unknown> | null | undefined;
   poster: string;
   title: string;
 }
 
-export type CastableMediaElement = CastableMediaBase & CastableMediaProps;
+export type CastableMediaElement = CastableMediaHost & CastableMedia;
 
-export interface CastableMediaSuperclass {
-  new (...args: any[]): CastableMediaBase;
+export interface CastableMediaHostConstructor {
+  new (...args: any[]): CastableMediaHost;
 }
diff --git a/packages/core/src/dom/media/dash/index.ts b/packages/core/src/dom/media/dash/index.ts
index dd05f35bf..68dfac5e8 100644
--- a/packages/core/src/dom/media/dash/index.ts
+++ b/packages/core/src/dom/media/dash/index.ts
@@ -2,12 +2,20 @@ import * as dashjs from 'dashjs';
 import type { MediaEngineHost } from '../../../core/media/types';
 import { HTMLVideoElementHost } from '../video-host';
 
+export interface DashMediaProps {
+  src: string;
+}
+
+export const dashMediaDefaultProps: DashMediaProps = {
+  src: '',
+};
+
 export class DashMedia
   extends HTMLVideoElementHost
-  implements MediaEngineHost<dashjs.MediaPlayerClass, HTMLVideoElement>
+  implements MediaEngineHost<dashjs.MediaPlayerClass, HTMLVideoElement>, DashMediaProps
 {
   #engine: dashjs.MediaPlayerClass;
-  #src = '';
+  #src = dashMediaDefaultProps.src;
 
   constructor() {
     super();
diff --git a/packages/core/src/dom/media/hls/index.ts b/packages/core/src/dom/media/hls/index.ts
index dfea24387..78710268f 100644
--- a/packages/core/src/dom/media/hls/index.ts
+++ b/packages/core/src/dom/media/hls/index.ts
@@ -22,14 +22,32 @@ export const SourceTypes = {
   MP4: 'video/mp4',
 };
 
-export class HlsMedia extends HTMLVideoElementHost {
+export interface HlsMediaProps {
+  src: string;
+  type: SourceType | undefined;
+  preferPlayback: PlaybackType | undefined;
+  config: Record<string, any>;
+  debug: boolean;
+  preload: PreloadType;
+}
+
+export const hlsMediaDefaultProps: HlsMediaProps = {
+  src: '',
+  type: undefined,
+  preferPlayback: 'mse',
+  config: {},
+  debug: false,
+  preload: 'metadata',
+};
+
+export class HlsMedia extends HTMLVideoElementHost implements HlsMediaProps {
   #delegate: HlsJsMedia | NativeHlsMedia | null = null;
-  #src = '';
-  #type: SourceType | undefined;
-  #preferPlayback: PlaybackType | undefined = 'mse';
-  #config: Record<string, any> = {};
-  #debug = false;
-  #preload: PreloadType = 'metadata';
+  #src = hlsMediaDefaultProps.src;
+  #type = hlsMediaDefaultProps.type;
+  #preferPlayback = hlsMediaDefaultProps.preferPlayback;
+  #config = { ...hlsMediaDefaultProps.config };
+  #debug = hlsMediaDefaultProps.debug;
+  #preload = hlsMediaDefaultProps.preload;
   #loadRequested?: Promise<void> | null;
   #prevEngineProps?: Record<string, any> | null;
 
diff --git a/packages/core/src/dom/media/mux/index.ts b/packages/core/src/dom/media/mux/index.ts
index e42432427..0fbdf8a12 100644
--- a/packages/core/src/dom/media/mux/index.ts
+++ b/packages/core/src/dom/media/mux/index.ts
@@ -1,14 +1,28 @@
 import { CastableMediaMixin } from '../castable';
-import { HlsMedia } from '../hls';
-import { MuxDataMediaMixin } from './mux-data';
+import { type CastableMediaProps, castableMediaDefaultProps } from '../castable/types';
+import { HlsMedia, type HlsMediaProps, hlsMediaDefaultProps } from '../hls';
+import { MuxDataMediaMixin, type MuxDataMediaProps, muxDataMediaDefaultProps } from './mux-data';
 
-export class MuxVideoMedia extends MuxDataMediaMixin(CastableMediaMixin(HlsMedia)) {
+export type { CastableMediaProps, HlsMediaProps, MuxDataMediaProps };
+
+export interface MuxMediaProps extends HlsMediaProps, CastableMediaProps, MuxDataMediaProps {
+  castSrc: string | undefined;
+}
+
+export const muxMediaDefaultProps: MuxMediaProps = {
+  ...hlsMediaDefaultProps,
+  ...castableMediaDefaultProps,
+  ...muxDataMediaDefaultProps,
+  castSrc: undefined,
+};
+
+export class MuxVideoMedia extends MuxDataMediaMixin(CastableMediaMixin(HlsMedia)) implements MuxMediaProps {
   static PLAYER_SOFTWARE_NAME = 'mux-video';
 }
 
 // TODO: HlsMedia extends HTMLVideoElementHost, we should extend
 // HTMLAudioElementHost instead but this would require a HlsMediaMixin,
 // keep it simple for now.
-export class MuxAudioMedia extends MuxDataMediaMixin(CastableMediaMixin(HlsMedia)) {
+export class MuxAudioMedia extends MuxDataMediaMixin(CastableMediaMixin(HlsMedia)) implements MuxMediaProps {
   static PLAYER_SOFTWARE_NAME = 'mux-audio';
 }
diff --git a/packages/core/src/dom/media/mux/mux-data.ts b/packages/core/src/dom/media/mux/mux-data.ts
index 69157a597..26dc07d71 100644
--- a/packages/core/src/dom/media/mux/mux-data.ts
+++ b/packages/core/src/dom/media/mux/mux-data.ts
@@ -5,15 +5,6 @@ import { Hls, type HlsMedia } from '../hls';
 import { getPlayerVersion } from './env';
 import type { MuxDataOptions, MuxDataSdk } from './types';
 
-const MUX_VIDEO_DOMAIN = 'mux.com';
-
-export interface MuxDataMediaHost extends MediaEngineHost<HlsMedia['engine'], HTMLMediaElement> {
-  readonly debug: boolean;
-  attach(target: HTMLMediaElement): void;
-  detach(): void;
-  load(): void;
-}
-
 export interface MuxDataMediaProps {
   MuxDataSdk: MuxDataSdk | undefined;
   beaconCollectionDomain: string | undefined;
@@ -25,6 +16,26 @@ export interface MuxDataMediaProps {
   metadata: MuxDataOptions['data'] | undefined;
 }
 
+export const muxDataMediaDefaultProps: MuxDataMediaProps = {
+  MuxDataSdk: undefined,
+  beaconCollectionDomain: undefined,
+  disableCookies: false,
+  envKey: undefined,
+  playerSoftwareName: undefined,
+  playerSoftwareVersion: undefined,
+  playerInitTime: undefined,
+  metadata: undefined,
+};
+
+const MUX_VIDEO_DOMAIN = 'mux.com';
+
+export interface MuxDataMediaHost extends MediaEngineHost<HlsMedia['engine'], HTMLMediaElement> {
+  readonly debug: boolean;
+  attach(target: HTMLMediaElement): void;
+  detach(): void;
+  load(): void;
+}
+
 export const MuxDataMediaMixin: Mixin<MuxDataMediaHost, MuxDataMediaProps> = (BaseClass) => {
   class MuxDataMedia extends BaseClass {
     #MuxDataSdk: MuxDataSdk | undefined = Mux;
diff --git a/packages/core/src/dom/media/native-hls/index.ts b/packages/core/src/dom/media/native-hls/index.ts
index 7513d5409..955b3588c 100644
--- a/packages/core/src/dom/media/native-hls/index.ts
+++ b/packages/core/src/dom/media/native-hls/index.ts
@@ -3,9 +3,19 @@ import { NativeHlsMediaErrorsMixin } from './errors';
 
 export type PreloadType = '' | 'none' | 'metadata' | 'auto';
 
-class NativeHlsMediaBase extends HTMLVideoElementHost {
-  #src = '';
-  #preload: PreloadType = 'metadata';
+export interface NativeHlsMediaProps {
+  src: string;
+  preload: PreloadType;
+}
+
+export const nativeHlsMediaDefaultProps: NativeHlsMediaProps = {
+  src: '',
+  preload: 'metadata',
+};
+
+class NativeHlsMediaBase extends HTMLVideoElementHost implements NativeHlsMediaProps {
+  #src = nativeHlsMediaDefaultProps.src;
+  #preload = nativeHlsMediaDefaultProps.preload;
 
   get engine() {
     return null;
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index f75ce4c63..64c5e02b1 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -67,13 +67,11 @@ export { Time } from './ui/time';
 export { TimeSlider } from './ui/time-slider';
 export { Tooltip, type TooltipContextValue, useTooltipContext } from './ui/tooltip';
 export { VolumeSlider } from './ui/volume-slider';
-
-// Media utilities
-export { attachMediaElement } from './utils/attach-media-element';
-export { mediaProps } from './utils/media-props';
 // Utilities
 export { mergeProps } from './utils/merge-props';
 export type { HTMLProps, RenderFunction, RenderProp, UIComponentProps } from './utils/types';
+// Media utilities
+export { useAttachMedia } from './utils/use-attach-media';
 export { composeRefs, useComposedRefs } from './utils/use-composed-refs';
 export { useDestroy } from './utils/use-destroy';
 export { useLatestRef } from './utils/use-latest-ref';
diff --git a/packages/react/src/media/dash-video/index.tsx b/packages/react/src/media/dash-video/index.tsx
index 73abf2f13..818f58483 100644
--- a/packages/react/src/media/dash-video/index.tsx
+++ b/packages/react/src/media/dash-video/index.tsx
@@ -1,24 +1,28 @@
 'use client';
 
-import { DashMedia } from '@videojs/core/dom/media/dash';
-import type { InferClassProps } from '@videojs/utils/types';
-import type { PropsWithChildren, VideoHTMLAttributes } from 'react';
+import type { DashMediaProps } from '@videojs/core/dom/media/dash';
+import { DashMedia, dashMediaDefaultProps } from '@videojs/core/dom/media/dash';
+import type { ReactNode, VideoHTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import { attachMediaElement } from '../../utils/attach-media-element';
-import { mediaProps } from '../../utils/media-props';
+import { useAttachMedia } from '../../utils/use-attach-media';
 import { useComposedRefs } from '../../utils/use-composed-refs';
 import { useMediaInstance } from '../../utils/use-media-instance';
+import { useSyncProps } from '../../utils/use-sync-props';
 
-export type DashVideoProps = PropsWithChildren<VideoHTMLAttributes<HTMLVideoElement>> &
-  InferClassProps<typeof DashMedia>;
+export interface DashVideoProps
+  extends Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof DashMediaProps>,
+    Partial<DashMediaProps> {
+  children?: ReactNode;
+}
 
 export const DashVideo = forwardRef<HTMLVideoElement, DashVideoProps>(function DashVideo({ children, ...props }, ref) {
-  const mediaApi = useMediaInstance(DashMedia);
-
-  const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);
+  const media = useMediaInstance(DashMedia);
+  const attachRef = useAttachMedia(media);
+  const composedRef = useComposedRefs(attachRef, ref);
+  const htmlProps = useSyncProps(media, props, dashMediaDefaultProps);
 
   return (
-    <video ref={composedRef} {...mediaProps(mediaApi, DashMedia, props)}>
+    <video ref={composedRef} {...htmlProps}>
       {children}
     </video>
   );
diff --git a/packages/react/src/media/hls-video/index.tsx b/packages/react/src/media/hls-video/index.tsx
index 4207000c1..423572257 100644
--- a/packages/react/src/media/hls-video/index.tsx
+++ b/packages/react/src/media/hls-video/index.tsx
@@ -1,23 +1,28 @@
 'use client';
 
-import { HlsMedia } from '@videojs/core/dom/media/hls';
-import type { InferClassProps } from '@videojs/utils/types';
-import type { PropsWithChildren, VideoHTMLAttributes } from 'react';
+import type { HlsMediaProps } from '@videojs/core/dom/media/hls';
+import { HlsMedia, hlsMediaDefaultProps } from '@videojs/core/dom/media/hls';
+import type { ReactNode, VideoHTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import { attachMediaElement } from '../../utils/attach-media-element';
-import { mediaProps } from '../../utils/media-props';
+import { useAttachMedia } from '../../utils/use-attach-media';
 import { useComposedRefs } from '../../utils/use-composed-refs';
 import { useMediaInstance } from '../../utils/use-media-instance';
+import { useSyncProps } from '../../utils/use-sync-props';
 
-export type HlsVideoProps = PropsWithChildren<VideoHTMLAttributes<HTMLVideoElement>> & InferClassProps<typeof HlsMedia>;
+export interface HlsVideoProps
+  extends Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof HlsMediaProps>,
+    Partial<HlsMediaProps> {
+  children?: ReactNode;
+}
 
 export const HlsVideo = forwardRef<HTMLVideoElement, HlsVideoProps>(function HlsVideo({ children, ...props }, ref) {
-  const mediaApi = useMediaInstance(HlsMedia);
-
-  const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);
+  const media = useMediaInstance(HlsMedia);
+  const attachRef = useAttachMedia(media);
+  const composedRef = useComposedRefs(attachRef, ref);
+  const htmlProps = useSyncProps(media, props, hlsMediaDefaultProps);
 
   return (
-    <video ref={composedRef} {...mediaProps(mediaApi, HlsMedia, props)}>
+    <video ref={composedRef} {...htmlProps}>
       {children}
     </video>
   );
diff --git a/packages/react/src/media/mux-audio/index.tsx b/packages/react/src/media/mux-audio/index.tsx
index 15f105bad..0dbd86f36 100644
--- a/packages/react/src/media/mux-audio/index.tsx
+++ b/packages/react/src/media/mux-audio/index.tsx
@@ -1,25 +1,33 @@
-import { MuxAudioMedia } from '@videojs/core/dom/media/mux';
-import type { InferClassProps } from '@videojs/utils/types';
-import type { AudioHTMLAttributes, PropsWithChildren } from 'react';
+'use client';
+
+import type { MuxMediaProps } from '@videojs/core/dom/media/mux';
+import { MuxAudioMedia, muxMediaDefaultProps } from '@videojs/core/dom/media/mux';
+import type { AudioHTMLAttributes, ReactNode } from 'react';
 import { forwardRef } from 'react';
-import { attachMediaElement } from '../../utils/attach-media-element';
-import { mediaProps } from '../../utils/media-props';
+import { useAttachMedia } from '../../utils/use-attach-media';
 import { useComposedRefs } from '../../utils/use-composed-refs';
 import { useMediaInstance } from '../../utils/use-media-instance';
+import { useSyncProps } from '../../utils/use-sync-props';
 
-export type MuxAudioProps = PropsWithChildren<AudioHTMLAttributes<HTMLAudioElement>> &
-  InferClassProps<typeof MuxAudioMedia>;
-
-export const MuxAudio = forwardRef<HTMLAudioElement, MuxAudioProps>(({ children, ...props }, ref) => {
-  const mediaApi = useMediaInstance(MuxAudioMedia);
+export interface MuxAudioProps
+  extends Omit<AudioHTMLAttributes<HTMLAudioElement>, keyof MuxMediaProps>,
+    Partial<MuxMediaProps> {
+  children?: ReactNode;
+}
 
-  const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);
+export const MuxAudio = forwardRef<HTMLAudioElement, MuxAudioProps>(function MuxAudio({ children, ...props }, ref) {
+  const media = useMediaInstance(MuxAudioMedia);
+  const attachRef = useAttachMedia(media);
+  const composedRef = useComposedRefs(attachRef, ref);
+  const htmlProps = useSyncProps(media, props, muxMediaDefaultProps);
 
   return (
-    <audio ref={composedRef} {...mediaProps(mediaApi, MuxAudioMedia, props)}>
+    <audio ref={composedRef} {...htmlProps}>
       {children}
     </audio>
   );
 });
 
-export default MuxAudio;
+export namespace MuxAudio {
+  export type Props = MuxAudioProps;
+}
diff --git a/packages/react/src/media/mux-video/index.tsx b/packages/react/src/media/mux-video/index.tsx
index f6577850d..d60adbc51 100644
--- a/packages/react/src/media/mux-video/index.tsx
+++ b/packages/react/src/media/mux-video/index.tsx
@@ -1,24 +1,28 @@
 'use client';
 
-import { MuxVideoMedia } from '@videojs/core/dom/media/mux';
-import type { InferClassProps } from '@videojs/utils/types';
-import type { PropsWithChildren, VideoHTMLAttributes } from 'react';
+import type { MuxMediaProps } from '@videojs/core/dom/media/mux';
+import { MuxVideoMedia, muxMediaDefaultProps } from '@videojs/core/dom/media/mux';
+import type { ReactNode, VideoHTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import { attachMediaElement } from '../../utils/attach-media-element';
-import { mediaProps } from '../../utils/media-props';
+import { useAttachMedia } from '../../utils/use-attach-media';
 import { useComposedRefs } from '../../utils/use-composed-refs';
 import { useMediaInstance } from '../../utils/use-media-instance';
+import { useSyncProps } from '../../utils/use-sync-props';
 
-export type MuxVideoProps = PropsWithChildren<VideoHTMLAttributes<HTMLVideoElement>> &
-  InferClassProps<typeof MuxVideoMedia>;
+export interface MuxVideoProps
+  extends Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof MuxMediaProps>,
+    Partial<MuxMediaProps> {
+  children?: ReactNode;
+}
 
 export const MuxVideo = forwardRef<HTMLVideoElement, MuxVideoProps>(function MuxVideo({ children, ...props }, ref) {
-  const mediaApi = useMediaInstance(MuxVideoMedia);
-
-  const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);
+  const media = useMediaInstance(MuxVideoMedia);
+  const attachRef = useAttachMedia(media);
+  const composedRef = useComposedRefs(attachRef, ref);
+  const htmlProps = useSyncProps(media, props, muxMediaDefaultProps);
 
   return (
-    <video ref={composedRef} {...mediaProps(mediaApi, MuxVideoMedia, props)}>
+    <video ref={composedRef} {...htmlProps}>
       {children}
     </video>
   );
diff --git a/packages/react/src/media/native-hls-video/index.tsx b/packages/react/src/media/native-hls-video/index.tsx
index bf95cd0d9..b7f92c4c5 100644
--- a/packages/react/src/media/native-hls-video/index.tsx
+++ b/packages/react/src/media/native-hls-video/index.tsx
@@ -1,27 +1,31 @@
 'use client';
 
-import { NativeHlsMedia } from '@videojs/core/dom/media/native-hls';
-import type { InferClassProps } from '@videojs/utils/types';
-import type { PropsWithChildren, VideoHTMLAttributes } from 'react';
+import type { NativeHlsMediaProps } from '@videojs/core/dom/media/native-hls';
+import { NativeHlsMedia, nativeHlsMediaDefaultProps } from '@videojs/core/dom/media/native-hls';
+import type { ReactNode, VideoHTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import { attachMediaElement } from '../../utils/attach-media-element';
-import { mediaProps } from '../../utils/media-props';
+import { useAttachMedia } from '../../utils/use-attach-media';
 import { useComposedRefs } from '../../utils/use-composed-refs';
 import { useMediaInstance } from '../../utils/use-media-instance';
+import { useSyncProps } from '../../utils/use-sync-props';
 
-export type NativeHlsVideoProps = PropsWithChildren<VideoHTMLAttributes<HTMLVideoElement>> &
-  InferClassProps<typeof NativeHlsMedia>;
+export interface NativeHlsVideoProps
+  extends Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof NativeHlsMediaProps>,
+    Partial<NativeHlsMediaProps> {
+  children?: ReactNode;
+}
 
 export const NativeHlsVideo = forwardRef<HTMLVideoElement, NativeHlsVideoProps>(function NativeHlsVideo(
   { children, ...props },
   ref
 ) {
-  const mediaApi = useMediaInstance(NativeHlsMedia);
-
-  const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);
+  const media = useMediaInstance(NativeHlsMedia);
+  const attachRef = useAttachMedia(media);
+  const composedRef = useComposedRefs(attachRef, ref);
+  const htmlProps = useSyncProps(media, props, nativeHlsMediaDefaultProps);
 
   return (
-    <video ref={composedRef} {...mediaProps(mediaApi, NativeHlsMedia, props)}>
+    <video ref={composedRef} {...htmlProps}>
       {children}
     </video>
   );
diff --git a/packages/react/src/media/simple-hls-video/index.tsx b/packages/react/src/media/simple-hls-video/index.tsx
index a7572b2ba..732492cf3 100644
--- a/packages/react/src/media/simple-hls-video/index.tsx
+++ b/packages/react/src/media/simple-hls-video/index.tsx
@@ -1,25 +1,32 @@
 'use client';
 
 import { SimpleHlsMedia } from '@videojs/core/dom/media/simple-hls';
-import type { PropsWithChildren, VideoHTMLAttributes } from 'react';
+import type { SpfMediaProps } from '@videojs/spf/dom';
+import { spfMediaDefaultProps } from '@videojs/spf/dom';
+import type { ReactNode, VideoHTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import { attachMediaElement } from '../../utils/attach-media-element';
-import { mediaProps } from '../../utils/media-props';
+import { useAttachMedia } from '../../utils/use-attach-media';
 import { useComposedRefs } from '../../utils/use-composed-refs';
 import { useMediaInstance } from '../../utils/use-media-instance';
+import { useSyncProps } from '../../utils/use-sync-props';
 
-export type SimpleHlsVideoProps = PropsWithChildren<VideoHTMLAttributes<HTMLVideoElement>>;
+export interface SimpleHlsVideoProps
+  extends Omit<VideoHTMLAttributes<HTMLVideoElement>, keyof SpfMediaProps>,
+    Partial<SpfMediaProps> {
+  children?: ReactNode;
+}
 
 export const SimpleHlsVideo = forwardRef<HTMLVideoElement, SimpleHlsVideoProps>(function SimpleHlsVideo(
   { children, ...props },
   ref
 ) {
-  const mediaApi = useMediaInstance(SimpleHlsMedia);
-
-  const composedRef = useComposedRefs(attachMediaElement(mediaApi), ref);
+  const media = useMediaInstance(SimpleHlsMedia);
+  const attachRef = useAttachMedia(media);
+  const composedRef = useComposedRefs(attachRef, ref);
+  const htmlProps = useSyncProps(media, props, spfMediaDefaultProps);
 
   return (
-    <video ref={composedRef} {...mediaProps(mediaApi, SimpleHlsMedia, props)}>
+    <video ref={composedRef} {...htmlProps}>
       {children}
     </video>
   );
diff --git a/packages/react/src/utils/attach-media-element.ts b/packages/react/src/utils/attach-media-element.ts
deleted file mode 100644
index 12478159a..000000000
--- a/packages/react/src/utils/attach-media-element.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-interface Attachable {
-  attach(target: EventTarget): void;
-  detach(): void;
-}
-
-export function attachMediaElement<T extends HTMLVideoElement>(media: Attachable): (element: T | null) => void {
-  return (element: T | null) => {
-    if (element) {
-      media.attach(element);
-    } else {
-      media.detach();
-    }
-    // React 19+ accepts a cleanup function as the return value
-    return () => media.detach();
-  };
-}
diff --git a/packages/react/src/utils/media-props.ts b/packages/react/src/utils/media-props.ts
deleted file mode 100644
index b9e976cf6..000000000
--- a/packages/react/src/utils/media-props.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import type { Media } from '@videojs/core';
-
-type AnyClass = abstract new (...args: any[]) => any;
-
-function getSettableProps(DelegateClass: AnyClass): Set<string> {
-  const props = new Set<string>();
-  for (let proto = DelegateClass.prototype; proto && proto !== Object.prototype; proto = Object.getPrototypeOf(proto)) {
-    for (const key of Object.getOwnPropertyNames(proto)) {
-      const desc = Object.getOwnPropertyDescriptor(proto, key);
-      if (desc?.set) props.add(key);
-    }
-  }
-  return props;
-}
-
-export function mediaProps(media: Media, DelegateClass: AnyClass, props: Record<string, any>) {
-  const delegateKeys = getSettableProps(DelegateClass);
-  const rest: Record<string, any> = {};
-
-  for (const key of Object.keys(props)) {
-    if (delegateKeys.has(key)) {
-      const value = props[key];
-      if ((media as any)[key] !== value) {
-        (media as any)[key] = value;
-      }
-    } else {
-      rest[key] = props[key];
-    }
-  }
-
-  return rest;
-}
diff --git a/packages/react/src/utils/use-attach-media.ts b/packages/react/src/utils/use-attach-media.ts
new file mode 100644
index 000000000..8cdb9d258
--- /dev/null
+++ b/packages/react/src/utils/use-attach-media.ts
@@ -0,0 +1,16 @@
+'use client';
+
+import type { MediaEngineHost } from '@videojs/core';
+import type { RefCallback } from 'react';
+import { useCallback } from 'react';
+
+export function useAttachMedia<T extends HTMLMediaElement>(media: MediaEngineHost): RefCallback<T> {
+  return useCallback(
+    (element: T | null) => {
+      if (element) media.attach?.(element);
+      else media.detach?.();
+      return () => media.detach?.();
+    },
+    [media]
+  );
+}
diff --git a/packages/react/src/utils/use-sync-props.ts b/packages/react/src/utils/use-sync-props.ts
new file mode 100644
index 000000000..ce92c0572
--- /dev/null
+++ b/packages/react/src/utils/use-sync-props.ts
@@ -0,0 +1,20 @@
+import { isUndefined } from '@videojs/utils/predicate';
+
+export function useSyncProps<Props extends object, Rest extends Record<string, unknown>>(
+  target: Props,
+  props: Partial<Props> & Rest,
+  defaults: Props
+): Omit<Rest, keyof Props> {
+  const rest: Record<string, unknown> = {};
+
+  for (const key in props) {
+    if (key in defaults) {
+      const value = isUndefined(props[key]) ? (defaults as Record<string, unknown>)[key] : props[key];
+      if (target[key as keyof typeof target] !== value) target[key as keyof typeof target] = value as any;
+    } else {
+      rest[key] = props[key];
+    }
+  }
+
+  return rest as Omit<Rest, keyof Props>;
+}
diff --git a/packages/spf/src/dom/index.ts b/packages/spf/src/dom/index.ts
index d337dc9b2..eb0572dd1 100644
--- a/packages/spf/src/dom/index.ts
+++ b/packages/spf/src/dom/index.ts
@@ -12,6 +12,6 @@ export type { PlaybackRateOwners, PlaybackRateState } from './features/track-pla
 export { trackPlaybackRate } from './features/track-playback-rate';
 export { appendSegment } from './media/append-segment';
 export { flushBuffer } from './media/buffer-flusher';
-export type { SpfMediaAPI } from './playback-engine/adapter';
-export { SpfMedia, SpfMediaMixin } from './playback-engine/adapter';
+export type { SpfMediaAPI, SpfMediaProps } from './playback-engine/adapter';
+export { SpfMedia, SpfMediaMixin, spfMediaDefaultProps } from './playback-engine/adapter';
 export { destroyVttParser, parseVttSegment } from './text/parse-vtt-segment';
diff --git a/packages/spf/src/dom/playback-engine/adapter.ts b/packages/spf/src/dom/playback-engine/adapter.ts
index 1398ec0b5..d545234d3 100644
--- a/packages/spf/src/dom/playback-engine/adapter.ts
+++ b/packages/spf/src/dom/playback-engine/adapter.ts
@@ -3,10 +3,18 @@ import { update } from '../../core/signals/primitives';
 import type { PlaybackEngineConfig } from './engine';
 import { createPlaybackEngine, type PlaybackEngine } from './engine';
 
-export interface SpfMediaAPI {
-  readonly engine: PlaybackEngine;
+export interface SpfMediaProps {
   src: string;
   preload: '' | 'none' | 'metadata' | 'auto';
+}
+
+export const spfMediaDefaultProps: SpfMediaProps = {
+  src: '',
+  preload: '',
+};
+
+export interface SpfMediaAPI extends SpfMediaProps {
+  readonly engine: PlaybackEngine;
   attach(mediaElement: HTMLMediaElement): void;
   detach(): void;
   destroy(): void;
@@ -35,7 +43,7 @@ export function SpfMediaMixin<Base extends Constructor<any>>(BaseClass: Base) {
   class SpfMediaImpl extends BaseClass {
     #engine: PlaybackEngine;
     #config: PlaybackEngineConfig;
-    #preload: '' | 'none' | 'metadata' | 'auto' = '';
+    #preload: '' | 'none' | 'metadata' | 'auto' = spfMediaDefaultProps.preload;
 
     /** Pending loadstart listener from a deferred play() retry, if any. */
     #loadstartListener: (() => void) | null = null;
diff --git a/packages/utils/src/types/types.ts b/packages/utils/src/types/types.ts
index 133a2f64d..0ada39d48 100644
--- a/packages/utils/src/types/types.ts
+++ b/packages/utils/src/types/types.ts
@@ -22,20 +22,3 @@ export type Simplify<T> = { [KeyType in keyof T]: T[KeyType] } & {};
 export type NonNullableObject<T extends object> = {
   [P in keyof T]-?: Exclude<T[P], null | undefined>;
 };
-
-// Detects readonly vs writable properties via conditional type identity check.
-type IfEquals<X, Y, A, B> = (<T>() => T extends X ? 1 : 2) extends <T>() => T extends Y ? 1 : 2 ? A : B;
-
-type WritableKeys<T> = {
-  [K in keyof T]-?: IfEquals<{ [Q in K]: T[K] }, { -readonly [Q in K]: T[K] }, K, never>;
-}[keyof T];
-
-type SettableKeys<T> = {
-  [K in WritableKeys<T>]: T[K] extends (...args: any[]) => any ? never : K;
-}[WritableKeys<T>];
-
-type ExcludeInternal<K> = K extends `_${string}` ? never : K;
-
-export type InferClassProps<D extends abstract new (...args: any[]) => any> = Partial<
-  Pick<InstanceType<D>, ExcludeInternal<SettableKeys<InstanceType<D>>>>
->;