reactjs - 反应中的可见性传感器在移动设备上不起作用

Question

我正在使用 react-visibility-sensor 来播放和暂停视频，当它不在像 web 应用程序的 tiktok 的视口中时，它在桌面上运行良好，但我不明白为什么它在移动设备上不起作用（用 chrome 和ios中的野生动物园）

import React, { useRef, useState } from "react";
import VisibilitySensor from "react-visibility-sensor";
import "./Video.css";

export default function Video({
  url,
}) {
  const [playing, setPlaying] = useState(false);
  const videoRef = useRef(null);

  function onChange(visibility) {
    if (visibility) {
      videoRef.current.play();
      setPlaying(true);
    } else {
      videoRef.current.pause();
      setPlaying(false);
    }
  }

  function onVideoPress() {
    if (playing) {
      videoRef.current.pause();
      setPlaying(false);
    } else {
      videoRef.current.play();
      setPlaying(true);
    }
  }

  return (
    <div className="video">
      <VisibilitySensor onChange={onChange}>
        <video
          playsInline
          autoPlay
          loop
          muted
          className="video_player"
          onClick={onVideoPress}
          ref={videoRef}
          src={url}
        />
      </VisibilitySensor>

    </div>
  );
}

标签： reactjs