react-video-progress v2.0.5
React Video Progress
React component to show video progress at the video frame border build in Typescript
Demo
Installation
npm install --save react-video-progress
yarn add react-video-progress
Usage
import React, { Component } from 'react'
import { VideoProgress } from 'react-video-progress'
class Example extends Component {
render() {
return <VideoProgress
progressStart="BottomLeft"
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 <VideoProgress
progressStart="BottomLeft"
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 <video>
props and passes them down to the underlying video element.
Props
All props are optional.
pathColor
: String, defaultred
- Any valid color string (e.g.
#ffffff, rgb(0,0,0)
)
- Any valid color string (e.g.
pathWidth
: String, default3px
- Any valid width value (e.g.
2em, .5rem
)
- Any valid width value (e.g.
pathBorderRadius
: String, default0
- Any valid border radius value (e.g.
2px, 5%
)
- Any valid border radius value (e.g.
progressStart
: String, defaultBottomLeft
- One of
BottomLeft, TopLeft, TopRight, BottomRight
- One of
type
: String, defaultOneLine
- One of
OneLine, TwoLines, BottomLine
- One of
wrapperStyle
: Object, default{ display: 'inline-block', position: 'relative'}
- inline styles for wrapper
div
- inline styles for wrapper
wrapperClassName
: String, default''
- Class assigned to wrapper
...rest: any of HTMLVideoElement props
- Any of
<video>
attributes (e.g.autoPlay, width, className
etc)
- Any of
License
MIT © asashay
6 months ago
6 months ago
8 months ago
11 months ago
1 year ago
2 years ago
2 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago