首頁猿問在 Reactjs 中滾動播放/暫停視頻

在 Reactjs 中滾動播放/暫停視頻

JavaScript

斯蒂芬大帝 2023-03-03 16:08:40

我正在嘗試實現一種功能，如果視頻正在播放，則在滾動時暫停，反之亦然。目前我可以使用設置狀態 true/false 的 onClick 函數來完成。但問題是視頻在向下滾動后繼續播放，直到我不再點擊它暫停。我想保留 onClick 功能，同時還想添加 onScroll 功能。嘗試這樣做onScroll但沒有工作。const [playing, setPlaying] = useState(false); const videoRef = useRef(null); 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> );}

查看完整描述

1 回答

慕田峪9158850

TA貢獻1794條經驗獲得超7個贊

因此，這將阻止您的視頻在任何滾動事件中播放。如果你希望它在離開視口時停止播放，你可以考慮使用類似IntersectionObserver API 的東西來做一些事情，如果它在視口中（播放視頻）或在視口外（停止視頻）。

注意：大多數現代瀏覽器不允許 Javascript 啟動視頻，除非至少已經有一些用戶與頁面進行了交互。

const [playing, setPlaying] = useState(false);

const videoRef = useRef(null);

useEffect(() => {

window.addEventListener('scroll', debounce(handleScroll, 200))

return () => {

window.removeEventListener('scroll', handleScroll);

};

}, []}

const startVideo = () => {

videoRef.current.pause();

setPlaying(false);

}

const pauseVideo = () => {

videoRef.current.play();

setPlaying(true);

}

const handleScroll = (e) => {

if (playing) {

pauseVideo();

}

const handleVideoPress = () => {

if (playing) {

startVideo();

} else {

pauseVideo();

}

};

return (

<video

onClick={handleVideoPress}

className="video__player"

loop

ref={videoRef}

src={url}

></video>

);

}

我做了一個使用 React 的引用鉤子的工作示例IntersectionObserver，可以在這里找到：

https://codesandbox.io/s/strange-smoke-p9hmx

如果您還有其他問題，請告訴我。

反對回復 2023-03-03

1 回答
0 關注
224 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

在 Reactjs 中滾動播放/暫停視頻

在 Reactjs 中滾動播放/暫停視頻

1 回答

添加回答