我已经创建了这个组件，它是一个简单的播放器，当用户在视口播放，离开时停止播放。
在浏览器上一切正常，但在手机上，只有我手动触摸才能播放。之后，它会采取航点行为。

import { memo, useState } from 'react';
import ReactPlayer from 'react-player/lazy';
import { Waypoint } from 'react-waypoint';

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const VideoPlayer = memo(() => {
  const [playing, setPlaying] = useState(false);

  const handleEnterViewport = function () {
    setPlaying(true);
  };
  const handleExitViewport = function () {
    setPlaying(false);
  };

  return (
    <Waypoint onEnter={handleEnterViewport} onLeave={handleExitViewport}>
      <div className='relative mt-10 pt-[56.25%] transition-opacity'>
        <ReactPlayer
          style={{
            position: 'absolute',
            top: '0',
            left: '0',
          }}
          url='https://www.youtube.com/watch?v=1g7TrcIlpMk&ab_channel=OliverAstrologo'
          width='100%'
          height='100%'
          playing={playing}
          playsInline={true}
          muted={true}
          fallback={<p>Loading</p>}
          config={{
            youtube: {
              playerVars: { origin: 'https://www.youtube.com' },
            },
          }}
          on
        />
      </div>
    </Waypoint>
  );
});

export default VideoPlayer;

这是网址：https://nextjs-videogallery.vercel.app/这是存储库：https://github.com/valenciaHQ/nextjs-videogallery
有什么线索吗？我试过使用/不使用静音 prop ，玩/不玩状态，检查安装的东西等等。
谢谢大家!