Play Video in React with the Cloudinary Video Player - Dev Hints

the cloudinary video player allows you to easily embed videos in your react app and with just a little bit of code and a wide variety of options to customize your player we'll be able to provide our visitors The Experience they need to visit our videos here's how starting off in a basic react app we want to be able to embed our video player right on the page to do this I'm going to start off by building a video player component I'm going to start off this component with a simple function that's going to return my video element in order to use and work with the video player we need to embed the video player script on the video player documentation we can head over to the installation and setup link where if we start to scroll down we're going to be able to see the script in this style tag that we can embed on our page so I'm going to start off by copying the CSS file inside of my code I'm going to head over to the public index.html file where I'm going to paste that right inside of the head then I'm going to do the same thing with my script tag I'm going to paste it in at the top of my body so that I know that it's loaded when I try to use it now as a quick note if you're using a framework such as nexjs you might be able to take advantage of more advanced loading techniques for the script tag in order to load it asynchronously but now that we're loading our script we can go ahead and start to initialize our player at the top of my component I'm going to import use effect Brum react now inside of the component itself I'm going to use that use effect to fire a function I'm going to pass in an empty array as a dependency so it only fires once and inside I want to use window.cloudary in order to take advantage of using the video player API now to do this I'm going to store window.cloudary in a ref or reference so that I can have access to it later so in addition to my use effect I'm going to import use ref we're inside of my component I'm going to say constant cloudinary ref is equal to use ref with my reference initialize I'm going to say cloudinaryref.current is equal to culinary window now to avoid this running multiple times I also want to add if cloudinary ref exists I'm going to just simply return so that we don't continuously try to re-initialize this video player but now I'm going to get started with that initialization where I'm going to say cloudnary ref.current I'm going to use the video player method and the first argument is going to be the actual video element itself so the way that we can do that is we can use ref again and we can store a reference to this video element which we can pass in as this first argument so I'm going to go ahead and clone my video wrap and I'm going to change it to video ref and then on the video player element itself I'm going to say ref is equal to that video ref and now I can pass that in as the first argument specifying the current version in order to make sure that when we use this we're accessing our actual cluttering account we're going to pass in a second argument to video player we're going to pass in an object remember to specify Cloud underscore name where I'm going to set my cloud name of Colby Cloud examples but make sure to use your Cloud name here so you can reference your videos and at this point we don't have much more to do we need to just be able to pass in the public ID so that the video player can read what video we want to load so on the video element itself I'm going to specify data CLD public ID I'm going to set that equal to my public ID of videos slash waterfall and all that's left now is to actually use our video player component so I'm going to head over to app.js I'm going to import my video player from components slash video player and now I'm going to take that video player and embed it right inside of the page where we now can see that it's a little big but we can see that it is actually loading so first let's actually Define a width and height for our video so that we can Define the size of it so I'm going to define a width and a height field but I'm going to grab these values from props that way we can customize it depending on where it is so I'm going to destructure my width and my height from my props and pass those values right into my component then I can Define my size on the video player such as a width of 960 and a height of 540 where now we can see that we have it at a more reasonable size but I also want to be able to control this player and actually play it so I'm going to specify controls and now we can see that I can actually click Play and play my waterfall we can also allow any use of the video player to customize any of the as Properties by using that props object and we're going to actually spread it out onto the actual player so that anytime we want to define those such as maybe we want to turn the controls off for a particular moment we can customize it to how we want but for this moment I want to leave the controls on so that I can actually play it to learn more about how you can customize your player including different themes adding subtitles and captions along with a lot of other features head over to the cloudinary documentation so in review in order to easily embed cloudery videos on our react app we can use the cloudinary video player where after initializing it we'll have the ability to play our videos inside of our application with the ability to customize our player to exactly the experience we need for our app

Channel: Cloudinary

Views: 19,485

Keywords: react video player, play video reactjs, react video player tutorial, react video player example, cloudinary video player, cloudinary video, cloudinary video player react, cloudinary react, cloudinary, cloudinary react video player, cloudinary react component, cloudinary react video

Id: sNqfQZI9WdU

Length: 5min 19sec (319 seconds)

Published: Tue Mar 14 2023