Блог

Я использую датчик видимости реакции для воспроизведения и приостановки видео, когда оно не отображается в окне просмотра в веб-приложении, подобном tiktok, оно отлично работает на рабочем столе, но я не могу понять, почему оно не работает на мобильных устройствах (протестировано как с chrome, так и с safari в 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>
  );
}