Перезапустить видео на сайте при возврате к нему

Question

Перезапустить видео на сайте при возврате к нему

Рейтинг: 2Ответов: 2Опубликовано: 10.05.2023

На сайте есть видео. Сейчас оно проигрывается, когда доскролили до секции, а затем останавливается до обновления страницы. Видео вcтавил так:

<video src={bgImg} autoPlay={true} muted={true} className="section__bg"></video>

Можно ли как-то перезапустить видео, если пользователь проскроллил в другое место сайта, а потом вернулся к видео?

javascript reactjs

Источник: Stack Overflow на русском

Answer 1

▲ 3Принят

Для выполнения задуманного был использован Intersection Observer. Далее был добавлен useEffect, который навесит обработку на элемент с рефом. А, после - дело техники)

const App = () => {
 const sectionRef = React.useRef(null);

  React.useEffect(() => {
    if (!sectionRef.current) return;

    const options = {
      root: null,
      rootMargin: "0px",
      threshold: 0.1
    };

    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          const videoEl = entry.target.querySelector("video");

          if (videoEl) videoEl.currentTime = 0;
        }
      });
    }, options);

    observer.observe(sectionRef.current);

    return () => observer.disconnect();
  }, []);

  return <div>
      <section className="section" ref={sectionRef}>
        <video
          src="https://www.w3schools.com/html/mov_bbb.mp4"
          autoPlay={true}
          muted={true}
          className="section__bg"
        ></video>
      </section>
      <section className="section"></section>
    </div>
  
}

const appContainer = document.querySelector('#app');
const root = ReactDOM.createRoot(appContainer);
root.render(<App />);

body {
  padding: 0;
  margin: 0;
}

.section {
  width: 100%;
  height: 100vh;
  border: 1px solid;
}

.section__bg {
  width: 100%;
  height: 100%;
}

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

<div id="app"></div>

Answer 2

▲ 4

Может кто-то предложит вариант по-лучше, но у меня есть такое решение:

<video id='hls-video' style="width: 100%; height: 90vh;" controls>
  <source id="change-src" src='https://www.w3schools.com/html/mov_bbb.mp4' title='480p' type='video/mp4'/>
</video>

Проверяем, что наш элемент находится в зоне видимости окна браузера. Если это так, то перезапускаем видео:

const video = document.querySelector('#hls-video');
const source = document.querySelector('#change-src');

const reloadVideo = () => {
  video.pause()
  source.setAttribute('src', 'https://www.w3schools.com/html/mov_bbb.mp4');
  video.load();
  video.play();
}

const visible = target => {
  let targetPosition = {
    top: window.pageYOffset + target.getBoundingClientRect().top,
    left: window.pageXOffset + target.getBoundingClientRect().left,
    right: window.pageXOffset + target.getBoundingClientRect().right,
    bottom: window.pageYOffset + target.getBoundingClientRect().bottom
  }
  
  let windowPosition = {
    top: window.pageYOffset,
    left: window.pageXOffset,
    right: window.pageXOffset + document.documentElement.clientWidth,
    bottom: window.pageYOffset + document.documentElement.clientHeight
  }
  
  if (targetPosition.bottom > windowPosition.top &&
      targetPosition.top < windowPosition.bottom &&
      targetPosition.right > windowPosition.left &&
      targetPosition.left < windowPosition.right) { 
    console.log('Вы видите элемент :)');
  } else {
    reloadVideo()
  };
}

window.addEventListener('scroll', () => {
  visible(video);
});

Перезапустить видео на сайте при возврате к нему

Ответы