title: Skipping through a video with a single keypress
body: <p>I have a React video player project and I have a way of skipping the video by 1 second when a keyDown event occurs. This is effective because if you hold the key down multiple events are fired so the video continues to skip at e.g. 5-second intervals up until the user releases the key.</p>
  <p>I now want to implement it differently so when a user taps the key down once and then, even if they lift their finger the video carries on skipping until the user presses the key down once again (so they don't need to hold the key down)</p>
  <p>How do I do this? This is a section of my code so far. It's actually for a Smart TV APP so any reference you read regards focus is just the navigation pattern for selecting divs with your TV remote. The main bit of code is inside the keyDown function that then calls handleSkipForward or handleSkipBack. Also the videoElement ref is shared across functional components using store.VideoElement.</p>
  <p>I was thinking of something like having a boolean state hook for skipping but when that state is true how do I repeatedly request a skip of 5 seconds or is there something within the video element that you can just set to progress through a video at a set rate?</p>
  <pre><code>        focusKey,
          elementRef: containerRef,
          onKeyDown: (event) =&gt; {
              // if (!playerControlsVisible) {
              //     event.stopPropagation()
              //     event.preventDefault()
              //     return
              // }
              if (event.key === &quot;Enter&quot; || event.key === &quot; &quot;) {
                  skipDirection === &quot;Forward&quot;
                      ? handleSkipForwardAction()
                      : handleSkipBackwardAction()
              }
          },
          onFocus: (event) =&gt; {},
      })
  
      function handleSkipForwardAction() {
          if (store.videoElement.currentTime + skipTime &lt; duration) {
              store.videoElement.currentTime += skipTime
          } else if (store.videoElement.currentTime &lt; duration) {
              store.videoElement.currentTime = duration
          } else return
      }
  
      function handleSkipBackwardAction() {
          if (store.videoElement.currentTime - skipTime &gt; 0) {
              store.videoElement.currentTime -= skipTime
          } else if (store.videoElement.currentTime &gt; 0) {
              store.videoElement.currentTime = 0
          } else return
      }```
  
  
  </code></pre>