diff --git a/components/player/MobileVideoPlayer.tsx b/components/player/MobileVideoPlayer.tsx
index 5076eab..da9f581 100644
--- a/components/player/MobileVideoPlayer.tsx
+++ b/components/player/MobileVideoPlayer.tsx
@@ -9,6 +9,7 @@ import { useMobileGestures } from './hooks/useMobileGestures';
import { MobileControlsWrapper } from './mobile/MobileControlsWrapper';
import { MobileOverlay } from './mobile/MobileOverlay';
import { MobileSkipIndicator } from './mobile/MobileSkipIndicator';
+import { getProxyUrl } from './utils/urlUtils';
interface MobileVideoPlayerProps {
src: string;
@@ -87,7 +88,7 @@ export function MobileVideoPlayer({
togglePlay,
});
-
+ const proxiedSrc = getProxyUrl(src);
return (
;
@@ -27,6 +28,7 @@ export function useHlsPlayer({
}
let hls: Hls | null = null;
+ const proxiedSrc = getProxyUrl(src);
// Check if HLS is supported natively (Safari, Mobile Chrome)
// We prefer native playback if available as it's usually more battery efficient
@@ -49,7 +51,7 @@ export function useHlsPlayer({
});
hlsRef.current = hls;
- hls.loadSource(src);
+ hls.loadSource(proxiedSrc);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, () => {
@@ -117,12 +119,12 @@ export function useHlsPlayer({
} else {
console.log('[HLS] Using native HLS support');
// Native HLS support
- video.src = src;
+ video.src = proxiedSrc;
}
} else if (isNativeHlsSupported) {
// Fallback for environments where Hls.js is not supported but native is (e.g. iOS without MSE?)
console.log('[HLS] Using native HLS support (Hls.js not supported)');
- video.src = src;
+ video.src = proxiedSrc;
} else {
console.error('[HLS] HLS not supported in this browser');
}
diff --git a/components/player/utils/urlUtils.ts b/components/player/utils/urlUtils.ts
index c40b256..3349650 100644
--- a/components/player/utils/urlUtils.ts
+++ b/components/player/utils/urlUtils.ts
@@ -22,3 +22,12 @@ export function getCopyUrl(src: string, type: 'original' | 'proxy' = 'original')
return urlToCopy;
}
+
+export function getProxyUrl(src: string): string {
+ if (!src) return '';
+ if (src.includes('/api/proxy')) return src;
+
+ // Handle server-side vs client-side origin
+ const origin = typeof window !== 'undefined' ? window.location.origin : '';
+ return `${origin}/api/proxy?url=${encodeURIComponent(src)}`;
+}