1.0.10 • Published 4 years ago
@acorbeau/react-video-seek-slider v1.0.10
@zeklouis/react-video-seek-slider forked from @yay2008
a video seek slider
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-slider3. API
| Parameter | Description | Type | Default |
|---|---|---|---|
| fullTime | Total time | number | |
| currentTime | Current time | number | |
| onChange | Change callback | (time: number, offsetTime: number) => void | |
| offset | Offset | number | 0 |
| bufferProgress? | buffer | number | |
| hideHoverTime? | Whether to enable hover display time function | boolen | false |
| secondsPrefix? | Second display | string | "00:" |
| minutesPrefix? | Points display | string | "00:" |
| limitTimeTooltipBySides? | Where to insert the three-way button | boolean | |
| sliderColor? | Progress bar color | string | |
| sliderHoverColor? | The color of the progress bar displayed by hover | string | |
| thumbColor? | thumb color | string | |
| bufferColor? | buffer color | string |
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
Get the source code
git clone https://github.com/zeklouis/react-video-seek-slider.gitEnter the project and install library file dependencies
cd react-video-seek-slider yarnStart library file project
yarn startAnd installed into the project examplefile dependencies
cd example yarnStart exampleproject
yarn start
6. Project screenshot

License
MIT © zeklouis
1.0.10
4 years ago