I'm trying to create a custom video progress bar using the HTML progress tag. The video player is a React ponent. All I want to do is update the value of the progress tag as the video continues to play and have it show a green colour as it starts to fill. I have tried a couple other methods like filling the SVG path but the progress tag seems to be the best option. I have created a function called progressLoop that is supposed to update the value of the progress bar but being a React beginner, I'm not sure what the right place is for calling it.

React:

import React, {useRef} from 'react'



const VideoSection = () => {
  const videoRef = useRef()

  const handlePlayVideo = () => videoRef.current.play()

   const progressLoop = () => {
    setInterval(function () {
     document.getElementById("progress").value = Math.round(
       (video.currentTime / video.duration) * 100
      );
    });
   };

  return (
    <div>
       <button onClick={handlePlayVideo}>
        Play video
      </button>
      
      <video src='./video.mp4' ref={videoRef}/>
      
      <progress
       id="progress"
       max="100"
       value="0"
        >
       Progress
      </progress>

      
    </div>
  )
}

export default VideoSection

CSS:

progress[value] {
  appearance: none;
  border: none;
  color: red;
}
progress[value]::-webkit-progress-value {
  background-color: green;
}

I'm trying to create a custom video progress bar using the HTML progress tag. The video player is a React ponent. All I want to do is update the value of the progress tag as the video continues to play and have it show a green colour as it starts to fill. I have tried a couple other methods like filling the SVG path but the progress tag seems to be the best option. I have created a function called progressLoop that is supposed to update the value of the progress bar but being a React beginner, I'm not sure what the right place is for calling it.

React:

import React, {useRef} from 'react'



const VideoSection = () => {
  const videoRef = useRef()

  const handlePlayVideo = () => videoRef.current.play()

   const progressLoop = () => {
    setInterval(function () {
     document.getElementById("progress").value = Math.round(
       (video.currentTime / video.duration) * 100
      );
    });
   };

  return (
    <div>
       <button onClick={handlePlayVideo}>
        Play video
      </button>
      
      <video src='./video.mp4' ref={videoRef}/>
      
      <progress
       id="progress"
       max="100"
       value="0"
        >
       Progress
      </progress>

      
    </div>
  )
}

export default VideoSection

CSS:

progress[value] {
  appearance: none;
  border: none;
  color: red;
}
progress[value]::-webkit-progress-value {
  background-color: green;
}

• javascript
• html
• css
• reactjs

2 Answers 2

Instead of adding interval, you can add 'onProgress' event handler.

import React, { useRef, useState } from "react";

import videoFile from "./Video.mov";

const VideoSection = () => {
  const videoRef = useRef();
  const [progress, setProgress] = useState(0);
  const handlePlayVideo = () => videoRef.current.play();

  const handleProgress = (e) => {
    if (isNaN(e.target.duration))   // duration is NotaNumber at Beginning.
      return;
    setProgress((e.target.currentTime / e.target.duration) * 100);
  };
  return (
    <div>
      <button onClick={handlePlayVideo}>Play video</button>

      <video
        controls
        onProgress={handleProgress}
        src={videoFile}
        width="400"
        height="500"
        ref={videoRef}
      />

      <progress id="progress" max="100" value={progress}>
        Progress
      </progress>
    </div>
  );
};

export default VideoSection;

You can use the onTimeUpdate event handler. See documentation

<video
   onTimeUpdate={(e) => {
      setProgress(e.target.currentTime / e.target.duration);
   }}
/>

The onProgress event handler is not correct because it is for when video/audio data is being downloaded. See documentation