As technologies advance apace, the volume of online videos continues to increase fast. Instagram, WhatsApp, Facebook, YouTube, TikTok are just a few platforms among many that massively share and distribute videos around the clock.
In addition to cloud-based video compression solutions like Cloudinary, local video compression methods using libraries such as react-native-ffmpeg have also emerged, especially for React Native developers. This allows for compression right on the user’s device before the upload process.
When compared to other media files, such as those for audios and images, video files are larger, consuming a lion’s share of data bandwidth. Compressing video files enables faster downloads, uploads, and streaming online.
For people in remote areas and developing regions, where download and upload speeds usually range between 720 kb and 1.5 Mb per second, compressing video files is not optional—it’s mandatory! To do that and deliver videos of a smaller file size to users with Cloudinary, you as developers can choose either of these two ways:
- Compression as part of the upload request
- On-the-fly compression during delivery
On October 29th, 2019 Cloudinary released the new auto-quality setting for content-aware video compression. By using the q_auto parameter, Cloudinary intelligently encodes video using the most optimized settings, for the best trade-off between file size and quality. Read more.
However, if you’re working in a React Native environment and wish to compress videos on the client side before even uploading, you can use the react-native-ffmpeg library. This enables you to directly compress videos using FFmpeg commands right within your React Native app. The benefit is that you can have more granular control over compression settings and also reduce upload times since the video is already compressed before being sent to the server.
This is part of a series of articles about video optimization.
This technique involves applying compression transformation to the videos during upload before storage. Cloudinary makes the process a walk in the park with just one line of code in Ruby, Python, or PHP:
Ruby
Cloudinary::Uploader.upload("cool_video.mp4", :resource_type => :video, :quality => 60)
Code language: JavaScript (javascript)Python
cloudinary.uploader.upload("cool_video.mp4", resource_type = "video", "quality" = "60")
Code language: JavaScript (javascript)PHP
\Cloudinary\Uploader::upload("my_video.mp4", [ "resource_type" => "video", "quality" => "60"]);
Code language: PHP (php)In the code above, you specify the quality parameter to manipulate the video’s quality and size before Cloudinary stores the video in the cloud.
If you’re not sure what number to assign to the quality parameter, just type auto. Cloudinary then automatically adjusts the compression quality for your video by applying the optimal balance between the video’s file size and quality.
With this Cloudinary technique, you upload videos straight to the cloud and then apply the quality compression parameter when delivering them to users. You can also serve videos in the formats that pertain to the various web browsers and mobile devices.
You configure quality on a 0-100 scale. The higher the video quality, the larger the video size; the lower the video quality, the smaller the video size. To compress video size on the fly, adjust their quality parameter in a codeline. See the examples below.
Node.js
cloudinary.video("dog", {quality: 50})
Code language: CSS (css)Java
cloudinary.url().transformation(new Transformation().quality(50)).videoTag("dog");
Code language: CSS (css)Python
CloudinaryVideo("dog").video(quality=50)
Code language: JavaScript (javascript)On-the-fly video compression through the URL
https://res.cloudinary.com/demo/video/upload/q_50/dog.mp4
In q_50 in the above URL, q stands for quality; 50 is the number of your choice on a 0-100 scale.
Front-end developers, you can drop those components in your app out of the box, like this:
React.js
<Video publicId="dog" ><Transformation quality="50" /></Video>
Code language: HTML, XML (xml)Vue.js
<cld-video publicId="dog" ><cld-transformation quality="50" /></cld-video>
Code language: HTML, XML (xml)dog represents the name of the uploaded video, which is usually the public ID (publicId) on the Cloudinary storage.
For React and React Native developers, choosing and integrating local video compression methods can be crucial. Using React’s state management tools, you can create a UI component that lets users select videos from their device, compress them locally, and then initiate the upload process. This ensures faster uploads and better user experience. Handling potential compression errors with a try-catch mechanism ensures a more resilient app and a smoother user experience.
Compress video size automatically with Cloudinary making media much more accessible. Furthermore, Cloudinary’s drop-in tools and services are effective, simple, and intuitive, saving you ample time to focus on your project.
For details, check out the following Cloudinary documentation:
- A complete reference on video manipulation and transformation with Cloudinary.
- SDKs and libraries: server side, client side, and mobile
- Video Transcoding and Manipulation
- Top 10 Mistakes in Handling Website Videos and How to Solve Them
- ExoPlayer Android Tutorial: Easy Video Delivery and Editing
- Ultimate HTML5 Video Player Showdown: 10 Players Compared
- How to Generate Waveform Images From Audio Files
- Auto Generate Subtitles Based on Video Transcript
- Auto-Generate Video Previews with Great Results Every Time
- Adaptive HLS Streaming Using the HTML5 Video Tag
- Video Optimization With the HTML5 <\video> Player
- Converting Android Videos to Animated GIF Images With Cloudinary: A Tutorial
