Go For Live Demo
If you've worked on any react applications React Hook played a big role to Control Html elements and its properties.
Hook Which played a big role for developing React Application are useState(),useEffect(),useRef().
Now we Come on Our Topic.
First We Know that ,1)How to Play video Through custom Bottom In React Js?
const videoPlay = () => { videoRef.current.play(); setDurationOfVideo(videoRef.current.duration); getDurationOfVideo(); } 2)How to paused video Through custom Bottom In React Js?
const videoStop = () => { videoRef.current.pause(); } 3)How to Replay video Through custom Bottom In React Js?
const videoReplay= () => { setDurationOfVideo(videoRef.current.duration); videoRef.current.currentTime = 0; videoRef.current.play(); getDurationOfVideo(); } 4)How to Show video Progress Bar Control In React Js?
const getDurationOfVideo = () => { const videoIntervalTime = setInterval(() => { setCurrentDurationOfVideo(parseFloat(videoRef.current.currentTime)); if (parseFloat(videoRef.current.currentTime) >= durationOfVideo) { clearVideoInterval(); } }, 1000) const clearVideoInterval = () => { clearInterval(videoIntervalTime); } } 5)How to Control playbackRate Property of video Tag In React Js?
const setVideoSpeed = (e) => { videoRef.current.playbackRate = parseFloat(e.target.value); } 6)How to Control video tag Progress Bar Control In React Js?
const videoDuration = (e) => { setCurrentDurationOfVideo(parseFloat(e.target.value)); videoRef.current.currentTime = parseFloat(e.target.value); } Now Second We Know that ,1)How to Control video Audio volume Through custom Progress Bar In React Js?
const volumebar = (e) => { const valumValue = parseFloat(e.target.value) / 100; setVolumOfVideo(e.target.value); videoRef.current.volume = valumValue.toFixed(1); } 2)How to Mute video tag Audio In React Js?
const videoMute = () => { videoRef.current.muted = true; } 3)How to UnMute video tag Audio In React Js?
const videoUnMute = () => { videoRef.current.muted = false; } *Now Finally We Control All required HTMl Video Tag controls attribute in React js. Final Code are Below.
1) app.css File
*
.customVideoTagClass { width: 450px; height: 300px; border: 2px solid black; margin: 70px 0px 0px 20%; border-radius:5px; float:left; } .customVideoTagClass video{ height:inherit; width:inherit; } .customVideoTagControlsClass { width: 450px; height: 300px; margin: 70px 0px 0px 10px; border: 1px solid black; border-radius: 5px; float: left; } .customVideoTagControlsClass button{ border:1px solid orange; border-radius:2px; padding:5px; margin:10px 0px 1px 15px; width:70px; background-color:coral; cursor:pointer; } .customVideoTagControlsClass input[type=range] { width: 377px; } 2> App.js File
import React, { useEffect, useRef, useState } from 'react'; import './App.css'; function App() { const [volumOfVideo, setVolumOfVideo] = useState(100); const [durationOfVideo, setDurationOfVideo] = useState(0); const [currentDurationOfVideo, setCurrentDurationOfVideo] = useState(0); const videoRef = useRef(); const getDurationOfVideo = () => { const videoIntervalTime = setInterval(() => { setCurrentDurationOfVideo(parseFloat(videoRef.current.currentTime)); if (parseFloat(videoRef.current.currentTime) >= durationOfVideo) { clearVideoInterval(); } }, 1000) const clearVideoInterval = () => { clearInterval(videoIntervalTime); } } const volumebar = (e) => { const valumValue = parseFloat(e.target.value) / 100; setVolumOfVideo(e.target.value); videoRef.current.volume = valumValue.toFixed(1); } const videoPlay = () => { videoRef.current.play(); setDurationOfVideo(videoRef.current.duration); getDurationOfVideo(); } const videoStop = () => { videoRef.current.pause(); } const videoReplay= () => { setDurationOfVideo(videoRef.current.duration); videoRef.current.currentTime = 0; videoRef.current.play(); getDurationOfVideo(); } const videoMute = () => { videoRef.current.muted = true; } const videoUnMute = () => { videoRef.current.muted = false; } const setVideoSpeed = (e) => { videoRef.current.playbackRate = parseFloat(e.target.value); } const videoDuration = (e) => { setCurrentDurationOfVideo(parseFloat(e.target.value)); videoRef.current.currentTime = parseFloat(e.target.value); } return ( <> <h1 style={{ textAlign: 'center' }}>The Customize video controls attribute</h1> <div className='customVideoTagClass'> <video ref={videoRef} preload='auto'> <source src='https://www.w3schools.com/html/mov_bbb.mp4' type='video/mp4'></source> </video> </div> <div className='customVideoTagControlsClass'> <button onClick={videoPlay}>Play</button> <label>playback speed</label> <select onChange={ setVideoSpeed}> <option value={1.0}>normal speed</option> <option value={0.5}>slower</option> <option value={2.0}>faster speed</option> </select><br /> <button onClick={videoStop} >Stop</button><br /> <button onClick={videoReplay}>Repaly</button><br /> <button onClick={videoMute}>Mute</button><br /> <button onClick={videoUnMute}>Unmute</button><br /> <label><b>volume</b></label><input type='range' min="0" max="100" step='10' value={volumOfVideo} onChange={volumebar} /><br /><br /> <label><b>Scrubbing Video</b></label><input type='range' min="0" max={durationOfVideo} value={currentDurationOfVideo} onChange={videoDuration} /> </div> </> ); } export default App; Well done! Finally Control And Make A GUI For Video Tag!
Drop some love by liking or commenting ♥
Reference w3schools
Top comments (0)