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.