@netless/seek-slider
a seek slider
1. 说明
本项目技术选型为:React
Typescript
打包工具为: rollup
2. 安装
npm install --save @netless/seek-slider
或者
yarn add @netless/seek-slider
3. 接口说明
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
fullTime | 总时长 | number | |
currentTime | 目前时间 | number | |
onChange | 变化回调 | (time: number, offsetTime: number) => void | |
offset | 起始时间 | number | 0 |
bufferProgress? | buffer 进度 | number | |
hideHoverTime? | 是否开启 hover 显示时间功能 | boolen | false |
secondsPrefix? | 秒的显示 | string | "00:" |
minutesPrefix? | 分的显示 | string | "00:" |
limitTimeTooltipBySides? | 三方按钮插入的位置 | boolean | |
sliderColor? | 进度条颜色 | string | |
sliderHoverColor? | hover 显示的进度条颜色 | string | |
thumbColor? | thumb 颜色 | string | |
bufferColor? | buffer 的颜色 | string |
4. 使用概览
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);
}
}}
// hover 显示时间
hideHoverTime={true}
limitTimeTooltipBySides={true}
/>
)
}
}
5. 启动项目
-
获取源码
git clone git@github.com:netless-io/netless-react-seek-slider.git
-
进入项目并安装库文件依赖
cd netless-react-seek-slider yarn
-
启动库文件项目
yarn start
-
进入项目并安装
example
文件依赖cd example yarn
-
启动
example
项目yarn start
6. 项目截图
License
MIT © wushuang