diff --git a/packages/roomkit-react/src/Prebuilt/common/hooks.ts b/packages/roomkit-react/src/Prebuilt/common/hooks.ts
index 5f2690cb1a..80575ca970 100644
--- a/packages/roomkit-react/src/Prebuilt/common/hooks.ts
+++ b/packages/roomkit-react/src/Prebuilt/common/hooks.ts
@@ -1,5 +1,6 @@
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useMedia } from 'react-use';
+import { HMSHLSPlayer } from '@100mslive/hls-player';
 import { JoinForm_JoinBtnType } from '@100mslive/types-prebuilt/elements/join_form';
 import {
   parsedUserAgent,
@@ -121,3 +122,28 @@ export const useMobileHLSStream = () => {
   const { screenType } = useRoomLayoutConferencingScreen();
   return isMobile && screenType === 'hls_live_streaming';
 };
+
+export const useKeyboardHandler = (isPaused: boolean, hlsPlayer: HMSHLSPlayer) => {
+  const handleKeyEvent = useCallback(
+    async (event: KeyboardEvent) => {
+      switch (event.key) {
+        case ' ':
+          if (isPaused) {
+            await hlsPlayer?.play();
+          } else {
+            hlsPlayer?.pause();
+          }
+          break;
+        case 'ArrowRight':
+          hlsPlayer?.seekTo(hlsPlayer?.getVideoElement().currentTime + 10);
+          break;
+        case 'ArrowLeft':
+          hlsPlayer?.seekTo(hlsPlayer?.getVideoElement().currentTime - 10);
+          break;
+      }
+    },
+    [hlsPlayer, isPaused],
+  );
+
+  return handleKeyEvent;
+};
diff --git a/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx b/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx
index e1327df85c..e754cf4958 100644
--- a/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx
+++ b/packages/roomkit-react/src/Prebuilt/layouts/HLSView.jsx
@@ -36,7 +36,7 @@ import { config, theme, useTheme } from '../../Theme';
 import { Tooltip } from '../../Tooltip';
 import { useSidepaneToggle } from '../components/AppData/useSidepane';
 import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-import { useIsLandscape } from '../common/hooks';
+import { useIsLandscape, useKeyboardHandler } from '../common/hooks';
 import { APP_DATA, EMOJI_REACTION_TYPE, POLL_STATE, POLL_VIEWS, SIDE_PANE_OPTIONS } from '../common/constants';
 
 let hlsPlayer;
@@ -367,6 +367,8 @@ const HLSView = () => {
     [controlsVisible, isLandscape, isMobile, qualityDropDownOpen, seekProgress],
   );
 
+  const keyHandler = useKeyboardHandler(isPaused, hlsPlayer);
+
   if (!hlsUrl || streamEnded) {
     return (
       <>
@@ -437,7 +439,14 @@ const HLSView = () => {
             '@md': {
               height: 'auto',
             },
+            outline: 'none',
+          }}
+          onKeyDown={async event => {
+            if (hlsState?.variants[0]?.playlist_type === HLSPlaylistType.DVR) {
+              await keyHandler(event);
+            }
           }}
+          tabIndex="0"
         >
           {!(isMobile || isLandscape) && (
             <HLSAutoplayBlockedPrompt open={isHlsAutoplayBlocked} unblockAutoPlay={unblockAutoPlay} />