React实现range滑块调节视频音量报volumeupdate未定义如何解决

• 变量未声明：Volume函数内直接给volumeupdate赋值，没有用let/const/var声明该变量，直接触发volumeupdate is not defined引用错误，且该变量本身无任何实际作用。
• 事件绑定逻辑错误：
  • 每次触发滑块的onMouseDown事件都会重复给video元素绑定事件监听，会造成内存泄漏；且原生addEventListener的事件名不需要加on前缀，onMouseDown是React合成事件的写法，原生监听应该用mousedown
  • 仅监听mousedown事件无法覆盖滑块拖动过程的取值更新，点击、拖动滑块时无法实时同步音量
• 属性名错误：HTML视频元素控制音量的原生属性是volume，不存在volumeupdate这个属性，赋值逻辑从根上就不生效
• DOM获取方式不规范：用document.getElementById获取DOM不符合React的声明式开发逻辑，容易因为组件渲染时机问题拿到null引用

核心调整点：

• 用useRef绑定video元素和音量滑块，替代原生DOM查询
• 移除无意义的volumeupdate变量，直接给滑块绑定onInput合成事件，点击、拖动滑块时实时把滑块值赋值给videoRef.current.volume
• 组件挂载后初始化滑块默认值，和视频初始音量保持一致
• 补全原代码缺失的按钮控制函数，避免点击按钮触发未定义报错

import { useState, useEffect, useRef } from 'react';

export default function App() {
  const [isLoading, setIsLoading] = useState(false);
  const videoRef = useRef(null);
  const volumeRef = useRef(null);

  const toggleIsLoading = () => {
    setIsLoading(current => !current);
  };

  // 滑块拖动/点击时实时更新音量
  const handleVolumeChange = (e) => {
    if (!videoRef.current) return;
    videoRef.current.volume = e.target.value;
  };

  // 控制按钮逻辑
  const disableControl = () => {
    if (videoRef.current) videoRef.current.controls = !videoRef.current.controls;
  };
  const setHalfVolume = () => {
    if (videoRef.current && volumeRef.current) {
      videoRef.current.volume = 0.5;
      volumeRef.current.value = 0.5;
    }
  };
  const togglePlay = () => {
    if (!videoRef.current) return;
    videoRef.current.paused ? videoRef.current.play() : videoRef.current.pause();
  };
  const mute = () => {
    if (videoRef.current) videoRef.current.muted = !videoRef.current.muted;
  };

  useEffect(() => {
    // 初始化滑块默认值和视频初始音量一致
    if (videoRef.current && volumeRef.current) {
      volumeRef.current.value = videoRef.current.volume;
    }
  }, []);

  useEffect(() => {
    // 原有isLoading相关逻辑可在此扩展
  }, [isLoading]);

  return (
    <div onLoad={toggleIsLoading} >
      <video 
        ref={videoRef}
        id="test" 
        className="video-player" 
        controls  
        autoPlay={isLoading}
      >
        <source 
          src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" 
          type="video/mp4"
        />
      </video>
      <br/>
      <button onClick={disableControl}>Disablecontrols</button>
      <button onClick={setHalfVolume}>HalfVolume</button>
      <button onClick={togglePlay}>Play/Pause</button>
      <button onClick={mute}>Mute</button>
      <br/>
      <input 
        ref={volumeRef}
        onInput={handleVolumeChange}
        className="volume" 
        type="range" 
        id="vol" 
        name="vol" 
        min="0" 
        max="1" 
        step="0.01"
      />
      <div className="time">
        <span className="current">0:00</span>/<span className="duration">0:00</span>
      </div>
    </div>
  );
}

注意：主流浏览器默认禁止无用户交互的视频自动播放，autoPlay属性需要配合muted属性才能在页面首次加载时自动生效，可根据实际业务需求调整。

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