Cloudinary React Player Private Video

Steps

• create cloudinary account
• upload video , mark it restricted 

• make video player
• https://www.youtube.com/watch?v=sNqfQZI9WdU (details how make a react component)
• https://cloudinary.com/documentation/cloudinary_video_player#installation

In index.html

in < header >

< link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cloudinary-video-player@3.4.2/dist/cld-video-player.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" / >

in < body > add 
< script src="https://cdn.jsdelivr.net/npm/cloudinary-video-player@3.4.2/dist/cld-video-player.min.js" crossorigin="anonymous" referrerpolicy="no-referrer" >< / script >

https://cloudinary.com/blog/ensuring-video-privacy-with-cloudinary

Mark Them as Private Videos

By marking your videos as private, you not only enjoy controlled access but can also prevent them from being indexed in search engine results, thus preventing any unintended discovery.  

How Cloudinary Helps

Cloudinary allows you to make your videos private, allowing you to exercise full control over their access and make them unsearchable by the public. 

For example, you can only allow access to authenticated users and use signed URLs. These signed URLs are temporary encrypted links that expire after using them for certain times or after a fixed time period.

Using this code, you can create a signed video tag for your private video, e.g., “secret video,” which has been resized using fill resize mode. 

• .signed(true) option adds a signature to the generated URL and prevents any unauthorized access. 
• .type(“authenticated”) makes sure that your video is accessible only via authenticated access, making it absolutely private. 

 

https://github.com/cloudinary-community/cloudinary-examples/tree/main/examples/react-video-player

Second Way

https://www.npmjs.com/package/cloudinary-video-player

• in package.json add " cloudinary-video-player " : " 3.5.2 "
• in VideoPlayer.tsx add import cloudinary from 'cloudinary-video-player';
• in VideoPlayer.tsx cloudinaryRef.current = cloudinary;

  cloudinaryRef.current.videoPlayer(videoRef.current, { ... }

If URL is 

https://res.cloudinary.com/abcd/video/upload/v1234/abc_movie.mp4

the code is 

useEffect(() => {

if (cloudinaryRef.current ) return;

cloudinaryRef.current = cloudinary;

cloudinaryRef.current.videoPlayer(videoRef.current, {

cloud_name: 'abcd'

})

},[]);

return (

<video

ref={videoRef}

data-cld-public-id="v1234/abc_movie"

width={width}

height={height}

controls

{...props}

/>

)

now i am getting 401 unauthorized