React Video

Video Player#

The react video player is a component for native video players but it is optimized to look the same in all browsers and have a great UI and is highly customized. It consumes both the native browser event DOM api and the react event API making it fast.

Usage#

To use the react video player component you haveto import it r=from the reactjs-media module as ReactVideo

Example

import React from "react";
import { Video } from "reactjs-media";
const MyVideo = () => {
return (
<>
<Video
src="/video.mp4"
poster="/poster.png"
//you can pass in other props
/>
</>
);
};

Your can also import the video player from another file in the package.

import { Video } from "reactjs-media/video";

customization#

To custiomize the main theme color of the video player you have to pass in a prop named primaryColor

import { Video } from "reactjs-media";
export const Video = () => (
<div>
<Video
src="/Learn useCallback In 8 Minutes.mp4"
poster="/uganda-smoke-flag-isolated-black-background-199119742.jpg"
primaryColor="red"
/>
</div>
);

Component Props#

The package also has additional pros that your can pass throug is so that you can carry out some logic. A feww important ones will be listed here you can find the full list in the API section

src#

  • The src prop is a string and it represents the source of the video being played. You should not that it is also a required prop so if your dont pass it in the component will throw an error.

Example

const MyVideo = () => {
return <div>
<Video
src="/Learn useCallback In 8 Minutes.mp4"
poster="/uganda-smoke-flag-isolated-black-background-199119742.jpg"
/>
<div>;
};

poster#

  • The poster prop is a string and it represents the poster of the video being played.

Example

const MyVideo = () => {
return <div>
<Video
src="/Learn useCallback In 8 Minutes.mp4"
poster="/ASJDXJ.........XS.....42.jpg"
/>
<div>;
};

type#

This represents the type of the video it usally defaults to video/mp4. the values expexted is a string.

onTimeUpdate#

This props is also passed down in form of a fuction. The function that your pass in will recieve three arguments and these are:

  • event#

This is a native browser event that is usally triggered each time the video time updates. It is the first argument you will receive

  • currentTime#

This is a the current time that the video playback has reached.

  • duration#

This is the full video duration. This is anded in just because we thought it was necessary.

const MyVideo = () => {
function onTimeUpdateProp(event, currentTime, duration) {
// some logic is place here
}
return <div>
<Video
src="/Learn useCallback In 8 Minutes.mp4"
....
onTimeUpdate={onTimeUpdateProp}
/>
<div>;
};
Edit this page