Note: We recommend installing version
>=1.1.2
and above. This is because any version before that will cause errors in your code.
The reactjs media is a react package with awesome HTMLMediaElements that are recreated into react components with a good looking UI and fast UX.
It includes currently only has a video and audio component.
In v1.1.9
more components such as youtube and facebook player will be included.
To install go to your terminal and run this script
$ npm install reactjs-media
If your see no error then is is Installed.
In here we shall show a small demo on how to setup a simple video component. We shall create the default component.
import React from 'react';
import { ReactVideo } from 'reactjs-media/video';
const App = () => {
return (
<div>
<MyVideo />
</div>
)
}
const MyVideo = () => {
return (
<>
<div>
<ReactVideo
src='https://www.example.com/myvideo.mp4'
poster='/poster.png'
/>
<div/>
</>
)
}
The above code can be used to create the most basic video component. .
A few important props you can pass are here:
Prop | type | Function |
---|---|---|
src |
string : Required | This is the source of the video you want to display a it will be placed in the <source /> tag. |
poster |
string: | This is the poster os the video |
className |
string | The class of the video |
onPlay |
fuction | It takes in a function and you can use it how you want |
onPause |
fuction | It also takes in a function and you can use it how you want |
onTimeUpdate |
function | It is triggered when the video is playing. It passes in 3 arguments. An event , currentTime , and the percentage finished. |
If you want to learn more on how to customize it. Checkout the offical Documentation
This package is developed by Beingana Jim Junior a fullstack Developer. The source code can be found on Github. Anybody interested is free to contribute.