react-player show the video thumbnail on pause

381 Views Asked by At

I'm using ReactPlayer and I'm trying to get it so that the "light" thumbnail that I set shows when the video is paused.

I've tried invoking the "showPreview()" callback on pause. According to the ReactPlayer docs this it's intended functionality is: "When using light mode, returns to the preview overlay". I understand that the light thumbnail is essentially a still image and the player isn't loaded until the user clicks the thumbnail.

Here's my current code

const playerRef = React.createRef();
 const videoElement = {
    url: "www.somevideourl.com",
    thumbnail: "assets/images/video-thumbnail.png"
  }

<ReactPlayer 
    ref={playerRef}
    url={videoElement.url}
    controls
    playing
    light={videoElement.thumbnail}
    onPause={() => playerRef.showPreview()}
/>

Something to note is I've on the showPreview() call in the onPause callback I've also tried playerRef.current.showPreview() which has the same outcome mentioned above.

0

There are 0 best solutions below