2.0.5 • Published 5 months ago

react-video-progress v2.0.5

Weekly downloads
74
License
MIT
Repository
github
Last release
5 months ago

React Video Progress

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

NPM JavaScript Style Guide Build Status Coverage Status

Demo

Video Progressbar 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

2.0.5

5 months ago

2.0.4

5 months ago

2.0.3

8 months ago

2.0.2

10 months ago

2.0.1

1 year ago

2.0.0-0

2 years ago

2.0.0

2 years ago

1.2.0

4 years ago

1.1.9

4 years ago

1.1.8

4 years ago

1.1.7

4 years ago

1.1.6

4 years ago

1.1.5

4 years ago

1.1.4

4 years ago

1.1.3

4 years ago

1.1.2

4 years ago

1.1.1

4 years ago

1.1.0

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago

0.3.1

4 years ago

0.3.0

4 years ago

0.2.1

4 years ago

0.2.0

4 years ago

0.2.2

4 years ago

0.1.2

4 years ago

0.1.4

4 years ago

0.1.3

4 years ago

0.1.1

4 years ago