react-video-progress
TypeScript icon, indicating that this package has built-in type declarations

2.0.3 • Public • Published

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
      />
  }
}

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

Package Sidebar

Install

npm i react-video-progress

Weekly Downloads

117

Version

2.0.3

License

MIT

Unpacked Size

156 kB

Total Files

20

Last publish

Collaborators

  • jim_digriz