0.2.3 • Published 6 years ago
@vibbio/time-marker v0.2.3
Time marker
Usage
The component is exported from VideoComponent.
Props
Prop | Description |
---|---|
url | Contains the url of the video to play |
startTime | The start time of the video. Undefined if the video does not have a startTime (assumes 0) |
endTime | The end time of the video. Undefined if hte video does not have a endTime (assumes length of video) |
timeMarkerButtonFunction | The callback function. Input to the function is startTime, currentPlayTime, endTime and length |
Run local
npm i && npm start
The demo of the time marker is found in react-player/src/demo/App.js
.
It could be smart to add some state information to the VideoComponent when working on it:
<h2>State</h2>
<table>
<tbody>
<tr>
<th>url</th>
<td className={!url ? 'faded' : ''}>
{(url instanceof Array ? 'Multiple' : url) || 'null'}
</td>
</tr>
<tr>
<th>playing</th>
<td>{playing ? 'true' : 'false'}</td>
</tr>
<tr>
<th>prevSeek</th>
<td>{`${this.state.prevSeek[0]} : ${this.state.prevSeek[1]}`}</td>
</tr>
<tr>
<th>duration</th>
<td><Duration seconds={duration} /></td>
</tr>
<tr>
<th>elapsed</th>
<td><Duration seconds={duration * played} /></td>
</tr>
<tr>
<th>remaining</th>
<td><Duration seconds={duration * (1 - played)} /></td>
</tr>
</tbody>
</table>
Documentation
The time marker is based on react-player and rc-slider.
0.2.3
6 years ago
0.2.2
6 years ago
0.2.1
6 years ago
0.1.26
6 years ago
0.1.25
6 years ago
0.1.24
6 years ago
0.1.23
6 years ago
0.1.22
6 years ago
0.1.21
6 years ago
0.1.20
6 years ago
0.1.19
6 years ago
0.1.18
6 years ago
0.1.17
6 years ago
0.1.16
6 years ago
0.1.15
6 years ago
0.1.14
6 years ago
0.1.13
6 years ago
0.1.12
6 years ago
0.1.11
6 years ago
0.1.10
6 years ago
0.1.9
6 years ago
0.1.8
6 years ago
0.1.7
6 years ago
0.1.6
6 years ago
0.1.5
6 years ago
0.1.4
6 years ago
0.1.3
6 years ago
0.1.2
6 years ago
0.1.1
6 years ago
0.1.0
6 years ago