React Video Progress

React component to show video progress at the video frame border build in Typescript

Demo

Live samples

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, default red

  • Any valid color string (e.g. #ffffff, rgb(0,0,0) )

• pathWidth: String, default 3px

  • Any valid width value (e.g. 2em, .5rem)

• pathBorderRadius: String, default 0

  • Any valid border radius value (e.g. 2px, 5%)

• progressStart: String, default BottomLeft

  • One of BottomLeft, TopLeft, TopRight, BottomRight

• type: String, default OneLine

  • One of OneLine, TwoLines, BottomLine

• wrapperStyle: Object, default { display: 'inline-block', position: 'relative'}

  • inline styles for wrapper div

• wrapperClassName: String, default ''

  • Class assigned to wrapper

• ...rest: any of HTMLVideoElement props

  • Any of <video> attributes (e.g. autoPlay, width, className etc)

License

MIT © asashay