Cloudinary Blog

Simplifying the delivery of video content

As video use and requirements grow - so do the challenges
Video is an increasingly important component for websites and apps, as consumer demand for and consumption of video content is growing. It’s not only for wired devices, though. More and more, consumers are accessing video where they want it, when they want it, on whatever device that happens to be nearby.
 
While this may be convenient for consumers, the varying screen sizes, resolutions and bandwidth limitations result in some significant challenges for developers, who want to ensure an optimal experience for their viewers. As a result, developers will need to rethink their approach to video transcoding, so it can work on a variety of screens, while ensuring an optimal user experience, reducing costs and minimizing bandwidth demands. 

The challenge is real

Case in point: by 2019, consumer Internet video traffic will account for 80 percent of all consumer Internet traffic, according to Cisco’s Visual Networking Index. And, increasingly, consumers are using their mobile devices to view videos. In the IAB Mobile Video Consumption survey, 35 percent of viewers said they are watching more video on their smartphones compared to last year, with many of them noting that they’ll spend five minutes or more watching videos from their mobile device. Of those using smartphones for video, 68 percent indicated that they watch on iOS devices. The iPad accounts for even more video consumption, comprising 86 percent of tablet viewing, followed by the Samsung Galaxy Tablet, Kindle Fire and Microsoft Surface in the single digits.
 
Before the proliferation of devices from which consumers could access video content, it was relatively simple to pre-transcode video. That, however, is now impossible, so Web and app developers are moving toward live transcoding to ensure users have the right format of video for the device they’re using. 
 
But live transcoding is a time-consuming delicate process, and if it’s not done right, there will be a noticeable loss in quality. If you’re doing a lot of in-house transcoding, you’ll likely have to purchase expensive software that is complex to use, requiring you to manage and configure the settings yourself, which may not be part of the average developer’s expertise. You’ll also have to consider how to reduce the file size to ensure that it’s easier to distribute over mobile networks and less expensive for consumers who often don’t have unlimited bandwidth plans, and have both standard definition and high definition versions available so that streaming sessions can adapt to the bandwidth available. And then you’ll have to worry about storage. Having videos in a variety of formats to meet all users’ needs requires a lot of capacity and requires servers to be provisioned in advance, another task that is typically outside of the scope and expertise of most Web designers.
 
To address these challenges, developers are moving toward adaptive bitrate streaming and HTTP Live Streaming (HLS). While in the past most video streaming technologies utilized streaming protocols such as RTP with RTSP, today's adaptive streaming technologies are almost exclusively based on HTTP and designed to work efficiently over large distributed HTTP networks, such as the Internet. Adaptive bitrate streaming works by detecting a user's bandwidth and CPU capacity in real time and adjusting the quality of a video stream accordingly. It requires the use of an encoder that can encode a single source video at multiple bit rates, which results in very little buffering, a fast start time and a good user experience. HLS is an HTTP-based media streaming communications protocol implemented by Apple. It is similar to MPEG-DASH because it breaks the overall stream into a sequence of small HTTP-based file downloads, that combine in an unbounded transport stream. As the stream is played, alternate streams containing the same material encoded at a variety of data rates may be selected, allowing the streaming session to adapt to the available data rate.

Some pointers

When addressing these complex issues, there are a number of key features to keep in mind, allowing users to upload videos, transcode and modify them to ensure an optimal user experience and apply fine-grained control over codecs and bitrate.
 
  • Choosing the correct format – the most fitting format (MP4, OGV, FLV, WebM) must be accurately specified for optimal viewing in various resolutions and aspect ratios and delivery over any type of browser, laptop or mobile device.
  • Responsive Design – your video content must be optimized for delivering on different screen sizes or fitting into a graphic design by dynamically resizing and cropping video on the fly. Also, by resizing and cropping on the fly, you can ensure that the video is not stretched or shrunk when adapting to different devices.
  • Video Setting Adjustments – adjust properties of video files, such as quality, bitrate, video and codecs, on the fly to ensure optimal viewing for all of your users. Adjusting the quality of videos can achieve significant bandwidth savings. There are a number of Web codecs, including HEVC/H.265, H.264, MPEG-4, Theora, VP9, VP8, VP6 and WMV.

Cloudinary can of course assist in doing these easily and on-the-fly, alongside many other features, such as creating thumbnails from videos and applying various transformations and manipulations on the video and audio controls to enhance your visitors’ viewing experiences.

You can read more about Cloudinary's video management solution here, and specifically about transcoding, quality & bit rate control, video codec settings and more here.  

 

Video has become an integral part of virtually every website and app, and will grow in importance as consumers seek out more video content. If you’re still pre-transcoding video or working with an in-house transcoding system, now is the time to rethink your approach of how you upload, transform manage and store videos so you can deliver an optimal experience to all of your users.

Recent Blog Posts

Build a WhatsApp Clone with Automatic Image Optimization

In the previous post, we showed how to upload images to a Cloudinary server. In this part, we will play with some of the features we see on the WhatsApp technology. After you or your users have uploaded image assets to Cloudinary, you can deliver them via dynamic URLs. You can include instructions in your dynamic URLs that tell Cloudinary to manipulate your assets using a set of transformation parameters. All image manipulations and image optimizations are performed automatically in the cloud and your transformed assets are automatically optimized before they are routed through a fast CDN to the end user for an optimal user experience. For example, you can resize and crop, add overlays, blur or pixelate faces, apply a variety of special effects and filters, and apply settings to optimize your images and to deliver them responsively.

Read more
With automatic video subtitles, silence speaks volumes

The last time you scrolled through the feed on your favorite social site, chances are that some videos caught your attention, and chances are, they were playing silently.

On the other hand, what was your reaction the last time you opened a web page and a video unexpectedly began playing with sound? If you are anything like me, the first thing you did was to quickly hunt for the fastest way to pause the video, mute the sound, or close the page entirely, especially if you were in a public place at the time.

Read more
Impressed by WhatsApp Tech? Build WhatsApp Clone with Media Upload

With more than one billion people using WhatsApp, the platform is becoming a go-to for reliable and secure instant messaging. Having so many users means that data transfer processes must be optimized and scalable across all platforms. WhatsApp is touted for its ability to achieve significant media quality preservation when traversing the network from sender to receiver, and this is no easy feat to achieve.

Read more
New Google-powered add-on for auto video categories and tags

Due to significant growth of the web and improvements in network bandwidth, video is now a major source of information and entertainment shared over the internet. As a developer or asset manager, making corporate videos available for viewing, not to mention user-uploaded videos, means you also need a way to categorize them according to their content and make your video library searchable. Most systems end up organizing their video by metadata like the filename, or with user-generated tags (e.g., youtube). This sort of indexing method is subjective, inconsistent, time-consuming, incomplete and superficial.

Read more

iOS Developer Camp: The Dog House

By Shantini Vyas
iOS Developer Camp: The Dog House

Confession: I’m kind of addicted to hackathons. Ever since graduating from Coding Dojo earlier this year, I’ve been on the hunt for new places to expand my skills and meet new people in the tech space. iOS Developer Camp’s 10th Anniversary event bowled me over. Initially, because of its length. 48 hours? Yeesh. I had no idea that those 48 hours would change my life. But let’s first get a little backstory on my favorite topic: dogs.

Read more