如何解决在滚动时暂停视频并开始播放列表ReactJs中的下一个视频
我得到了一个名为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 举报,一经查实,本站将立刻删除。