javascripthtmlreactjsbrightcovereact-player

How to play a video from a particular timestamp when user clicks on a button in Brightcove


I am working on Brightcove to play a video. I need to play a video from a particular timestamp within the video. For eg: if the user clicks on a button the video should play from 5 min 30 sec of the video. I think the idea is clear. I am using brightcove/react-player-loader to play video.

<ReactPlayerLoader
    onSuccess={onVideoSuccess}
    accountId={accountID}
    videoId={mediaID}
    playerId={playerID}
    attrs={{ className: "brightcove", autoPlay: "muted" }}
/>

Solution

  • import { useRef } from 'react'
    const mediaRef = useRef()
    
    const gotoTimeStamp = (time) => {
        mediaRef.current.player.currentTime(time)
      }
    
    
    return ( 
    
     <ReactPlayerLoader
       ref={mediaRef}
        onSuccess={onVideoSuccess}
        accountId={accountID}
        videoId={mediaID}
        playerId={playerID}
       attrs={{ className: 'brightcove', autoPlay: 'muted />
    
    
     <button onClick={() => gotoTimeStamp(1434)}>
       Click me            
      </button>
    )