Restart Video

[bennik88]

Problem

I want to restart the video and can't find a way to make it work.

I'm trying to make an on hover video player, so as soon as you hover over the video it starts playing and when you leave the mouse the thumbnail will appear again and it starts from new as soon as you hover again.

What I've tried

Set the start prop to 0 as soon as the video is paused. But it seems to have no effect. Is this prop refreshing? I've also tried to use the onPause prop to set the setStart state to 0.

[goto-bus-stop]

The start prop is a bit unusual, changing it doesn't really do anything. It's only used when the video ID changes as well. For granular/direct control like this, you need to use the methods on the underlying @vimeo/player instance, which you can access in onReady.

const [player, setPlayer] = useState(null)

const restartVideo = useCallback(() => {
  player.setCurrentTime(0)
}, [player])

return <Vimeo onReady={setPlayer} />