@nikelroot/video-player 0.2.4 → 0.2.6

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 media loading so inactive MP4 players do not keep network requests open.
+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

@@ -781,6 +781,9 @@ var isLikelyHlsSource = (src) => {
     return /\.m3u8($|[?#])/i.test(src);
   }
 };
+var getSourceLoadMode = (sourceType, type, src) => {
+  return sourceType === "hls" || sourceType !== "native" && type !== "video" && isLikelyHlsSource(src) ? "hls" : "native";
+};
 var assignRef = (ref, value) => {
   if (!ref) return;
   if (typeof ref === "function") {
@@ -1275,15 +1278,20 @@ var VideoPlayerBase = (props, ref) => {
       videoSrc
     ]
   );
-  const loadVideoNative = (0, import_react3.useCallback)((loadId = sourceLoadId.current) => {
-    if (loadId !== sourceLoadId.current) return;
-    const video = videoRef.current;
-    if (!video) return;
-    sourceLoadMode.current = "native";
-    video.src = videoSrc;
-    video.currentTime = initialTime;
-    if (autoPlay) void playAction();
-  }, [autoPlay, initialTime, playAction, videoSrc]);
+  const loadVideoNative = (0, import_react3.useCallback)(
+    (loadId = sourceLoadId.current, options) => {
+      if (loadId !== sourceLoadId.current) return;
+      const video = videoRef.current;
+      if (!video) return;
+      sourceLoadMode.current = "native";
+      video.src = videoSrc;
+      if (!(options == null ? void 0 : options.metadataOnly)) {
+        video.currentTime = initialTime;
+        if (autoPlay) void playAction();
+      }
+    },
+    [autoPlay, initialTime, playAction, videoSrc]
+  );
   const loadVideoHls = (0, import_react3.useCallback)(async (loadId = sourceLoadId.current) => {
     const video = videoRef.current;
     const canNativeHls = !!(video == null ? void 0 : video.canPlayType) && video.canPlayType("application/vnd.apple.mpegurl") !== "";
@@ -1438,9 +1446,14 @@ var VideoPlayerBase = (props, ref) => {
     liveStabilityMode.current = false;
     liveStallEvents.current = [];
     resetMediaForSourceChange();
-    if (active === false) return;
-    const nextSourceLoadMode = sourceType === "hls" || sourceType !== "native" && type !== "video" && isLikelyHlsSource(videoSrc) ? "hls" : "native";
+    const nextSourceLoadMode = getSourceLoadMode(sourceType, type, videoSrc);
     sourceLoadMode.current = nextSourceLoadMode;
+    if (active === false) {
+      if (nextSourceLoadMode === "native" && preload === "metadata") {
+        loadVideoNative(loadId, { metadataOnly: true });
+      }
+      return;
+    }
     if (nextSourceLoadMode === "hls") {
       if (sourceType === "hls") void loadVideo(initialTime, loadId);
       else void loadVideoHls(loadId);

package/dist/index.js

@@ -752,6 +752,9 @@ var isLikelyHlsSource = (src) => {
     return /\.m3u8($|[?#])/i.test(src);
   }
 };
+var getSourceLoadMode = (sourceType, type, src) => {
+  return sourceType === "hls" || sourceType !== "native" && type !== "video" && isLikelyHlsSource(src) ? "hls" : "native";
+};
 var assignRef = (ref, value) => {
   if (!ref) return;
   if (typeof ref === "function") {
@@ -1246,15 +1249,20 @@ var VideoPlayerBase = (props, ref) => {
       videoSrc
     ]
   );
-  const loadVideoNative = useCallback((loadId = sourceLoadId.current) => {
-    if (loadId !== sourceLoadId.current) return;
-    const video = videoRef.current;
-    if (!video) return;
-    sourceLoadMode.current = "native";
-    video.src = videoSrc;
-    video.currentTime = initialTime;
-    if (autoPlay) void playAction();
-  }, [autoPlay, initialTime, playAction, videoSrc]);
+  const loadVideoNative = useCallback(
+    (loadId = sourceLoadId.current, options) => {
+      if (loadId !== sourceLoadId.current) return;
+      const video = videoRef.current;
+      if (!video) return;
+      sourceLoadMode.current = "native";
+      video.src = videoSrc;
+      if (!(options == null ? void 0 : options.metadataOnly)) {
+        video.currentTime = initialTime;
+        if (autoPlay) void playAction();
+      }
+    },
+    [autoPlay, initialTime, playAction, videoSrc]
+  );
   const loadVideoHls = useCallback(async (loadId = sourceLoadId.current) => {
     const video = videoRef.current;
     const canNativeHls = !!(video == null ? void 0 : video.canPlayType) && video.canPlayType("application/vnd.apple.mpegurl") !== "";
@@ -1409,9 +1417,14 @@ var VideoPlayerBase = (props, ref) => {
     liveStabilityMode.current = false;
     liveStallEvents.current = [];
     resetMediaForSourceChange();
-    if (active === false) return;
-    const nextSourceLoadMode = sourceType === "hls" || sourceType !== "native" && type !== "video" && isLikelyHlsSource(videoSrc) ? "hls" : "native";
+    const nextSourceLoadMode = getSourceLoadMode(sourceType, type, videoSrc);
     sourceLoadMode.current = nextSourceLoadMode;
+    if (active === false) {
+      if (nextSourceLoadMode === "native" && preload === "metadata") {
+        loadVideoNative(loadId, { metadataOnly: true });
+      }
+      return;
+    }
     if (nextSourceLoadMode === "hls") {
       if (sourceType === "hls") void loadVideo(initialTime, loadId);
       else void loadVideoHls(loadId);

package/package.json

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