diff --git a/frontend/src/apis/queries/main/useFetchMainLive.ts b/frontend/src/apis/queries/main/useFetchMainLive.ts
index e7ec23c8..466da53c 100644
--- a/frontend/src/apis/queries/main/useFetchMainLive.ts
+++ b/frontend/src/apis/queries/main/useFetchMainLive.ts
@@ -7,6 +7,6 @@ export const useMainLive = () => {
   return useSuspenseQuery<MainLive[], Error>({
     queryKey: ['mainLive'],
     queryFn: fetchMainLive,
-    refetchOnWindowFocus: false,
+    refetchOnWindowFocus: false
   });
 };
diff --git a/frontend/src/components/main/LiveVideoCard.tsx b/frontend/src/components/main/LiveVideoCard.tsx
index ca8908d4..d55f0461 100644
--- a/frontend/src/components/main/LiveVideoCard.tsx
+++ b/frontend/src/components/main/LiveVideoCard.tsx
@@ -1,5 +1,4 @@
 import { useNavigate } from 'react-router-dom';
-import { useEffect, useState, useRef } from 'react';
 import styled from 'styled-components';
 
 import sampleProfile from '@assets/sample_profile.png';
@@ -7,7 +6,7 @@ import ShowInfoBadge from '@common/ShowInfoBadge';
 import { ASSETS } from '@constants/assets';
 import { RecentLive } from '@type/live';
 import { LiveBadge, LiveViewCountBadge } from './ThumbnailBadge';
-import usePlayer from '@hooks/usePlayer';
+import { useVideoPreview } from '@hooks/useVideoPreview';
 
 interface LiveVideoCardProps {
   videoData: RecentLive;
@@ -15,71 +14,32 @@ interface LiveVideoCardProps {
 
 const LiveVideoCard = ({ videoData }: LiveVideoCardProps) => {
   const navigate = useNavigate();
-  const [isHovered, setIsHovered] = useState(false);
-  const hoverTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const thumbnailRef = useRef<HTMLDivElement>(null);
-
-  const { concurrentUserCount, category, channel, tags, defaultThumbnailImageUrl, liveId, liveImageUrl, liveTitle, streamUrl } =
-    videoData;
-
-  const videoRef = usePlayer(streamUrl);
-
-  useEffect(() => {
-    const video = videoRef.current;
-    if (!video) return;
-
-    const resetVideo = () => {
-      video.pause();
-      video.currentTime = 0;
-    };
-
-    const playVideo = () => {
-      video.currentTime = 0;
-      video.play();
-    };
-
-    const clearHoverTimeout = () => {
-      if (hoverTimeoutRef.current) {
-        clearTimeout(hoverTimeoutRef.current);
-        hoverTimeoutRef.current = null;
-      }
-    };
-
-    if (isHovered) {
-      hoverTimeoutRef.current = setTimeout(playVideo, 500);
-      return;
-    }
-    
-    clearHoverTimeout();
-    resetVideo();
-
-    return clearHoverTimeout;
-  }, [isHovered]);
 
-  const handleLiveClick = () => {
-    navigate(`/live/${liveId}`);
-  };
+  const {
+    concurrentUserCount,
+    category,
+    channel,
+    tags,
+    defaultThumbnailImageUrl,
+    liveId,
+    liveImageUrl,
+    liveTitle,
+    streamUrl
+  } = videoData;
 
-  const handleMouseEnter = () => {
-    setIsHovered(true);
-  };
+  const { isHovered, isVideoLoaded, videoRef, handleMouseEnter, handleMouseLeave } = useVideoPreview(streamUrl);
 
-  const handleMouseLeave = () => {
-    setIsHovered(false);
+  const handleLiveClick = () => {
+    navigate(`/live/${liveId}`);
   };
 
   return (
     <VideoCardContainer>
-      <ThumbnailContainer
-        ref={thumbnailRef}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-        onClick={handleLiveClick}
-      >
-        <VideoBox $isVisible={isHovered}>
-          <video ref={videoRef} muted playsInline />
+      <ThumbnailContainer onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} onClick={handleLiveClick}>
+        <VideoBox $isVisible={isHovered && isVideoLoaded}>
+          <video ref={videoRef} muted playsInline preload="none" />
         </VideoBox>
-        <VideoCardThumbnail $isVideoVisible={isHovered}>
+        <VideoCardThumbnail $isVideoVisible={isHovered && isVideoLoaded}>
           <VideoCardImage src={defaultThumbnailImageUrl ?? liveImageUrl} />
         </VideoCardThumbnail>
         <VideoCardDescription>
@@ -132,7 +92,7 @@ const VideoBox = styled.div<{ $isVisible: boolean }>`
   width: 100%;
   height: 100%;
   opacity: ${(props) => (props.$isVisible ? 1 : 0)};
-  transition: opacity 0.3s ease-in-out;
+  transition: opacity 0.3s ease-in-out 0.6s;
   z-index: 1;
 
   video {
@@ -203,6 +163,7 @@ const VideoCardArea = styled.div`
     ${({ theme }) => theme.tokenTypographys['display-bold16']}
     color: ${({ theme }) => theme.tokenColors['text-strong']};
     margin-bottom: 8px;
+    cursor: pointer;
   }
   .video_card_name {
     ${({ theme }) => theme.tokenTypographys['display-medium14']}
diff --git a/frontend/src/components/main/MiniPlayerItem.tsx b/frontend/src/components/main/MiniPlayerItem.tsx
index be0bff49..09f1b89e 100644
--- a/frontend/src/components/main/MiniPlayerItem.tsx
+++ b/frontend/src/components/main/MiniPlayerItem.tsx
@@ -1,4 +1,3 @@
-import { memo, useCallback, useMemo } from 'react';
 import styled from 'styled-components';
 import { MainLive } from '@type/live';
 
@@ -9,39 +8,26 @@ interface MiniPlayerItemProps {
   isSelected: boolean;
 }
 
-const MiniPlayerItem = memo<MiniPlayerItemProps>(
-  ({ item, onMouseEnter, index, isSelected }) => {
-    const handleMouseEnter = useCallback(() => {
-      onMouseEnter(index);
-    }, [onMouseEnter, index]);
+const MiniPlayerItem = ({ item, onMouseEnter, index, isSelected }: MiniPlayerItemProps) => {
+  const thumbnailUrl = item.defaultThumbnailImageUrl ?? item.liveImageUrl;
 
-    const thumbnailUrl = useMemo(
-      () => item.defaultThumbnailImageUrl ?? item.liveImageUrl,
-      [item.defaultThumbnailImageUrl, item.liveImageUrl]
-    );
-
-    return (
-      <MiniPlayerItemStyled role="none" onMouseEnter={handleMouseEnter}>
-        <Thumbnail role="tab" aria-selected={isSelected}>
-          <ThumbnailWrapper $backgroundUrl={thumbnailUrl} />
-        </Thumbnail>
-        <TooltipContent>
-          <Title>{item.liveTitle}</Title>
-          <StreamerName>{item.channel.channelName}</StreamerName>
-        </TooltipContent>
-      </MiniPlayerItemStyled>
-    );
-  },
-  (prevProps, nextProps) => {
-    return (
-      prevProps.isSelected === nextProps.isSelected &&
-      prevProps.item.liveId === nextProps.item.liveId &&
-      prevProps.index === nextProps.index
-    );
-  }
-);
-
-MiniPlayerItem.displayName = 'MiniPlayerItem';
+  return (
+    <MiniPlayerItemStyled
+      role="none"
+      onMouseEnter={() => {
+        onMouseEnter(index);
+      }}
+    >
+      <Thumbnail role="tab" aria-selected={isSelected}>
+        <ThumbnailWrapper $backgroundUrl={thumbnailUrl} />
+      </Thumbnail>
+      <TooltipContent>
+        <Title>{item.liveTitle}</Title>
+        <StreamerName>{item.channel.channelName}</StreamerName>
+      </TooltipContent>
+    </MiniPlayerItemStyled>
+  );
+};
 
 export default MiniPlayerItem;
 
diff --git a/frontend/src/components/main/RecommendLive.tsx b/frontend/src/components/main/RecommendLive.tsx
index 9df3c8e7..9b04e25d 100644
--- a/frontend/src/components/main/RecommendLive.tsx
+++ b/frontend/src/components/main/RecommendLive.tsx
@@ -1,62 +1,20 @@
-import { useEffect, useState, useCallback, useRef, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 
-import AnimatedProfileSection from './AnimatedProfileSection';
-import AnimatedLiveHeader from './AnimatedLiveHeader';
-import RecommendList from './RecommendList';
 import sampleProfile from '@assets/sample_profile.png';
 import { RECOMMEND_LIVE } from '@constants/recommendLive';
-import useRotatingPlayer from '@hooks/useRotatePlayer';
 import { useMainLive } from '@queries/main/useFetchMainLive';
+import useMainLiveRotation from '@hooks/useMainLiveRotation';
+
+import AnimatedProfileSection from './AnimatedProfileSection';
+import AnimatedLiveHeader from './AnimatedLiveHeader';
+import RecommendList from './RecommendList';
 
 const RecommendLive = () => {
   const navigate = useNavigate();
-  const { videoRef, initPlayer } = useRotatingPlayer();
-  const { data: mainLiveData } = useMainLive();
-  const [currentUrlIndex, setCurrentUrlIndex] = useState(0);
-  const recommendListRef = useRef<HTMLDivElement>(null);
-  const [isTransitioning, setIsTransitioning] = useState(false);
-  const prevUrlIndexRef = useRef(currentUrlIndex);
-  const isInitialMount = useRef(true);
-
-  useEffect(() => {
-    if (!mainLiveData) return;
-    if (!mainLiveData[currentUrlIndex]) return;
 
-    const handleTransition = async () => {
-      const videoUrl = mainLiveData[currentUrlIndex].streamUrl;
-
-      if (isInitialMount.current) {
-        initPlayer(videoUrl);
-        setTimeout(() => {
-          isInitialMount.current = false;
-        }, 100);
-        return;
-      }
-
-      if (prevUrlIndexRef.current !== currentUrlIndex) {
-        setIsTransitioning(true);
-        await new Promise((resolve) => setTimeout(resolve, 200));
-
-        initPlayer(videoUrl);
-        prevUrlIndexRef.current = currentUrlIndex;
-
-        setTimeout(() => {
-          setIsTransitioning(false);
-        }, 100);
-      }
-    };
-
-    handleTransition();
-  }, [mainLiveData, currentUrlIndex, initPlayer]);
-
-  const onSelect = useCallback((index: number) => {
-    setCurrentUrlIndex(index);
-  }, []);
-
-  const currentLiveData = useMemo(() => mainLiveData?.[currentUrlIndex], [mainLiveData, currentUrlIndex]);
-  
+  const { data: mainLiveData } = useMainLive();
+  const { currentLiveData, isTransitioning, videoRef, onSelect } = useMainLiveRotation(mainLiveData);
   const { liveId, liveTitle, concurrentUserCount, channel, category } = currentLiveData;
 
   return (
@@ -68,12 +26,7 @@ const RecommendLive = () => {
         <AnimatedLiveHeader concurrentUserCount={concurrentUserCount} liveTitle={liveTitle} />
         <RecommendLiveInformation>
           <AnimatedProfileSection channel={channel} category={category} profileImage={sampleProfile} />
-          <RecommendList
-            ref={recommendListRef}
-            mainLiveData={mainLiveData}
-            onSelect={onSelect}
-            currentLiveId={liveId}
-          />
+          <RecommendList mainLiveData={mainLiveData} onSelect={onSelect} currentLiveId={liveId} />
         </RecommendLiveInformation>
       </RecommendLiveWrapper>
     </RecommendLiveContainer>
diff --git a/frontend/src/components/main/ReplayVideoCard.tsx b/frontend/src/components/main/ReplayVideoCard.tsx
index 2a4d2231..a2928e64 100644
--- a/frontend/src/components/main/ReplayVideoCard.tsx
+++ b/frontend/src/components/main/ReplayVideoCard.tsx
@@ -1,4 +1,3 @@
-import { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 
@@ -6,8 +5,8 @@ import { ReplayBadge, ReplayViewCountBadge } from './ThumbnailBadge';
 import sampleProfile from '@assets/sample_profile.png';
 import ShowInfoBadge from '@common/ShowInfoBadge';
 import { ASSETS } from '@constants/assets';
-import usePlayer from '@hooks/usePlayer';
 import { ReplayStream } from '@type/replay';
+import { useVideoPreview } from '@hooks/useVideoPreview';
 
 interface ReplayVideoCardProps {
   videoData: ReplayStream;
@@ -15,44 +14,10 @@ interface ReplayVideoCardProps {
 
 const ReplayVideoCard = ({ videoData }: ReplayVideoCardProps) => {
   const navigate = useNavigate();
-  const [isHovered, setIsHovered] = useState(false);
-  const hoverTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   const { category, channel, tags, thumbnailImageUrl, livePr, replayUrl, videoTitle, videoId } = videoData;
 
-  const videoRef = usePlayer(replayUrl);
-
-  useEffect(() => {
-    const video = videoRef.current;
-    if (!video) return;
-
-    const resetVideo = () => {
-      video.pause();
-      video.currentTime = 0;
-    };
-
-    const playVideo = () => {
-      video.currentTime = 0;
-      video.play();
-    };
-
-    const clearHoverTimeout = () => {
-      if (hoverTimeoutRef.current) {
-        clearTimeout(hoverTimeoutRef.current);
-        hoverTimeoutRef.current = null;
-      }
-    };
-
-    if (isHovered) {
-      hoverTimeoutRef.current = setTimeout(playVideo, 500);
-      return;
-    }
-
-    clearHoverTimeout();
-    resetVideo();
-
-    return clearHoverTimeout;
-  }, [isHovered]);
+  const { isHovered, isVideoLoaded, videoRef, handleMouseEnter, handleMouseLeave } = useVideoPreview(replayUrl);
 
   const handleReplayClick = () => {
     navigate(`/replay/${videoId}`);
@@ -60,27 +25,25 @@ const ReplayVideoCard = ({ videoData }: ReplayVideoCardProps) => {
 
   return (
     <VideoCardContainer>
-      <VideoCardThumbnail
-        onClick={handleReplayClick}
-        onMouseEnter={() => setIsHovered(true)}
-        onMouseLeave={() => setIsHovered(false)}
-      >
-        <VideoBox $isVisible={isHovered}>
+      <ThumbnailContainer onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} onClick={handleReplayClick}>
+        <VideoBox $isVisible={isHovered && isVideoLoaded}>
           <video ref={videoRef} muted playsInline />
         </VideoBox>
-        <VideoCardImage src={thumbnailImageUrl} />
+        <VideoCardThumbnail $isVideoVisible={isHovered && isVideoLoaded}>
+          <VideoCardImage src={thumbnailImageUrl} />
+        </VideoCardThumbnail>
         <VideoCardDescription>
           <ReplayBadge />
           <ReplayViewCountBadge count={livePr} />
         </VideoCardDescription>
-      </VideoCardThumbnail>
+      </ThumbnailContainer>
 
       <VideoCardWrapper>
         <VideoCardProfile>
-          <img src={sampleProfile} />
+          <img src={sampleProfile} alt="profile" />
         </VideoCardProfile>
         <VideoCardArea>
-          <span className="video_card_title" style={{ cursor: 'pointer' }} onClick={handleReplayClick}>
+          <span className="video_card_title" onClick={handleReplayClick}>
             {videoTitle}
           </span>
           <span className="video_card_name">{channel.channelName}</span>
@@ -99,18 +62,17 @@ const ReplayVideoCard = ({ videoData }: ReplayVideoCardProps) => {
 export default ReplayVideoCard;
 
 const VideoCardContainer = styled.div`
+  position: relative;
   word-wrap: break-word;
   word-break: break-all;
 `;
 
-const VideoCardThumbnail = styled.div`
-  background: #21242a url(${ASSETS.IMAGES.THUMBNAIL.DEFAULT}) no-repeat center center / cover;
-  overflow: hidden;
-  border-radius: 12px;
-  display: block;
-  padding-top: 56.25%;
+const ThumbnailContainer = styled.div`
   position: relative;
   cursor: pointer;
+  padding-top: 56.25%;
+  border-radius: 12px;
+  overflow: hidden;
 `;
 
 const VideoBox = styled.div<{ $isVisible: boolean }>`
@@ -120,7 +82,7 @@ const VideoBox = styled.div<{ $isVisible: boolean }>`
   width: 100%;
   height: 100%;
   opacity: ${(props) => (props.$isVisible ? 1 : 0)};
-  transition: opacity 0.3s ease-in-out;
+  transition: opacity 0.3s ease-in-out 0.6s;
   z-index: 1;
 
   video {
@@ -133,10 +95,19 @@ const VideoBox = styled.div<{ $isVisible: boolean }>`
   }
 `;
 
-const VideoCardImage = styled.img`
+const VideoCardThumbnail = styled.div<{ $isVideoVisible: boolean }>`
   position: absolute;
   top: 0;
   left: 0;
+  width: 100%;
+  height: 100%;
+  background: #21242a url(${ASSETS.IMAGES.THUMBNAIL.DEFAULT}) no-repeat center center / cover;
+  opacity: ${(props) => (props.$isVideoVisible ? 0 : 1)};
+  transition: opacity 0.3s ease-in-out;
+  z-index: 2;
+`;
+
+const VideoCardImage = styled.img`
   width: 100%;
   height: 100%;
   object-fit: cover;
@@ -148,6 +119,7 @@ const VideoCardDescription = styled.div`
   left: 10px;
   display: flex;
   gap: 4px;
+  z-index: 3;
 `;
 
 const VideoCardWrapper = styled.div`
@@ -160,9 +132,9 @@ const VideoCardProfile = styled.div`
   margin-right: 10px;
   background: ${({ theme }) => theme.tokenColors['surface-alt']} no-repeat 50% / cover;
   border-radius: 50%;
-  margin-top: 5px;
   display: block;
   overflow: hidden;
+  margin-top: 5px;
   width: 40px;
   height: 40px;
 
@@ -181,6 +153,7 @@ const VideoCardArea = styled.div`
     ${({ theme }) => theme.tokenTypographys['display-bold16']}
     color: ${({ theme }) => theme.tokenColors['text-strong']};
     margin-bottom: 8px;
+    cursor: pointer;
   }
   .video_card_name {
     ${({ theme }) => theme.tokenTypographys['display-medium14']}
diff --git a/frontend/src/hooks/useMainLiveRotation.ts b/frontend/src/hooks/useMainLiveRotation.ts
new file mode 100644
index 00000000..6e2ed2f7
--- /dev/null
+++ b/frontend/src/hooks/useMainLiveRotation.ts
@@ -0,0 +1,58 @@
+import { MainLive } from '@type/live';
+import { useEffect, useRef, useState } from 'react';
+import useRotatingPlayer from './useRotatePlayer';
+
+const MOUNT_DELAY = 100;
+const TRANSITION_DELAY = 300;
+
+const useMainLiveRotation = (mainLiveData: MainLive[]) => {
+  const { videoRef, initPlayer } = useRotatingPlayer();
+
+  const [currentUrlIndex, setCurrentUrlIndex] = useState(0);
+  const [isTransitioning, setIsTransitioning] = useState(false);
+  const prevUrlIndexRef = useRef(currentUrlIndex);
+  const isInitialMount = useRef(true);
+
+  useEffect(() => {
+    if (!mainLiveData[currentUrlIndex]) return;
+
+    const handleTransition = async () => {
+      const videoUrl = mainLiveData[currentUrlIndex].streamUrl;
+
+      if (isInitialMount.current) {
+        initPlayer(videoUrl);
+        setTimeout(() => {
+          isInitialMount.current = false;
+        }, MOUNT_DELAY);
+        return;
+      }
+
+      if (prevUrlIndexRef.current !== currentUrlIndex) {
+        setIsTransitioning(true);
+        await new Promise((resolve) => setTimeout(resolve, TRANSITION_DELAY));
+        initPlayer(videoUrl);
+        prevUrlIndexRef.current = currentUrlIndex;
+
+        setTimeout(() => {
+          setIsTransitioning(false);
+        }, MOUNT_DELAY);
+      }
+    };
+
+    handleTransition();
+  }, [mainLiveData, currentUrlIndex, initPlayer]);
+
+  const onSelect = (index: number) => {
+    setCurrentUrlIndex(index);
+  };
+
+  return {
+    currentLiveData: mainLiveData[currentUrlIndex],
+    currentUrlIndex,
+    isTransitioning,
+    videoRef,
+    onSelect
+  };
+};
+
+export default useMainLiveRotation;
diff --git a/frontend/src/hooks/useVideoPreview/index.ts b/frontend/src/hooks/useVideoPreview/index.ts
new file mode 100644
index 00000000..5adc4ff0
--- /dev/null
+++ b/frontend/src/hooks/useVideoPreview/index.ts
@@ -0,0 +1,71 @@
+import usePreviewPlayer from '@hooks/useVideoPreview/usePreviewPlayer';
+import { useEffect, useRef, useState } from 'react';
+
+interface UseVideoPreviewReturn {
+  isHovered: boolean;
+  isVideoLoaded: boolean;
+  videoRef: React.RefObject<HTMLVideoElement>;
+  handleMouseEnter: () => void;
+  handleMouseLeave: () => void;
+}
+
+export const useVideoPreview = (url: string, hoverDelay: number = 400): UseVideoPreviewReturn => {
+  const [isHovered, setIsHovered] = useState(false);
+  const [isVideoLoaded, setIsVideoLoaded] = useState(false);
+  const hoverTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const [videoRef, playerController] = usePreviewPlayer();
+
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+
+    const handleLoadedData = () => {
+      setIsVideoLoaded(true);
+    };
+
+    video.addEventListener('loadeddata', handleLoadedData);
+
+    return () => {
+      video.removeEventListener('loadeddata', handleLoadedData);
+      playerController.reset();
+    };
+  }, [playerController]);
+
+  useEffect(() => {
+    const clearHoverTimeout = () => {
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+        hoverTimeoutRef.current = null;
+      }
+    };
+
+    if (isHovered) {
+      clearHoverTimeout();
+      hoverTimeoutRef.current = setTimeout(() => {
+        playerController.loadSource(url);
+        playerController.play();
+      }, hoverDelay);
+    } else {
+      clearHoverTimeout();
+      playerController.reset();
+    }
+
+    return clearHoverTimeout;
+  }, [isHovered, isVideoLoaded, url, hoverDelay, playerController]);
+
+  const handleMouseEnter = () => {
+    setIsHovered(true);
+  };
+
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+
+  return {
+    isHovered,
+    isVideoLoaded,
+    videoRef,
+    handleMouseEnter,
+    handleMouseLeave
+  };
+};
diff --git a/frontend/src/hooks/useVideoPreview/usePreviewPlayer.ts b/frontend/src/hooks/useVideoPreview/usePreviewPlayer.ts
new file mode 100644
index 00000000..0f07121d
--- /dev/null
+++ b/frontend/src/hooks/useVideoPreview/usePreviewPlayer.ts
@@ -0,0 +1,86 @@
+import Hls from 'hls.js';
+import { useEffect, useRef } from 'react';
+
+interface PlayerController {
+  play: () => Promise<void>;
+  pause: () => void;
+  reset: () => void;
+  loadSource: (url: string) => void;
+}
+
+export default function usePreviewPlayer(): [React.RefObject<HTMLVideoElement>, PlayerController] {
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+  const hlsRef = useRef<Hls | null>(null);
+
+  const initializeHls = (url: string) => {
+    const videoElement = videoRef.current;
+    if (!videoElement || !url) return;
+
+    if (hlsRef.current) {
+      hlsRef.current.destroy();
+      hlsRef.current = null;
+    }
+
+    const isNativeHLS = videoElement.canPlayType('application/vnd.apple.mpegurl');
+
+    if (isNativeHLS) {
+      videoElement.src = url;
+      return;
+    }
+
+    if (Hls.isSupported()) {
+      const hls = new Hls({
+        enableWorker: true,
+        lowLatencyMode: true
+      });
+
+      hlsRef.current = hls;
+      hls.loadSource(url);
+      hls.attachMedia(videoElement);
+
+      hls.on(Hls.Events.ERROR, (_event, data) => {
+        console.error('HLS.js error:', data);
+      });
+    }
+  };
+
+  useEffect(() => {
+    return () => {
+      if (hlsRef.current) {
+        hlsRef.current.destroy();
+        hlsRef.current = null;
+      }
+    };
+  }, []);
+
+  const playerController: PlayerController = {
+    loadSource: (url: string) => {
+      initializeHls(url);
+    },
+    play: async () => {
+      if (videoRef.current) {
+        videoRef.current.currentTime = 0;
+        return videoRef.current.play();
+      }
+      return Promise.reject('Video element not found');
+    },
+    pause: () => {
+      if (videoRef.current) {
+        videoRef.current.pause();
+      }
+    },
+    reset: () => {
+      if (hlsRef.current) {
+        hlsRef.current.destroy();
+        hlsRef.current = null;
+      }
+      if (videoRef.current) {
+        videoRef.current.pause();
+        videoRef.current.src = '';
+        videoRef.current.load();
+      }
+    }
+  };
+
+  return [videoRef, playerController];
+}