CODEWITHSUNDEEP
reactjscloudinary
toy
toy

Reputation: 553

how to control the video-element in the cloudinary-react Video component

I want to call the .play() method on a cloudinary-react Video component. I tried to put a ref onto the Video component, but when I call play on the ref it doesn't get forwarded to the video-tag. <Video ref={this.videoPlayer} />

If I put a onClick on the component it gets forwarded to the video-tag and starts playing: <Video onClick={(e) => e.target.play()} />

there is no interface on the video-component for playing or pausing or only no documentation.

Upvotes: 1

Views: 661

Answers (2)

P&#233;ter Magyar
P&#233;ter Magyar

Reputation: 71

Pass the ref to the video with "innerRef" instead of "ref".

const videoRef = useRef();
    
function PauseVideo()
{
    videoRef.current.pause();
}
   
return(
    <AdvancedVideo
                  cldVid={YOUR_VIDEO}
                  innerRef={videoRef}
                  controls
     />
);

Upvotes: 0

Daniel Mendoza
Daniel Mendoza

Reputation: 497

To add controls to the video, a transformation can be added to the Cloudinary Video component. The transformation would be:

<Transformation controls="true" />

The video tag would look like this:

<Video publicId="myPublicId" fallbackContent="Your browser does not support HTML5 video tags."> <Transformation controls="true"/> </Video>

You can also refer to this in the Cloudinary documentation here: https://cloudinary.com/documentation/react_video_manipulation#example_3

Upvotes: 0

Related Questions