CODEWITHSUNDEEP
reactjshtml5-video
user18862993
user18862993

Reputation:

How to increase and decrease volume by clicking and moving input range between 0 to 1, this code getting volume update is not defined

How to increase and decrease volume by clicking and moving input range between 0 to 1, this code getting volume update is not defined

export default function App() { const [isLoading, setIsLoading] = useState(false);enter code here

  const toggleIsLoading = () => {
    // passed function to setState
    setIsLoading(current => !current);
};
useEffect(() => {
    //console.log('isLoading is: ', isLoading);
    //const rajesh = document.getElementById('test').controls.mute;
    //console.log(rajesh)
}, [isLoading]);

  function Volume() { 
    const video = document.getElementById('test');
    volumeupdate = video.addEventListener('onMouseDown', (e) => {
        video.volumeupdate = e.target.value
        // I am trying to fix here
    })
    
  }
return (
        
            <div onLoad={toggleIsLoading} >
            <video id="test" className="video-player" controls  
                autoPlay={isLoading}
                >
                <source src="http://commondatastorage.googleapis.com/gtv-videos- 
     bucket/sample/BigBuckBunny.mp4" type="video/mp4"></source>
            </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 onMouseDown={Volume} className="volume" type="range" id="vol" name="vol" min="0" max="1" step="0.01"></input>
            <div className="time">
                <span className="current">0:00</span>/<span className="duration">0:00</span>
            </div>
            
        </div>`
    );
  }

current code getting volume update is not defined.

Upvotes: 0

Views: 232

Answers (1)

VC.One
VC.One

Reputation: 15936

I don't use React but...

  1. Shouldn't that video.volumeupdate = someNum be actually just video.volume = someNum?

  2. Volume is expected to a value ranging from 0 up to 1 for full volume. I don't know what e.target.value on a "MouseDown" event means here. Like how does that become a 0.3 or a 0.9 at any point? If it isn't, then find a way to fix it

Upvotes: 0

Related Questions