自定义视频播放器：实现暂停时选项菜单保持显示的方案

你的核心需求是：播放状态下无操作自动隐藏菜单，暂停状态下始终显示菜单，现有代码的问题是不管播放状态，超时就会隐藏，调整逻辑即可实现，具体修改如下：

1. 修复定时器引用问题（关键） #

原代码里的timeOut是局部变量，每次触发事件都会重新声明，导致clearTimeout根本清不掉之前的定时器。改用useRef保存定时器和选项栏DOM，避免引用丢失：

import { useState, useRef } from 'react';

const refs = useRef(null)
const videoOptionsRef = useRef(null) // 存储选项栏DOM
const hideTimeoutRef = useRef(null) // 存储定时器引用
let timeStep = 10
let volumeBar;

// 播放/暂停逻辑，暂停时主动显示菜单
const [isPlay, setPlay] = useState(false)
const handlePlay = () => {
    const video = refs.current?.firstChild?.children[0]
    if(isPlay){
        video?.pause()
        setPlay(false)
        // 暂停时立刻显示菜单
        videoOptionsRef.current.style = `opacity: 1; transition: opacity 0.5s;`
    }else{
        video?.play()
        setPlay(true)
    }
}

2. 调整菜单显示/隐藏逻辑 #

只有视频正在播放时，才启动无操作隐藏的定时器；暂停状态下直接保持菜单显示，不启动定时器：

const handleVideoHover = (e) => {
    const videoOptions = videoOptionsRef.current
    // 先清掉之前的定时器，避免重复触发
    if (hideTimeoutRef.current) {
        clearTimeout(hideTimeoutRef.current)
    }
    // 先显示菜单
    videoOptions.style = `opacity: 1; transition: opacity 0.5s;`

    // 只有播放状态下，才设置超时隐藏
    if (isPlay) {
        hideTimeoutRef.current = setTimeout(() => {
            videoOptions.style = `opacity: 0; transition: opacity 2.5s;`
        }, 2000)
    }
}

3. 优化鼠标离开事件 #

鼠标离开容器时，只有播放状态才隐藏菜单，暂停状态保持显示：

<div className='video-container w-100 h-100' 
     onClick={handleVideoHover} 
     onKeyDown={handleVideoHover} 
     onMouseMove={handleVideoHover} 
     onTouchStart={handleVideoHover}
     onMouseLeave={() => {
         const videoOptions = videoOptionsRef.current
         if (isPlay) {
             videoOptions.style = `opacity: 0; transition: opacity 2.5s;`
         }
     }}>
    {/* 你的视频元素 */}
    {/* 给选项栏容器加上ref */}
    <div className='video-options-container' ref={videoOptionsRef}>
        {/* 菜单内容 */}
    </div>
</div>

逻辑说明 #

• 播放状态：用户操作（移动鼠标、点击等）时显示菜单，无操作2秒后自动隐藏；鼠标离开容器直接隐藏。
• 暂停状态：不管有没有操作，菜单始终保持显示；点击暂停按钮时也会立刻显示菜单。

内容的提问来源于stack exchange，提问作者Viper