Автозапуск видео со звуком на IOS (safari) не работает react

Пытаюсь реализовать аналог тик ток ленты. У меня есть такой код, запускающий видео и звук:

import "./App.css";
import React, { useRef, useState, useEffect } from "react";
import IconButton from "@material-ui/core/IconButton";
import FavoriteBorderIcon from "@material-ui/icons/FavoriteBorder";
import FavoriteIcon from "@material-ui/icons/Favorite";

function useOnScreen(ref) {
  const [isIntersecting, setIntersecting] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      setIntersecting(entry.isIntersecting);
    });
    if (ref.current) {
      observer.observe(ref.current);
    }
    return () => {
      observer.unobserve(ref.current);
    };
  }, []);

  return isIntersecting;
}
function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
}

function Video({ source }) {
  const [click, setClicked] = useState(false);
  const [count, setCount] = useState();
  const [canPlays, setCanPlay] = useState(false);
  console.log(canPlays);
  const videoRef = useRef();
  const audioRef = useRef(false);
  const playRef = useRef(false);
  const ref = useRef();
  const navSec = useRef(null);

  const onScreen = useOnScreen(ref);
  const debouncedSearchTerm = useDebounce(onScreen, 400);

  const clickFunc = () => {
    if (click === false) {
      setClicked(true);
      setCount(1);
    } else {
      setClicked(false);
      setCount("");
      console.log(click);
    }
  };
  const canPlay = (e) => {
    setCanPlay(true);
  };

  useEffect(() => {
    if (debouncedSearchTerm === true && canPlays === true) {
      audioRef.current.currentTime = videoRef.current.currentTime;
      videoRef.current.play();
      audioRef.current.play();

      playRef.current.style.display = "none";
    }
  });

  const videoPlay = () => {
    if (
      videoRef.current.paused === false &&
      audioRef.current.paused === false
    ) {
      videoRef.current.pause();
      audioRef.current.pause();
      playRef.current.style.display = "block";
    } else {
      videoRef.current.play();
      audioRef.current.play();
      playRef.current.style.display = "none";
    }
  };
  return (
    <div id="video-container" ref={ref}>
      <img ref={playRef} id="play-btn" src="./play.png" alt="play" />

      <h1 id="logo"> GMGO</h1>

      <div id="ld">
        <IconButton id="icons" onClick={clickFunc}>
          {click ? (
            <FavoriteIcon style={{ fontSize: "40px" }} />
          ) : (
            <FavoriteBorderIcon style={{ fontSize: "40px" }} />
          )}
        </IconButton>
        <span id="like-count">{count}</span>
      </div>
      {debouncedSearchTerm ? (
        <video 
          ref={videoRef}
          playsInline
          onCanPlayThrough={canPlay}
          autoPlay={"autoplay"}
          loop
          onClick={videoPlay}
          width="450"
          height="900"
          src={source.substring(0, 32) + "DASH_480.mp4?source=fallback"}
          type="video/mp4"
          preload="auto"
          //playsinline
        />
      ) : (
        <div>Loading...</div>
      )}
      {debouncedSearchTerm ? (
        <audio ref={audioRef}>
          <source src={source && source.slice(0, 37) + "audio.mp4"} />
        </audio>
      ) : (
        console.log("audio element is loading")
      )}
    </div>
  );
}
export default Video;

На компьютере отрабатывает верно. Запускаю видео, делаю свайп и запускается следующее видео без нажатия на плей, но с iPhone (safari и chrome одинаково) я запускаю первое видео, делаю свайп и последующие видео запускаются только после нажатия на кнопку плей. Задача — реализовать ленту видео как в тик ток, чтобы после запуска первого видео на iPhone, последующие автозапускались со звуком. Демонстрация варианта найденного в интернете — пример ленты тик ток


Ответы (0 шт):