#reactjs
Вопрос:
Я использую датчик видимости реакции для воспроизведения и приостановки видео, когда оно не отображается в окне просмотра в веб-приложении, подобном 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>
);
}