1.0.10 • Published 3 years ago

@acorbeau/react-video-seek-slider v1.0.10

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

@zeklouis/react-video-seek-slider forked from @yay2008

a video seek slider

NPM JavaScript Style Guide

1. Description

This project is using:React Typescript

Packaging tools are: rollup

2. Installation

npm install --save @zeklouis/react-video-seek-slider

or

yarn add @zeklouis/react-video-seek-slider

3. API

ParameterDescriptionTypeDefault
fullTimeTotal timenumber
currentTimeCurrent timenumber
onChangeChange callback(time: number, offsetTime: number) => void
offsetOffsetnumber0
bufferProgress?buffernumber
hideHoverTime?Whether to enable hover display time functionboolenfalse
secondsPrefix?Second displaystring"00:"
minutesPrefix?Points displaystring"00:"
limitTimeTooltipBySides?Where to insert the three-way buttonboolean
sliderColor?Progress bar colorstring
sliderHoverColor?The color of the progress bar displayed by hoverstring
thumbColor?thumb colorstring
bufferColor?buffer colorstring

4. Usage overview

import * as React from "react";
import ToolBox from "@netless/react-tool-box";

export default class ToolBoxExample extends React.Component<{}, {}> 
  render () {
    return (
      <SeekSlider
         fullTime={player.timeDuration}
         currentTime={this.getCurrentTime(this.state.currentTime)}
         onChange={(time: number, offsetTime: number) => {
             if (this.state.player) {
                 this.setState({currentTime: time});
                this.state.player.seekToScheduleTime(time);
             }
         }}
         hideHoverTime={true}
         limitTimeTooltipBySides={true}
        />
    )
  }
}

5. Start the project

  1. Get the source code

    git clone https://github.com/zeklouis/react-video-seek-slider.git
  2. Enter the project and install library file dependencies

    cd react-video-seek-slider
    yarn
  3. Start library file project

        yarn start
  4. And installed into the project examplefile dependencies

        cd example
        yarn
  5. Start exampleproject

        yarn start

6. Project screenshot

slider

License

MIT © zeklouis

1.0.10

3 years ago