第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

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

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

斯蒂芬大帝 2023-03-03 16:08:40
我正在嘗試實現(xiàn)一種功能,如果視頻正在播放,則在滾動時暫停,反之亦然。目前我可以使用設(shè)置狀態(tài) true/false 的 onClick 函數(shù)來完成。但問題是視頻在向下滾動后繼續(xù)播放,直到我不再點擊它暫停。我想保留 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條經(jīng)驗 獲得超8個贊

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

注意:大多數(shù)現(xiàn)代瀏覽器不允許 Javascript 啟動視頻,除非至少已經(jīng)有一些用戶與頁面進行了交互。

 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 (

    <div className="video">

      <video

        onClick={handleVideoPress}

        className="video__player"

        loop

        ref={videoRef}

        src={url}

      ></video>

    );

}

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


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


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


查看完整回答
反對 回復(fù) 2023-03-03
  • 1 回答
  • 0 關(guān)注
  • 231 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號