reactjs 如何使选项菜单在视频暂停时不消失

xqkwcwgp 于 2023-03-17 发布在 React

关注(0)|答案(1)|浏览(83)

我正在建立自己的自定义视频播放器，我试图使选项栏/菜单消失时，用户是不活动的它的工作和一切，但我仍然希望它只在视频暂停时显示，我怎么能做到这一点？
我的代码块报价

const refs = useRef(null)
    let timeStep = 10
    let volumeBar;
    
    // Play
    const [isPlay, setPlay] = useState(false)
    const handlePlay = () => {
        if(isPlay){
            refs.current?.firstChild?.children[0].pause()
            setPlay(false)
        }else{
            refs.current?.firstChild?.children[0].play()
            setPlay(true)
        }
    }

// Video Hover
    const handleVideoHover = (e) => {
        console.log(e.type)
        const videoOptions = document.querySelector('.video-options-container')
        let timeOut
        clearTimeout(timeOut)
        if(!isPlay || e.type === 'mousemove' || e.type === 'touchstart' || e.type === 'click'|| e.type === 'keydown'){
            videoOptions.style = ` opacity: 1; transition: opacity 0.5s;`
        }
        timeOut = setTimeout(() => {
            videoOptions.style = ` opacity: 0; transition: opacity 2.5s;`
        }, 2000)
    }

// JSX
<div className='video-container w-100 h-100' onClick={handleVideoHover} onKeyDown={handleVideoHover} onMouseMove={handleVideoHover} onTouchStart={handleVideoHover} onMouseLeave={handleVideoHover}>
...
</div>

reactjs

来源：https://stackoverflow.com/questions/75759778/how-to-make-the-options-menu-doesnt-disappear-when-video-is-paused

1条答案

按热度按时间

flvlnr441#

希望这个有用
我做了这个。我知道，有点冗长，但这是个解决办法

const refs = useRef(null)
let timeStep = 10
let volumeBar;

// Play
const [isPlay, setPlay] = useState(false)
let timeOut;

const handlePlay = () => {
const videoOptions = document.querySelector('.video-options-container')
    if(isPlay){
        videoOptions.style = `opacity: 1; transition: opacity 0.5s;`;
        clearTimeout(timeOut);
        refs.current?.firstChild?.children[0].pause()
        setPlay(false)
    }else{
        refs.current?.firstChild?.children[0].play();
        timeOut = setTimeout(() => {
            videoOptions.style = ` opacity: 0; transition: opacity 2.5s;`
        }, 2000)
        setPlay(true)
    }
}

以及：

const handleVideoHover = (e) => {
    console.log(e.type)
    const videoOptions = document.querySelector('.video-options-container')
    clearTimeout(timeOut)
    if(!isPlay || e.type === 'mousemove' || e.type === 'touchstart' || e.type === 'click'|| e.type === 'keydown'){
        videoOptions.style = ` opacity: 1; transition: opacity 0.5s;`
    }
    if(!isPlay)return;
    timeOut = setTimeout(() => {
        videoOptions.style = ` opacity: 0; transition: opacity 2.5s;`
    }, 2000)
}

我从hendleVideoHover函数中删除了timeOut，并放入了一个JSX主函数：

const refs = useRef(null)
let timeStep = 10
let volumeBar;

// Play
const [isPlay, setPlay] = useState(false)

let timeOut;

对我很有用我希望能帮上忙

赞(0）回复(0）举报 2023-03-17

我来回答

reactjs 如何使选项菜单在视频暂停时不消失

1条答案

相关问题

热门标签

最新问答