Create a Video Player with React and JavaScript

React is an easy to use JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a video player with React and JavaScript.

Create the Project

We can create the React project with Create React App.

To install it, we run:

npx create-react-app video-player

with NPM to create our React project.

Create the Video Player

To create the video player, we write:

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

export default function App() {
  const videoPlayer = useRef();
  const [currentTime, setCurrentTime] = useState(0);
  const [seekValue, setSeekValue] = useState(0);

  const play = () => {
    videoPlayer.current.play();
  };

  const pause = () => {
    videoPlayer.current.pause();
  };

  const stop = () => {
    videoPlayer.current.pause();
    videoPlayer.current.currentTime = 0;
  };

  const setSpeed = (speed) => {
    videoPlayer.current.playbackRate = speed;
  };

  const onPlaying = () => {
    setCurrentTime(videoPlayer.current.currentTime);
    setSeekValue(
      (videoPlayer.current.currentTime / videoPlayer.current.duration) * 100
    );
  };

  return (
    <div className="App">
      <video
        width="320"
        height="240"
        ref={videoPlayer}
        onTimeUpdate={onPlaying}
      >
        <source
          src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4"
          type="video/mp4"
        />
        Your browser does not support the video tag.
      </video>
      <br />
      <p>{currentTime}</p>
      <input
        type="range"
        min="0"
        max="100"
        step="1"
        value={seekValue}
        onChange={(e) => {
          const seekto = videoPlayer.current.duration * (+e.target.value / 100);
          videoPlayer.current.currentTime = seekto;
          setSeekValue(e.target.value);
        }}
      />
      <div>
        <button onClick={play}>play</button>
        <button onClick={pause}>pause</button>
        <button onClick={stop}>stop</button>
        <button onClick={() => setSpeed(0.5)}>0.5x</button>
        <button onClick={() => setSpeed(1)}>1x</button>
        <button onClick={() => setSpeed(1.5)}>1.5x</button>
        <button onClick={() => setSpeed(2)}>2x</button>
      </div>
    </div>
  );
}

We create a videoPlayer ref that we assign to the video element.

Then we define the currentTime state to get the current play time.

seekValue has the position to seek to.

Next, we define the play function that gets the video player element’s ref and call play on it.

Likewise, we call pause in pause .

And in stop , we call pause and set the currentTime of the video element to 0.

In setSpeed , we call setCurrenTime to set the current play time of the video.

And we call setSeekValue to move the video seek slider input.

Below that, we add the video element.

We set the size and assign a ref to it so we can use it in the functions.

We also set the onTimeUpdate handler to the onPlaying function to get the set the current play time and seek value.

The source element has the video source.

Below that, we show the currentTime value in seconds.

And below that, we show the range input to let us set the progress of the video.

The value prop is set to seekValue to move the slider dot as the video plays.

And in the onChange function, we set the currentTime and call setSeekValue to set the seekValue state.

Below that, we have the play, pause, and stop buttons that calls the functions above when we click them.

And the other buttons call setSpeed when we click them.

Conclusion

We can create a video player easily with React and JavaScript.