Breaking News: Grepper is joining You.com. Read the official announcement!

Write a code to Customize video progress bar of video in react js

Foolish Fox answered on February 28, 2023 Popularity 6/10 Helpfulness 4/10

answer Write a code to Customize video progress bar of video in react js

Write a code to Customize video progress bar of video in react js

Comment

import React, { useRef } from 'react';

function VideoPlayer() {
  const videoRef = useRef(null);

  function handleTimeUpdate() {
    const video = videoRef.current;
    const progress = video.currentTime / video.duration;
    const progressBar = document.querySelector('.progress-bar');
    progressBar.style.width = `${Math.round(progress * 100)}%`;
  }

  return (
    <div className="video-player">
      <video
        src="my-video.mp4"
        ref={videoRef}
        onTimeUpdate={handleTimeUpdate}
      />
      <div className="progress">
        <div className="progress-bar" />
      </div>
    </div>
  );
}


//css code
.video-player {
  position: relative;
  width: 100%;
}

video {
  display: block;
  width: 100%;
}

.progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #ccc;
}

.progress-bar {
  width: 0;
  height: 100%;
  background-color: #333;
  transition: width 0.1s ease-in-out;
}

Popularity 6/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: javascript progress-bar video

Link to this answer
Share Copy Link

Contributed on Feb 28 2023

Foolish Fox

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

Write a code to Customize video progress bar of video in react js

Contents

More Related Answers

Write a code to Customize video progress bar of video in react js

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.