Cannot use Spatial Navigation on Tizen Simulator & WebOS Simulator

[hellofrontendxxx]

I use Spatial Navigation to fast forward/reverse/play/stop video using remote on SmartTV. I tried but it doesn't work on TizenOS and WebOS Simulator. I don't know where the problem is. I tried to find a specific example but there is none. Hope to receive help from everyone. Thanks

import { useEffect, useMemo, useRef } from 'react';
import videojs from 'video.js';

import 'video.js/dist/video-js.css';

export const VideoJSPlayer = ({ options, onReady }) => {
  const videoRef = useRef(null);
  const playerRef = useRef(null);

  const mergedOptions = useMemo(() => {
    return {
      autoplay: true,
      controls: false,
      responsive: true,
      muted: false,
      fluid: true,
      errorDisplay: false,
      html5: {
        vhs: {
          overrideNative: !videojs.browser.IS_SAFARI,
          enableLowInitialPlaylist: true,
        },
        nativeAudioTracks: false,
        nativeVideoTracks: false,
      },
      spatialNavigation: {
        enabled: true,
        horizontalSeek: true,
      },
      // Default smooth seeking to false
      enableSmoothSeeking: true,
      disableSeekWhileScrubbingOnMobile: true,
      ...options,
    };
  }, [options]);

  useEffect(() => {
    if (!playerRef.current) {
      const videoElement = document.createElement('video-js');

      videoElement.classList.add('vjs-big-play-centered');
      videoRef.current.appendChild(videoElement);

      const player = videojs(videoElement, mergedOptions, () => {
        videojs.log('Player is ready');

        onReady?.(player);
      });

      playerRef.current = player;
      playerRef.current.spatialNavigation.start(); // TODO
    } else {
      const player = playerRef.current;

      player.autoplay(mergedOptions.autoplay);
      player.src(mergedOptions.sources);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [mergedOptions, videoRef]);

  // Dispose the Video.js player when the functional component unmounts
  useEffect(() => {
    const player = playerRef.current;

    return () => {
      if (player && !player.isDisposed()) {
        player.dispose();
        playerRef.current = null;
      }
    };
  }, [playerRef]);

  return (
    <div data-vjs-player>
      <div ref={videoRef} />
    </div>
  );
};

[welcome]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.