amittkSharma/react-video-player-extended

Add a "Add marker" button to the extended react video player

amittkSharma opened this issue · 2 comments

As a user of the video library, I should be able to add the marker from the timeline itself.

Feature:

  1. Add a button to the controls sets and this button must also be configurable as the rest of them
  2. The button click event must be exposed outside, with the props.

I did manage to do it myself!

Start by declaring const [markers, setMarkers] = useState()
And in the videoplayer use markers = {markers}.

Then use onProgress={handleTime} on the VideoPlayer, where:

const [timeNow, setTimeNow] = useState()

    const handleTime = (e) => {
        setTimeNow(e.target.currentTime)
    }

Store markers by creating them manually, for example:
markers.push({ id: timeNow, time: timeNow, color: '#ffc837', title: timeNow })
where timeNow is the current time you selected!

Oh, I didn't notice you were the creator of the player ahah :)