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. Adjusting 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.
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.
4. Automatic video codec
vc_auto feature is mainly geared towards automatically choosing the best codec settings for the video for playing on the web. For more information, http://cloudinary.com/documentation/video_manipulation_and_delivery#video_codec_settings.
Note: When applying any transformation to a video, Cloudinary automatically set the video codec to automatic for the derived video.
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.