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)