Jamstack Explorers

Video Streaming with Adaptive Bitrate with Scott Wachtmann & Jen Brissman

Implementing Cloudinary Video Player with React

Using the repo we've created for you, let's take a look at how to use ABR on the frontend using React!

Link to Github repository: https://github.com/cloudinary-training/jamstack-explorer-video-abr


Now we're going to turn our attention to using adaptive bitrate content on the client side. To do this, we're going to assume that all of the server-side work that needs to be done has already been taken care of. This means that we've already created our streaming profiles within Cloudinary and generated any eager transformations that we need for the content that we want to display to our end user.

With that taken care of, all we need to do is clone our sample code from the Github repository and run a quick yarn install to install our dependencies. The main dependencies that we're concerned with are the cloudinary, cloudinary- core, and cloudinary-video-player libraries. Our file enters through App.js. This component's main purpose is to instantiate our video player and pass through the necessary parameters to fully connect to our Cloudinary account. To do this, you'll see a params object defined at the top of the file that declares our cloud name as well as the public ID of the video that we're going to display to our end user.

Both of these values get passed through our params object for the video player itself. Inside of that video player component, you'll see that we're importing several libraries to help us render this particular component. First, we're bringing in useEffect from react.JS, as well as the main Cloudinary module from cloudinary-core.

There are also two files that we need to include to ensure that our video player instantiates correctly and the browser. A videoPlayer.js file and a videoPlayer.CSS file. Turning our attention to the component itself. You'll see that we immediately make use of the props that we pass from App.js to instantiate a new Cloudinary object.

Afterwards, we can look at what the component renders as its output. We're returning a single video HTML element with the ID cld-video-player. We're assigning this ID so that when our JavaScript runs, we can find this element and fully instantiate the entire Cloudinary video player. We're doing this once the component mounts to our DOM.

If you're familiar with older react implementations, you might be familiar with the component lifecycle method, componentDidMount. However, we're going to be using a hooks based approach. So instead of componentDidMount, we'll make use of a useEffect call. Our useEffect will run one time when the component is first mounted to the DOM, and that useEffect method will create an options object that declares what source types we're expecting to receive, as well as the basic controls that our player will use to instantiate. Finally, we locate the cld-video-player element that we created in the DOM earlier, pass in our options, object, and instantiate the player.

Once that's done, we're ready to run our code. All we need to do to get things running is run yarn start. This will start a local development server on our machine. And once our local development server is running, you'll see our adaptive bit-rate content is available for playing.


your progress