@cinecrew/cinecrew-player 0.1.6 → 0.1.8

package/README.md

@@ -112,6 +112,7 @@ flowchart LR
 | MP4 / browser-native media | ✅ Browser media element | ✅ Native engine | A directly playable URL or local URI |
 | HLS (`.m3u8`) | ✅ hls.js / native HLS where available | ✅ Native engine | Origin access, valid playlist/segments, compatible codecs |
 | MPEG-TS (`.ts`) | ✅ Bundled patched MPEG-TS client, when browser conditions permit | ✅ VLC path | Browser codecs and CORS; native module availability |
+| Ogg/Theora (`.ogv`) | ✅ `ogv.js` WebAssembly decoder | ✅ Native VLC path | Web uses the versioned ogv.js worker/WASM assets; provide `ogvResourceBase` to self-host them |
 | Hosted-video or share pages | ⚙️ Resolve to a direct media URL with `resolveSource` | ⚙️ Resolve to a direct media URL with `resolveSource` | A watch/share page is not a media stream |
 | Local files | ✅ Platform-supported local/blob URI | ✅ Platform-supported file URI | App obtains and passes the platform-readable URI |
 | Share pages / cloud-drive pages | ⚙️ Optional `resolveSource` | ⚙️ Optional `resolveSource` | Your app resolves authentication and obtains a playable media URL |
@@ -352,6 +353,7 @@ In short: CineCrew’s intended distinction is **one app-facing player package f
 | `videoOnly` | `boolean` | `false` | Start muted in video-only mode. |
 | `audioOnly` | `boolean` | `false` | Start in audio-only presentation. Playback continues while the visual card is shown. |
 | `resolveSource` | callback | — | Optional synchronous or asynchronous resolver for share pages and provider-specific links. Receives `{ uri, ...source }` and `{ platform }`; return a playable URL or `PlayerSource`. Without it, the original source is passed through unchanged. |
+| `ogvResourceBase` | `string` | versioned jsDelivr ogv.js assets | Optional base URL for the OGV decoder’s worker and WebAssembly files. Use this to self-host the matching `ogv@1.9.0/dist/` resources. Web OGV playback is selected by `.ogv` URLs or the `video/ogg` type. |
 | `audioTracks` | `AudioTrack[]` | detected | Optional supplied track list (web). Native tracks are read from the native player. |
 | `selectedAudioTrack` | `string \| number` | first/default track | Initial or preferred audio track. |
 | `resumePosition` | `number` | `0` | Resume position in seconds for on-demand playback. |
@@ -362,7 +364,7 @@ In short: CineCrew’s intended distinction is **one app-facing player package f
 | `onClose`, `onBack` | callbacks | — | App-owned navigation callbacks; Back does not close the player unless your callback does so. |
 | `onAspectRatioChange` | `PlayerAction` | — | Top-level callback invoked after the player applies the selected aspect ratio; `actions.onAspectRatioChange` takes precedence if both are supplied. |
 | `onProgressBarChange` | `(time: string) => void` | — | When the progress bar is shown, reports the played position as zero-padded `HH:MM:SS` once per elapsed playback second, and immediately after a completed seek or restart. Scrubbing reports the committed position, not every intermediate drag update. It is not called when `showProgressBar` is false, `controls.seek` is false, or the live-player UI hides seeking. |
-| `onReady`, `onProgress`, `onPlaying`, `onBuffering`, `onError`, `onEnded`, `onPlaybackRoute` | callbacks | — | Playback lifecycle callbacks. Progress payloads are platform-specific native/browser events. |
+| `onReady`, `onProgress`, `onPlaying`, `onBuffering`, `onError`, `onEnded`, `onPlaybackRoute` | callbacks | — | Playback lifecycle callbacks. `onError` receives a player-facing `message` plus `actualMessage` and the original engine error under `cause`/`err` when available; progress payloads are platform-specific native/browser events. |
 | `onNextEpisode`, `onCwRefresh` | callbacks | — | Episode advancement and post-close refresh hooks. |
 | `renderLiveChat`, `renderEpg` | render functions | — | Web custom-panel render slots. On native, use the chat/EPG integration adapters. |
 | `initialShowLiveChat`, `liveChatNonce` | `boolean`, `number` | `false`, `0` | Open or re-open the live-chat panel (when available). |
@@ -370,6 +372,21 @@ In short: CineCrew’s intended distinction is **one app-facing player package f
 
 `features={{ diagnostics: true }}` enables the diagnostics button and built-in stream status panel on web; `controls.diagnostics` can hide it. `onFullscreen` receives `{ isFullscreen }` after the player requests the fullscreen change. All lifecycle callbacks in the table are optional; native event objects differ from browser events.
 
+Use `onError` to receive the same playback failure shown in the player and inspect the original platform/decoder diagnostic. `message` is the player-facing summary; `actualMessage` prefers the underlying error text when the engine provides one, while `cause` and `err` retain the original engine error/event for logging or app-specific reporting:
+
+```tsx
+<CineCrewPlayer
+  source={source}
+  onError={(error) => {
+    const diagnostic = error instanceof Error
+      ? error.message
+      : error.actualMessage || error.message;
+    showSnackbar(diagnostic);
+    console.error('Playback error details:', error.cause || error.err || error);
+  }}
+/>
+```
+
 ### Player source
 
 ```ts
@@ -406,7 +423,7 @@ type PlayerSource = string | {
 | `actions` | matching `PlayerActions` subset | built-in | Observe play/pause, mute, or fullscreen actions after their built-in behavior runs. |
 | `initialMuted` | `boolean` | `true` | Initial preview mute state. |
 | `theme`, `icons`, `style` | `PlayerTheme`, `PlayerIcons`, platform style | defaults | Customize preview colors, controls, and layout. |
-| `onError`, `onPlaying` | callbacks | — | Playback lifecycle callbacks. |
+| `onError`, `onPlaying` | callbacks | — | Playback lifecycle callbacks. `onError` includes the underlying `actualMessage` and raw `cause`/`err` when available. |
 
 ## Control visibility
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cinecrew/cinecrew-player",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "type": "module",
   "description": "Customizable cross-platform live and on-demand video player for React and React Native.",
   "license": "MIT",
@@ -108,12 +108,14 @@
     "@expo/vector-icons": "^15.1.1",
     "@mediabunny/ac3": "^1.59.0",
     "@react-native-community/slider": "^5.2.0",
+    "dashjs": "^5.2.1",
     "expo-video": "^57.0.2",
+    "flv.js": "^1.6.2",
     "hls.js": "^1.7.3",
     "mediabunny": "^1.59.0",
+    "prop-types": "^15.8.1",
     "react-native-safe-area-context": "^5.7.0",
-    "react-native-svg": "^15.15.4",
-    "prop-types": "^15.8.1"
+    "react-native-svg": "^15.15.4"
   },
   "peerDependencies": {
     "react": ">=18",

package/src/native/InlineLivePlayer.js

@@ -15,6 +15,7 @@ import { ElectronVideoPlayer } from './media/ElectronVideoPlayer';
 import { isAndroid, isElectron, isIOS, isWeb } from '../utils/runtimePlatform';
 import { USER_AGENT } from './media/player/playerConstants';
 import { invokePlayerAction } from '../utils/invokePlayerAction.js';
+import { getPlayerErrorMessage } from '../utils/playerError.js';
 
 function getArtwork(channel) {
   return channel?.logoUrl || channel?.logo || channel?.stream_icon || channel?.posterUrl || channel?.image || '';
@@ -256,7 +257,16 @@ function InlineLivePlayerView({
     const message = typeof detail === 'string' ? detail : detail?.message || 'Could not play this channel.';
     setError(message);
     setLoading(false);
-    onError?.(detail instanceof Error ? detail : { ...detail, message });
+    if (detail instanceof Error) {
+      onError?.(detail);
+      return;
+    }
+    const actualMessage = getPlayerErrorMessage(detail);
+    onError?.({
+      ...detail,
+      message,
+      ...(actualMessage ? { actualMessage } : {}),
+    });
   }, [onError]);
 
   const handlePlaying = useCallback((event) => {

package/src/native/media/WebVideoPlayer.js

@@ -3,7 +3,10 @@ import { View, StyleSheet } from 'react-native';
 import { useWebMediaSession } from './web/useWebMediaSession';
 import { useWebVideoAspectRatio } from './web/useWebVideoAspectRatio';
 import { useWebMpegTsPlayback } from './web/useWebMpegTsPlayback';
+import { useWebFlvPlayback } from './web/useWebFlvPlayback';
 import { useWebHlsPlayback } from './web/useWebHlsPlayback';
+import { useWebDashPlayback } from './web/useWebDashPlayback';
+import { useWebOgvPlayback } from './web/useWebOgvPlayback';
 import { useWebAc3AudioPlayback } from './web/useWebAc3AudioPlayback';
 
 export const WebVideoPlayer = forwardRef(({
@@ -27,8 +30,10 @@ export const WebVideoPlayer = forwardRef(({
   onTogglePlayPause,
   onSeekBy,
   onPlaybackRoute,
+  ogvResourceBase,
 }, ref) => {
   const videoRef = useRef(null);
+  const ogvContainerRef = useRef(null);
   const pausedRef = useRef(paused);
   const playbackRateRef = useRef(playbackRate);
   const lastKnownPosRef = useRef(0);
@@ -38,6 +43,8 @@ export const WebVideoPlayer = forwardRef(({
   const onErrorRef = useRef(onError);
   const playbackErrorRef = useRef(onError);
   const onEndedRef = useRef(onEnded);
+  const onProgressRef = useRef(null);
+  const onPlaybackRouteEventRef = useRef(null);
   const [activeUrl, setActiveUrl] = useState('');
   const [corsMode, setCorsMode] = useState('anonymous');
   const corsModeRef = useRef('anonymous');
@@ -65,6 +72,15 @@ export const WebVideoPlayer = forwardRef(({
     onErrorRef: playbackErrorRef,
     onBufferingRef,
   });
+  const useFlvSource = useWebFlvPlayback({
+    activeUrl,
+    type: streamUrl,
+    isLive,
+    videoRef,
+    pausedRef,
+    onErrorRef: playbackErrorRef,
+    onBufferingRef,
+  });
   const useMpegTsSource = mpegTsPlayback.useMpegTs;
   const useAc3Fallback = mpegTsPlayback.useAc3Fallback;
   const useHlsSource = useWebHlsPlayback({
@@ -74,6 +90,33 @@ export const WebVideoPlayer = forwardRef(({
     pausedRef,
     onErrorRef: playbackErrorRef,
   });
+  const useDashSource = useWebDashPlayback({
+    activeUrl,
+    videoRef,
+    pausedRef,
+    onErrorRef: playbackErrorRef,
+  });
+  const { videoStyle, applyAspectRatio } = useWebVideoAspectRatio(videoAspectRatio, audioOnly);
+  const useOgvSource = useWebOgvPlayback({
+    activeUrl,
+    type: streamUrl,
+    videoRef,
+    playerContainerRef: ogvContainerRef,
+    playerStyle: videoStyle,
+    pausedRef,
+    onErrorRef: playbackErrorRef,
+    onBufferingRef,
+    resourceBase: ogvResourceBase,
+    paused,
+    muted,
+    volume: (volume ?? 100) / 100,
+    playbackRate,
+    videoOnly,
+    onProgressRef,
+    onPlayingRef,
+    onEndedRef,
+    onPlaybackRouteRef: onPlaybackRouteEventRef,
+  });
   const ac3Audio = useWebAc3AudioPlayback({
     active: useAc3Fallback,
     streamUrl: activeUrl,
@@ -84,10 +127,13 @@ export const WebVideoPlayer = forwardRef(({
   });
 
   // 1. Aspect Ratio Styling
-  const { videoStyle, applyAspectRatio } = useWebVideoAspectRatio(videoAspectRatio, audioOnly);
-  const videoSource = useMpegTsSource || useHlsSource ? undefined : activeUrl;
-  let streamMode = useHlsSource ? 'hls' : 'native';
-  if (useMpegTsSource) streamMode = 'mpegts';
+  const videoSource = useMpegTsSource || useFlvSource || useHlsSource || useDashSource || useOgvSource ? undefined : activeUrl;
+  let streamMode = 'native';
+  if (mpegTsPlayback.isFlv) streamMode = 'flv';
+  else if (useMpegTsSource) streamMode = 'mpegts';
+  else if (useHlsSource) streamMode = 'hls';
+  else if (useDashSource) streamMode = 'dash';
+  else if (useOgvSource) streamMode = 'ogv';
   const resolvedScheme = new URL(activeUrl || 'http://localhost', 'http://localhost').protocol.replace(':', '');
 
   // Report active streaming route
@@ -120,6 +166,11 @@ export const WebVideoPlayer = forwardRef(({
       });
     }
   }, [onProgress]);
+  onProgressRef.current = emitProgress;
+  onPlaybackRouteEventRef.current = (attachedUrl) => {
+    const emit = onPlaybackRouteRef.current;
+    if (typeof emit === 'function' && attachedUrl) emit(attachedUrl);
+  };
 
   // The host supplies the media URL. Scheme and source resolution are left to
   // the consumer and the playback engine on each platform.
@@ -161,7 +212,7 @@ export const WebVideoPlayer = forwardRef(({
     ) {
       video.play().catch(() => {});
     }
-  }, [paused, activeUrl]);
+  }, [paused, activeUrl, corsMode]);
 
   // Gain and volume
   useEffect(() => {
@@ -237,7 +288,22 @@ export const WebVideoPlayer = forwardRef(({
 
   return (
     <View style={styles.container} collapsable={false}>
-      {activeUrl ? (
+      {activeUrl && (
+        useOgvSource ? (
+          <div
+            key={activeUrl}
+            ref={ogvContainerRef}
+            data-resolved-scheme={resolvedScheme}
+            data-stream-mode="ogv"
+            className="cinecrew-player__video"
+            style={{
+              ...StyleSheet.absoluteFillObject,
+              width: '100%',
+              height: '100%',
+              backgroundColor: '#000',
+            }}
+          />
+        ) : (
         <video
           key={`${activeUrl}:${corsMode || 'nocors'}`}
           ref={videoRef}
@@ -317,7 +383,8 @@ export const WebVideoPlayer = forwardRef(({
             />
           ))}
         </video>
-      ) : null}
+        )
+      )}
     </View>
   );
 });

package/src/native/media/web/useWebDashPlayback.native.js

@@ -0,0 +1,3 @@
+export function useWebDashPlayback() {
+  return false;
+}

package/src/native/media/web/useWebDashPlayback.web.js

@@ -0,0 +1,84 @@
+import { useEffect } from 'react';
+
+const isDashUrl = (url, type) => {
+  if (type && /dash/i.test(type)) return true;
+  return /\.mpd(?:$|[?#])/i.test(String(url || ''));
+};
+
+function handleAutoplayFailure(video, error) {
+  if (error?.name !== 'NotAllowedError') return;
+  video.muted = true;
+  video.play().catch(() => {});
+}
+
+export function useWebDashPlayback({
+  activeUrl,
+  type,
+  videoRef,
+  pausedRef,
+  onErrorRef,
+}) {
+  const useDash = Boolean(isDashUrl(activeUrl, type));
+
+  useEffect(() => {
+    if (!useDash || !activeUrl || typeof window === 'undefined') return undefined;
+    const video = videoRef.current;
+    if (!video) return undefined;
+
+    let player = null;
+    let disposed = false;
+
+    import('dashjs')
+      .then((mod) => {
+        if (disposed) return;
+        const dashjs = mod.default || mod;
+        if (!dashjs?.MediaPlayer) {
+          onErrorRef.current?.({ message: 'Dash.js is not supported in this browser.' });
+          return;
+        }
+
+        player = dashjs.MediaPlayer().create();
+        video.crossOrigin = 'anonymous';
+        player.initialize(video, activeUrl, !pausedRef.current);
+
+        player.on(dashjs.MediaPlayer.events.ERROR, (event) => {
+          if (disposed) return;
+          const status = Number(event?.error?.data?.response?.status || event?.data?.status);
+          const httpStatus = Number.isFinite(status) && status >= 100 ? status : null;
+          const errorMsg = httpStatus
+            ? `Stream request failed (HTTP ${httpStatus}).`
+            : `MPEG-DASH playback failed (${String(event?.error?.message || event?.message || 'playback error')}).`;
+          onErrorRef.current?.({ message: errorMsg, httpStatus, err: event });
+        });
+
+        const attemptAutoplay = () => {
+          if (disposed || pausedRef.current) return;
+          const playPromise = video.play();
+          playPromise?.catch((err) => handleAutoplayFailure(video, err));
+        };
+
+        player.on(dashjs.MediaPlayer.events.STREAM_INITIALIZED, attemptAutoplay);
+        player.on(dashjs.MediaPlayer.events.CAN_PLAY, attemptAutoplay);
+      })
+      .catch((err) => {
+        if (!disposed) {
+          onErrorRef.current?.({ message: 'Failed to initialize MPEG-DASH engine.', err });
+        }
+      });
+
+    return () => {
+      disposed = true;
+      if (player) {
+        try {
+          player.destroy();
+        } catch {}
+      } else if (video.src === activeUrl) {
+        video.pause();
+        video.removeAttribute('src');
+        video.load();
+      }
+    };
+  }, [activeUrl, useDash, videoRef, pausedRef, onErrorRef]);
+
+  return useDash;
+}

package/src/native/media/web/useWebFlvPlayback.web.js

@@ -0,0 +1,156 @@
+import { useEffect, useRef } from 'react';
+import flvjs from 'flv.js';
+import { getPlayerErrorMessage } from '../../../utils/playerError.js';
+
+const isFlvSource = (url, type) => /flv/i.test(String(type || ''))
+  || /\.flv(?:$|[?#])/i.test(String(url || ''))
+  || /^(?:ws|wss):/i.test(String(url || ''));
+
+function attemptPlayback(video, pausedRef, onAutoplayBlockedRef) {
+  if (pausedRef.current) return;
+  const playResult = video.play();
+  playResult?.catch?.((error) => {
+    if (error?.name !== 'NotAllowedError') return;
+    // Autoplay may be blocked until a user gesture. Keep the requested audio
+    // state intact and expose the player's normal Play control for that gesture.
+    video.pause();
+    pausedRef.current = true;
+    onAutoplayBlockedRef.current?.();
+  });
+}
+
+export function useWebFlvPlayback({
+  activeUrl,
+  type,
+  isLive,
+  videoRef,
+  pausedRef,
+  onErrorRef,
+  onBufferingRef,
+  onAutoplayBlocked,
+}) {
+  const useFlv = Boolean(isFlvSource(activeUrl, type));
+  const onAutoplayBlockedRef = useRef(onAutoplayBlocked);
+  onAutoplayBlockedRef.current = onAutoplayBlocked;
+
+  useEffect(() => {
+    if (!useFlv || !activeUrl || typeof window === 'undefined') return undefined;
+    const video = videoRef.current;
+    if (!video) return undefined;
+
+    const flv = flvjs?.default || flvjs;
+    if (!flv?.isSupported?.()) {
+      onErrorRef.current?.({ message: 'FLV playback is not supported in this browser.' });
+      return undefined;
+    }
+
+    let disposed = false;
+    let playbackErrorReported = false;
+    let specificCodecErrorReported = false;
+    let player;
+    const handleCanPlay = () => {
+      onBufferingRef?.current?.(false);
+      attemptPlayback(video, pausedRef, onAutoplayBlockedRef);
+    };
+    const handleWaiting = () => onBufferingRef?.current?.(true);
+    const handleVideoError = () => {
+      if (disposed || specificCodecErrorReported || video.readyState >= 2) return;
+      const mediaError = video.error;
+      onBufferingRef?.current?.(false);
+      onErrorRef.current?.({
+        message: mediaError?.message || 'The browser could not decode the FLV stream.',
+        err: mediaError,
+      });
+    };
+
+    try {
+      player = flv.createPlayer({
+        type: 'flv',
+        url: activeUrl,
+        isLive: Boolean(isLive),
+        hasVideo: true,
+      }, {
+        // flv.js's worker bundle is webpack-specific and can fail to initialize
+        // under consumer bundlers such as Vite/Metro. Inline transmuxing is
+        // reliable for this bounded remux operation and matches the package's
+        // default behavior.
+        enableWorker: false,
+        enableStashBuffer: true,
+        stashInitialSize: isLive ? 384 * 1024 : 1024 * 1024,
+        lazyLoad: false,
+        autoCleanupSourceBuffer: Boolean(isLive),
+      });
+
+      player.on(flv.Events.ERROR, (errorType, errorDetail, errorInfo) => {
+        if (disposed || specificCodecErrorReported) return;
+        const details = [errorType, errorDetail, errorInfo?.msg, errorInfo?.message]
+          .filter(Boolean)
+          .join(' ');
+        const unsupportedAudio = /unsupported codec in audio frame|unsupported audio codec|audio.*(?:unsupported|not supported)|(?:unsupported|not supported).*audio/i.test(details);
+        const unsupportedVideo = /unsupported codec in video frame|unsupported.*video|video.*(?:unsupported|not supported).*codec/i.test(details);
+        // flv.js rejects individual audio packets with codecs other than AAC
+        // and MP3, but can continue transmuxing the remaining supported audio
+        // and video packets. Don't turn a skippable packet into a fatal player
+        // error or disable the stream's supported audio track.
+        if (unsupportedAudio && !unsupportedVideo) return;
+        if (playbackErrorReported && !unsupportedAudio && !unsupportedVideo) return;
+        playbackErrorReported = true;
+        specificCodecErrorReported = unsupportedAudio || unsupportedVideo;
+        const status = Number(errorInfo?.code || errorInfo?.status);
+        const httpStatus = Number.isFinite(status) && status >= 100 ? status : null;
+        let message;
+        if (httpStatus) {
+          message = `FLV stream request failed (HTTP ${httpStatus}).`;
+        } else if (unsupportedAudio) {
+          message = 'This FLV audio codec is not supported by the browser player. Use AAC or MP3 audio in the FLV stream.';
+        } else if (unsupportedVideo) {
+          message = 'This FLV video codec is not supported by the browser player. Use H.264/AVC video in the FLV stream.';
+        } else {
+          message = `FLV playback failed (${String(errorDetail || errorType || 'unknown error')}).`;
+        }
+        const actualMessage = getPlayerErrorMessage(errorInfo)
+          || [errorType, errorDetail].filter(Boolean).map(String).join(': ')
+          || message;
+        onBufferingRef?.current?.(false);
+        onErrorRef.current?.({
+          message,
+          actualMessage,
+          errorType: String(errorType || ''),
+          errorDetail: String(errorDetail || ''),
+          httpStatus,
+          cause: errorInfo || { errorType, errorDetail },
+          // Keep the existing alias for consumers that already inspect it.
+          err: errorInfo || { errorType, errorDetail },
+        });
+      });
+
+      video.crossOrigin = 'anonymous';
+      video.addEventListener('canplay', handleCanPlay);
+      video.addEventListener('waiting', handleWaiting);
+      video.addEventListener('error', handleVideoError);
+      player.attachMediaElement(video);
+      player.load();
+      attemptPlayback(video, pausedRef, onAutoplayBlockedRef);
+    } catch (error) {
+      onBufferingRef?.current?.(false);
+      onErrorRef.current?.({
+        message: error?.message || 'Failed to initialize FLV playback.',
+        err: error,
+      });
+    }
+
+    return () => {
+      disposed = true;
+      video.removeEventListener('canplay', handleCanPlay);
+      video.removeEventListener('waiting', handleWaiting);
+      video.removeEventListener('error', handleVideoError);
+      if (!player) return;
+      try { player.pause(); } catch {}
+      try { player.unload(); } catch {}
+      try { player.detachMediaElement(); } catch {}
+      try { player.destroy(); } catch {}
+    };
+  }, [activeUrl, isLive, useFlv, videoRef, pausedRef, onErrorRef, onBufferingRef]);
+
+  return useFlv;
+}

package/src/native/media/web/useWebHlsPlayback.web.js

@@ -4,7 +4,7 @@ import Hls from 'hls.js';
 const isHlsUrl = (url) => /\.m3u8(?:$|[?#])/i.test(String(url || ''));
 
 export function useWebHlsPlayback({ activeUrl, isLive, videoRef, pausedRef, onErrorRef }) {
-  const useHls = isLive && isHlsUrl(activeUrl);
+  const useHls = Boolean(isHlsUrl(activeUrl));
 
   useEffect(() => {
     if (!useHls || !activeUrl || typeof window === 'undefined') return undefined;
@@ -43,10 +43,33 @@ export function useWebHlsPlayback({ activeUrl, isLive, videoRef, pausedRef, onEr
       hls.loadSource(activeUrl);
       video.crossOrigin = 'anonymous';
       hls.attachMedia(video);
+      const attemptPlay = () => {
+        if (pausedRef.current) return;
+        const playPromise = video.play();
+        if (playPromise !== undefined) {
+          playPromise.catch((err) => {
+            if (err?.name === 'NotAllowedError') {
+              video.muted = true;
+              video.play().catch(() => {});
+            }
+          });
+        }
+      };
+      hls.on(Hls.Events.MANIFEST_PARSED, attemptPlay);
     } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
       video.src = activeUrl;
       video.load();
-      if (!pausedRef.current) video.play().catch(() => {});
+      if (!pausedRef.current) {
+        const playPromise = video.play();
+        if (playPromise !== undefined) {
+          playPromise.catch((err) => {
+            if (err?.name === 'NotAllowedError') {
+              video.muted = true;
+              video.play().catch(() => {});
+            }
+          });
+        }
+      }
     } else {
       onErrorRef.current?.({ message: 'This browser does not support HLS playback.' });
     }

package/src/native/media/web/useWebMpegTsPlayback.native.js

@@ -1,3 +1,3 @@
 export function useWebMpegTsPlayback() {
-  return { useMpegTs: false, useAc3Fallback: false };
+  return { useMpegTs: false, useAc3Fallback: false, isFlv: false };
 }