Delivering High-Quality Videos on Your ReactJS Website

I'm Raul, one of the cofounders at ImageKit. I flew in from India yesterday, and I was watching a news video on my phone yesterday. And since I'm on international roaming, it obviously took a lot of time to buffer that video and load that. And I knew for every second of that video that I'm loading, I'm going to get a huge bill when I go back to my country. So this talk that I have becomes all the more relevant right now where I'll talk about how do you optimize videos if you're working on a really video-intensive experience on a React app, or it could be any other platform as well. How do you optimize and stream videos correctly and natively inside your application?

Now this isn't an actual video. It's just a GIF. It would have been very embarrassing if I would have embedded a video and it would not have played during the talk. But as users, all of us have actually seen something like this. You start playing a video, and it just keeps buffering. And it's really frustrating, right? It's not a great experience for your users or visiting your app to actually experience this. And as developers, we need to find out ways in which we can optimize a really large MP4 or MOV video that's stored in your cloud.

And how do you deliver that correctly in your React application, right? Video streaming is complex, right? It's not easy. There are multiple resolutions. There are codecs, bit rates. You have to deal with audio, video, subtitles. You have to store these chunks somewhere. Then you have to configure a CDN to deliver it, right? So it's really complex. In our experience, what we have seen, a lot of developers either just completely skip the optimization part. They just deliver that high-quality video directly to their users. Or maybe they'll create one variant of that video and just deliver that one variant to every user on mobile and desktop.

Or you'll end up using a platform like YouTube or Vimeo to host your videos. While they handle video streaming, issues like irrelevant ads and lack of customization arise. Using the ImageKit Video API offers real-time optimization, streaming, and easy integration with your existing infrastructure. Simply upload your content to any cloud storage, then connect it to ImageKit for seamless access and optimization.

ImageKit retrieves the original video file from your storage, optimizes it in real-time, and delivers a suitable version for the device accessing it. The video component in the React SDK simplifies this process by enabling easy identification and transformation of video files. With ImageKit, you can ensure a quick loading time by automatically converting and compressing the video to the right format.

Unlike platforms like YouTube, ImageKit provides a single video file streaming experience without switching between different resolutions based on network speed. Additionally, you can enable adaptive bit rate streaming directly from the URL, enhancing the streaming experience for users. By leveraging ImageKit's capabilities, you can deliver optimized videos seamlessly while maintaining control over the streaming process.

It could be any popular cloud storage. It could be a web server. It could be private. It does not matter. Just keep uploading your assets wherever you are uploading them.

When I say connect, it's very simply connecting it like an origin to a CDN. We are not really going to pull the assets from your bucket. It's just a connection that exists which will allow ImageKit to pull in the asset in real time when you access something via ImageKit.

ImageKit actually goes back to your storage, gets the original video file, does all the optimizations and transformations in real time, and delivers an optimized video that's suitable for that particular device. In ImageKit, you can enable adaptive bit rate streaming directly from the URL. All that you need to do after that same video.mp4 URL, you just append IK master m3u8, which is nothing but a suffix to enable HLS-based adaptive streaming.