These days videos represent a significant proportion of web and mobile content, which is constantly growing. As video content is extremely heavy, one must make sure to deliver this video content in the most optimized way.
The challenges developers face with videos on their websites tend to be quite complex. The video files can be huge, which means longer upload & download times and very CPU-intensive transcoding and manipulation. The set of potential devices, resolutions, video formats and video codecs is large and confusing.
This article will address these challenges and offer easy-to-use and implement solutions:
1. Scale videos to display size
The most efficient way to downscale your videos and improve their performance is to resize them so they'll fit your site/app specific design.
If it suits your use-case, you can also perform the resize before you save the video to your Cloudinary account using incoming transformations, to also save storage space.
2. Automatic Video Quality
Cloudinary allows you to control the video quality - the higher the quality is, the heavier the resulting video is, and vice versa. Quality is configured on a 0-100 scale. However, instead of defining a specific quality value, you can use Cloudinary's intelligent quality and encoding algorithm (q_auto in the URL). The algorithm analyses each video to decide on the optimal encoding characteristics that will produce the best visual quality while minimizing the file size. For example, http://res.cloudinary.com/demo/video/upload/q_auto/dog.mp4
For further control of the automatic quality selection, https://cloudinary.com/documentation/video_manipulation_and_delivery#automatic_quality
Note: When applying any transformation to a video, unless q_auto is explicitly requested, Cloudinary automatically sets the quality to 70 and the video codec to automatic for the derived video.
3. Adaptive Bitrate Streaming
Adaptive bitrate streaming is a video delivery technique that adjusts the quality of a video stream in real time according to detected bandwidth and CPU capacity. This enables videos to start quicker, with fewer buffering interruptions, and at the best possible quality for the current device and network connection, to maximize user experience. For more information - http://cloudinary.com/documentation/video_manipulation_and_delivery#adaptive_bitrate_streaming_hls_and_mpeg_dash.
5. Use incoming/eager transformation
Using incoming transformations to downscale your videos before they're saved on your Cloudinary account. This can save you some precious storage for large videos when the original video is disposable.
Another option is using eager transformations to pre-generate the derived images and pre-warm the cache to save your user the time waiting for your videos to process and load.
6. Restrict transformations
You can enable Strict Transformations on your account to prevent transformations from being dynamically applied to your videos. This might save you on transformations (quota), bandwidth, and storage.