在滚动时暂停视频并开始播放列表ReactJs中的下一个视频

编程问答 2022-07-23

问题描述

我得到了一个名为Video的组件，其中加载的视频列表全部占用了Video组件的整个高度和宽度。当用户向下滚动到下一个视频并且下一个视频应立即开始播放时，我需要触发当前播放视频的暂停。这应该在整个组件中继续进行。我在useEffect（）中使用了Intersection Observer API，但到目前为止无法实现此功能。我当前的功能立即开始播放列表中的所有视频。还有其他方法可以实现此功能吗？如果不是，我哪里出了问题？

import React,{ useRef,useState,useEffect } from "react";
import "./Video.css";
import VideoFooter from "./VideoFooter";
import VideoSidebar from "./VideoSidebar";

function Video({ url,likes,shares,messages,channel,description,song }) {

  const [playing,setPlaying] = useState(false);
  const videoRef = useRef(null);
                                      //NEED HELP OVER HERE
    useEffect(() => {
    let video = document.querySelector("video");
    let observer = new IntersectionObserver(
      (entry) => {
        if (entry.intersectionRatio != 0.5 && !playing) {
          videoRef.current.pause();
          setPlaying(true);
        } else if (playing) {
          videoRef.current.play();
          setPlaying(false);
        }
      },{ threshold: 1 }
    );
    observer.observe(video);
  },[playing]);

  const handleVideoPress = () => {
    if (playing) {
      videoRef.current.pause();
      setPlaying(false);
    } else {
      videoRef.current.play();
      setPlaying(true);
    }
  };

  return (
    <div className="video">
      <video
        onClick={handleVideoPress}
        className="video__player"
        loop
        ref={videoRef}
        src={url}
      ></video>
    </div>
  );
}

export default Video;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

intersection-observerjavascriptreactjsreactjsreactjsreactjsvideovideo