Skip to main content

Video Player

Reactjs Media provides a default customizable video player component that can be used to play videos in your application.

Installation​

The default video player component is a wrapper around the HTML5 video element with a set of controls and a customizable UI. The Video Component is built in a modular way following react principles making it easy to use and customize.

To use the Video Component, you can import it from the reactjs-media package and pass the required props to it.

import { Video } from "reactjs-media";

const App = () => {
  return (
    <div>
      <Video
        src={"/video.mkv"}
        controls={true}
        height={500}
        width={800}
        poster={
          "https://hips.hearstapps.com/hmg-prod/images/ripley-pa-108-011822-01629-r-661067043d66f.jpg?resize=980:*"
        }
      />
    </div>
  );
};

Props​

The Video Component accepts a number props that are defined under the VideoProps interface. These can be both attributes of the player or event handlers.

Attributes​

Attributes are the properties that can be set on the video player to control its behavior. The following are the attributes that can be set on the Video Component:

  • src: The source of the video file.
  • controls: A boolean value to show or hide the video controls.
  • height: The height of the video player.
  • width: The width of the video player.
  • poster: The poster image to be displayed before the video starts playing.
  • autoPlay: A boolean value to start playing the video automatically.
  • loop: A boolean value to loop the video when it ends.

Event Handlers​

Event handlers are the functions that can be passed to the video player to handle different events. The following are the event handlers that can be passed to the Video Component:

  • onPlay: A function to be called when the video starts playing.
  • onPause: A function to be called when the video is paused.
  • onEnded: A function to be called when the video ends.
  • onTimeUpdate: A function to be called when the video time is updated. It takes the current time of the video as an argument.
  • onVolumeChange: A function to be called when the volume of the video is changed. It takes the current volume of the video as an argument.
  • onSeeking: A function to be called when the video is seeking.
  • onSeeked: A function to be called when the video is seeked.
  • onError: A function to be called when an error occurs while loading the video.

DigitalOcean Referral Badge

Playground​

You can try the Video Component in the following sandbox: