@acorbeau/react-video-seek-slider 中文文档教程

Question

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

视频搜索滑块

1. Description

本项目使用的是：React Typescript

打包工具是： rollup

2. Installation

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

or

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

3. 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

1. 获取源码

   git clone https://github.com/zeklouis/react-video-seek-slider.git
   

2. 进入项目并安装库文件依赖

   cd react-video-seek-slider
   yarn
   

3. 启动库文件项目

       yarn start
   

4. 并安装到项目examplefile dependencies

       cd example
       yarn
   

5. 启动exampleproject

       yarn start
   

6. Project screenshot

License

麻省理工学院 © zeklouis