Analytics in Video

Hello, I am wondering how one can use the analytics, in specific the callbacks from the events. Specifically, the play, pause, and ended events. Is there any reccomended way to do this with your Video component. Thanks!

[tocker]

Hi @ajmajma,

You can pass event handlers to the Video component as you would to any React component. For example,

let handlePlay = (e)=>{
  console.log("Play event:", e);
};

// ...
render(
  <Video cloudName="demo" controls publicId="dog" width="300" crop="scale" onPlay={(e)=> handlePlay(e)}/>
)

or

let handlers = {
  onPause: (e)=> console.log("Pausing at ", e.target.currentTime),
  onSeeked: (e)=> console.log("Seeked to new time: ", e.target.currentTime)
};
render(
  <Video {...handlers} cloudName="demo" controls publicId="dog" width="300" crop="scale"/>
)

Hope this helps!

[ghost]

@wilsonmsalberto please see this blog post about integrating the cloudinary video player in react: https://dev.to/rebeccapeltz/five-ways-for-integrating-the-cloudinary-video-player-into-react-applications-2kcb