React component to show progress at video frame borders
npm install react-video-progress> React component to show video progress at the video frame border build in Typescript
   
``bash
npm install --save react-video-progress
yarn add react-video-progress
`
`tsx
import React, { Component } from 'react'
import { VideoProgress } from 'react-video-progress'
class Example extends Component {
render() {
return
type="OneLine"
pathColor="red"
pathWidth="4px"
pathBorderRadius="2px"
src='http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
height="200px"
controls
/>
}
}
// or in the functional component
const FunctionalComponentExample = () => {
return
type="OneLine"
pathColor="red"
pathWidth="4px"
pathBorderRadius="2px"
src='http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
height="200px"
controls
/>
}
`
Also it takes in all the
* pathColor: String, default red
* Any valid color string (e.g. )
* pathWidth: String, default 3px
* Any valid width value (e.g. )
* pathBorderRadius: String, default 0
* Any valid border radius value (e.g. )
* progressStart: String, default BottomLeft
* One of
* type: String, default OneLine
* One of
* wrapperStyle: Object, default { display: 'inline-block', position: 'relative'}
* inline styles for wrapper
* wrapperClassName: String, default ''
* Class assigned to wrapper
* ...rest: any of HTMLVideoElement props
* Any of
MIT © asashay