Like it or not, visuals tell better stories than words. But using images and videos on a website presents challenges. This article is a follow-up to Website Image Performance Improvement, in which we discussed how to upload, store, manipulate, optimize and deliver images, efficiently and effectively. Now, let's talk video.
Much like we talked in our previous article about the managing images on your website, you may also have a need to render video content. Trust me -- simply throwing a <video> tag with an accurate source to the browser does not deliver user satisfaction. At a high level, you need to consider the website layout, video quality and delivery, as well as address challenges, such as:
Adjusting video quality based on network conditions. For example, users in developing countries may have a slower internet connection compared to users in developed countries:
Delivering content to mobile users
Transcoding for different browsers
Manipulating video, such as resizing, cropping and adding visual effects
All these requirements make video complex. You cannot just take care of videos in few hours. In fact, you may find it difficult to find answers to certain questions on video management. But, there is one swift solution -- Cloudinary.
Cloudinary is an all-in-one media management solution. In this article, we are going to delve into using Cloudinary to easily upload, manipulate and deliver videos.
Let's see how we can use Cloudinary in our Node application.
All you need to start managing videos is to upload the best video quality you have. You can manipulate videos on-the-fly using Cloudinary's comprehensive API and easy to use manipulation URLs. Therefore, there is no need to do that before uploading. Let's see a simple code example from Node for making a video upload:
It is possible to use a desired format or quality level that suites a given video delivery situation. The fact that you uploaded an .mp4 video does not mean you have to upload another .webm version of that video. Cloudinary uses a feature called transcoding that enables you upload a single video and deliver it dynamically in different formats:
It is possible to add text content to your video at a given play time. Let's add a text, "Cool Video", at the down-middle part of our video. The text should be displayed after 2 seconds and should be removed after 5 seconds:
Cloudinary can deliver videos optimally using a smart technique know as Adaptive Bitrate Streaming. This is a video delivery technique that adjusts the quality of a video stream in real time according to detected bandwidth and CPU capacity. With adaptive bitrate streaming, videos start quicker, with fewer buffering interruptions, and is delivered at the best possible quality for the current device and network connection, to maximize user experience.
An eager transformation is initiated during upload. This transformation is an array that takes a streaming profile configuration. The MLB_Vid.mp4 video is encoded into HLS format using a Full HD streaming profile.
Eliminate stretching or shrinking videos when adapting them for different screen dimensions. Based on the resizing and cropping transformation feature we have seen, you can perform automatic resizing and cropping to fit the graphic design and layout on any device, at any resolution, using Cloudinary’s powerful URL-based transformations.
Now is the time to step back and reflect. Compare what you could afford to do with your videos manually and how long it would take, to what you can accomplish with Cloudinary in your arsenal. With Cloudinary, you’ll improve your productivity with its robust features and be able to cater to whatever media management needs you might have. Get started by signing up if you haven't already!
Consumers expect modern websites to be mainly visual. But, the more compelling and complex the related media is, the more data is involved, compounding the site’s weight. In today’s content-craving world, delivering unoptimized media can cost you because it leads to sluggish page loads, resulting in visitors abandoning your site in search of a faster alternative. In fact, a page load that takes more than three seconds can cause as many as 40% of your visitors to bounce. Given this competitive, digital-first environment, you can’t afford to lose page views, for time is of the essence.
A webhook is a communication medium for sending notifications from one platform to another about events that occurred. In place are user-defined HTTP callbacks that are triggered by specific events. When a triggered event takes place on the source site, the webhook listens to the event, collects the data, and sends it to the URL you specified in the form of an HTTP request.
Cloudinary’s Product Gallery widget, which launched in 2019, has enabled many brands to effectively and efficiently showcase their products in a sleek and captivating manner, saving countless hours of development time and accelerating release cycles. By adding Cloudinary’s Product Gallery widget with its customizable UI to their product page, retailers reap numerous benefits, often turning visitors into customers in short order.
Most business buyers prefer to research purchase options online, as do many shoppers. No wonder online retail sales in the U.S. rose by 32.4% in 2020—an impressive gain of $105 billion.
For B2B and B2C businesses, text-heavy websites are no longer adequate in attracting shoppers. Instead, engaging visual media—spin images, videos, 3D models, augmented reality—are becoming a must for conveying eye-catching details and differentiators about products or services.
The past decade has seen massive improvements in software tools that facilitate coding. In fact, a campaign is currently underway to promote building software with no-code tools like Bubble, which promise to be a boon for those not acquainted with the rudiments of programming.
User-generated content (UGC) is a powerful marketing tool. Not only does video complement marketing efforts for e-commerce by enabling customers to explore products in greater detail, but UGC also adds an element of trust. As a bonus, user-generated video is an exceptional opportunity for e-businesses to attract website traffic without their marketing team having to create promotional videos from scratch. User-generated content drives conversions and brand loyalty as a direct result of authentic interaction.