@nikelroot/video-player 0.2.5 → 0.2.7

package/README.md

@@ -37,7 +37,30 @@ export function Example() {
 }
 ```
 
-When `active` is `true`, pressing `F` toggles fullscreen. When `active` is `false`, the player releases native playback loading so inactive MP4 players do not keep playback requests open; with `preload="metadata"`, inactive native videos still load metadata.
+When `active` is `true`, pressing `F` toggles fullscreen.
+
+## Multiple MP4 players
+
+Use `active` when rendering several video players on the same page and only one of them should be ready for playback.
+
+```tsx
+<VideoPlayer
+  videoSrc="https://cdn.example.com/video-a.mp4"
+  sourceType="native"
+  active={isSelected}
+  preload="metadata"
+/>
+```
+
+This solves a switching problem where previous MP4 players can keep large browser media requests open after another player starts. In Chrome DevTools this often appears as new video requests staying in a long `Pending` state, even when CDN, disk, and network throughput are healthy.
+
+For native MP4 sources:
+
+- `active={true}` allows playback and fullscreen.
+- `active={false}` releases playback loading so inactive players do not keep competing media requests open.
+- `preload="metadata"` still loads metadata for inactive native videos, so duration and basic media information can be available without starting playback loading.
+
+By default `exclusivePlayback` is enabled. When a player starts playback, the previous active native MP4 player is paused and its media source is released, freeing the browser media request before the next video loads.
 
 For public CDN-hosted videos, prefer non-credentialed requests unless the CDN is explicitly configured for cookies:
 
@@ -56,4 +79,3 @@ Build before publishing:
 ```bash
 npm run build
 ```
-# video-player

package/dist/index.cjs

@@ -862,6 +862,7 @@ var VideoPlayerBase = (props, ref) => {
   const controlTime = (0, import_react3.useRef)(null);
   const sourceLoadId = (0, import_react3.useRef)(0);
   const sourceLoadMode = (0, import_react3.useRef)("native");
+  const pendingPlay = (0, import_react3.useRef)(false);
   const [playingState, setPlayingState] = (0, import_react3.useState)(!!defaultPlaying);
   const [mutedState, setMutedState] = (0, import_react3.useState)(!!defaultMuted);
   const [durationState, setDurationState] = (0, import_react3.useState)(0);
@@ -907,6 +908,7 @@ var VideoPlayerBase = (props, ref) => {
   }, []);
   const resetMediaForSourceChange = (0, import_react3.useCallback)(() => {
     clearTimers();
+    pendingPlay.current = false;
     if (hlsRef.current) {
       hlsRef.current.destroy();
       hlsRef.current = null;
@@ -920,6 +922,7 @@ var VideoPlayerBase = (props, ref) => {
   const releaseNativeMedia = (0, import_react3.useCallback)(() => {
     const video = videoRef.current;
     if (!video) return;
+    pendingPlay.current = false;
     video.pause();
     if (sourceLoadMode.current !== "native" || !isVideoSourceAttached(video)) return;
     video.removeAttribute("src");
@@ -1029,15 +1032,22 @@ var VideoPlayerBase = (props, ref) => {
   const playAction = (0, import_react3.useCallback)(async () => {
     const el = videoRef.current;
     if (!el) return;
+    pendingPlay.current = true;
     pauseOtherVideos(el);
     ensureNativeMediaAttached();
+    if (sourceLoadMode.current === "native" && !canAttemptPlayback(el)) return;
     try {
       await el.play();
+      pendingPlay.current = false;
       clearErrorState();
       setNextPlaying(true);
       notifyActiveChange(el, "play");
     } catch (e) {
-      if (isInterruptedPlayRequestError(e)) return;
+      if (isInterruptedPlayRequestError(e)) {
+        pendingPlay.current = true;
+        return;
+      }
+      pendingPlay.current = false;
       console.debug(e);
       reportError(e, { type: "play" }, messages.playFailed);
     }
@@ -1065,6 +1075,7 @@ var VideoPlayerBase = (props, ref) => {
   const pauseAction = (0, import_react3.useCallback)(() => {
     const el = videoRef.current;
     if (!el) return;
+    pendingPlay.current = false;
     el.pause();
     setNextPlaying(false);
     notifyActiveChange(el, "pause");
@@ -1393,11 +1404,14 @@ var VideoPlayerBase = (props, ref) => {
     const error = video == null ? void 0 : video.error;
     const src = (video == null ? void 0 : video.currentSrc) || videoSrc;
     if (hlsRef.current && src.startsWith("blob:")) return;
+    pendingPlay.current = false;
     reportError(error, { type: "native", src }, getNativeVideoErrorMessage(error, messages));
   }, [messages, reportError, videoSrc]);
   const videoLoadedHandler = (0, import_react3.useCallback)(() => {
     clearErrorState();
-  }, [clearErrorState]);
+    if (!pendingPlay.current || active === false || !canAttemptPlayback(videoRef.current)) return;
+    void playAction();
+  }, [active, clearErrorState, playAction]);
   const mouseMoveHandler = (0, import_react3.useCallback)(() => {
     if (controlTime.current) clearTimeout(controlTime.current);
     if (!showControlRef.current) {

package/dist/index.js

@@ -833,6 +833,7 @@ var VideoPlayerBase = (props, ref) => {
   const controlTime = useRef2(null);
   const sourceLoadId = useRef2(0);
   const sourceLoadMode = useRef2("native");
+  const pendingPlay = useRef2(false);
   const [playingState, setPlayingState] = useState(!!defaultPlaying);
   const [mutedState, setMutedState] = useState(!!defaultMuted);
   const [durationState, setDurationState] = useState(0);
@@ -878,6 +879,7 @@ var VideoPlayerBase = (props, ref) => {
   }, []);
   const resetMediaForSourceChange = useCallback(() => {
     clearTimers();
+    pendingPlay.current = false;
     if (hlsRef.current) {
       hlsRef.current.destroy();
       hlsRef.current = null;
@@ -891,6 +893,7 @@ var VideoPlayerBase = (props, ref) => {
   const releaseNativeMedia = useCallback(() => {
     const video = videoRef.current;
     if (!video) return;
+    pendingPlay.current = false;
     video.pause();
     if (sourceLoadMode.current !== "native" || !isVideoSourceAttached(video)) return;
     video.removeAttribute("src");
@@ -1000,15 +1003,22 @@ var VideoPlayerBase = (props, ref) => {
   const playAction = useCallback(async () => {
     const el = videoRef.current;
     if (!el) return;
+    pendingPlay.current = true;
     pauseOtherVideos(el);
     ensureNativeMediaAttached();
+    if (sourceLoadMode.current === "native" && !canAttemptPlayback(el)) return;
     try {
       await el.play();
+      pendingPlay.current = false;
       clearErrorState();
       setNextPlaying(true);
       notifyActiveChange(el, "play");
     } catch (e) {
-      if (isInterruptedPlayRequestError(e)) return;
+      if (isInterruptedPlayRequestError(e)) {
+        pendingPlay.current = true;
+        return;
+      }
+      pendingPlay.current = false;
       console.debug(e);
       reportError(e, { type: "play" }, messages.playFailed);
     }
@@ -1036,6 +1046,7 @@ var VideoPlayerBase = (props, ref) => {
   const pauseAction = useCallback(() => {
     const el = videoRef.current;
     if (!el) return;
+    pendingPlay.current = false;
     el.pause();
     setNextPlaying(false);
     notifyActiveChange(el, "pause");
@@ -1364,11 +1375,14 @@ var VideoPlayerBase = (props, ref) => {
     const error = video == null ? void 0 : video.error;
     const src = (video == null ? void 0 : video.currentSrc) || videoSrc;
     if (hlsRef.current && src.startsWith("blob:")) return;
+    pendingPlay.current = false;
     reportError(error, { type: "native", src }, getNativeVideoErrorMessage(error, messages));
   }, [messages, reportError, videoSrc]);
   const videoLoadedHandler = useCallback(() => {
     clearErrorState();
-  }, [clearErrorState]);
+    if (!pendingPlay.current || active === false || !canAttemptPlayback(videoRef.current)) return;
+    void playAction();
+  }, [active, clearErrorState, playAction]);
   const mouseMoveHandler = useCallback(() => {
     if (controlTime.current) clearTimeout(controlTime.current);
     if (!showControlRef.current) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nikelroot/video-player",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "description": "Standalone React video player with HLS support.",
   "type": "module",
   "main": "./dist/index.cjs",