Cloudinary Blog

Top Five Web-Video Formats of 2021

The Five Most Popular Web-Video Formats and Streaming Protocols

Over the past 15 years, the video industry has undergone a significant change in video formats on the web. In particular, in the early 2010s, the 3GP format, which the 3rd Generation Partnership Project (3GPP) created for 3G-enabled mobile devices, went nearly extinct. The advancement of mobile devices and cellular networks has brought about the need for pioneers to build better formats for a faster user experience.

MPEG-4 Part 14 (MP4) took over 3GP/Flash as the default format for web videos. Also, the advent of adaptive bitrate technology has drastically changed the way in which we interact with video content online.

This post describes the top five web-video formats of 2021: their pros and cons, performance, potential, accessibility, etc. Also elaborated is how to deliver videos over the internet with Cloudinary’s HTML5 Video Player.

Terminology

Below are the definitions of the related terminology. For a video called, for example, meme.mp4:

  • .mp4 is the name of the container, which contains all the files (video stream, audio stream, and metadata) required to play meme.mp4.
  • The video stream is what you see when you play the video.
  • The audio stream is the sound that accompanies the video.
  • The metadata (data about data) includes bitrate, resolution, codec, and all the other information about the video.
  • Video format sizes come in different dimensions along with standards for different formats. Examples are 1280 x 720 and 1920 x 1080. With the popularity of mobile videos, the aspect ratio of video files is also considered.

Web-Video Format Types

A web-video format can be a progressive or an adaptive bitrate (ABR) format, depending on how the video file is delivered.

Progressive Download Formats

A web-video format is considered a “progressive download” if a single resolution of the video is encoded and subsequently streamed or delivered to the user regardless of internet bandwidth. With progressively downloaded videos, playback starts immediately, and download is continuous throughout the duration of the video.

Since video files are delivered over the internet to video players with varying bandwidths, progressive download formats run the risk of buffering on slower connections.

MPEG-4 Part 14

The QuickTime File Format (QTFF) inspired the creation of MPEG-4 Part 14 (MP4), which adopts H.264, the most widely-supported video codec for the web. Because of its high bitrate, H.264 can compress video files with no resolution loss during delivery.

Videos delivered with MP4 have a file extension of .mp4, which depicts the container. MP4 is a supported HTML5 video format.

Pros

  • MP4 is compatible with numerous players and devices. Video-on-demand platforms like YouTube encourage users to upload content in MP4 format.
  • MP4 maintains high video quality even after compression.

Cons

MP4 is not easily editable, hence not recommended for movies.

WebM Video Format

A team of developers sponsored by Google created the WebM video format for HTML5 with the specific goal of ensuring that it works well on websites. When used along with HTML5, WebM creates videos of small file sizes, greatly simplifying video streaming. WebM encodes and decodes videos with the VP9 codec.

Videos delivered with WebM have a file extension of .webm, which depicts the container.

Pros

  • WebM reduces the video file size yet maintains a high resolution.
  • You can easily edit WebM with video-editing tools.

Cons

  • WebM has declined in popularity on many video platforms due to the demand for formats with a higher bitrate.
  • Compared to MP4, fewer media players support WebM. In some cases, adopting WebM requires installation of components or plug-ins.

Adobe RTMP Flash

Adobe’s Real-Time Streaming Protocol (RTMP) transports video data between a dedicated streaming server and the Adobe Flash Player. RTMP maintains a constant connection between the player client and server, enabling the protocol to act as a pipe and rapidly delivering video data to the viewer. In recent times, ABR streaming has edged out RTMP, and Adobe Flash is considered “dead.”

Videos delivered with RTMP have a file extension of .flv, which stands for Flash video and depicts the container.

Nowadays, many content producers still use RTMP encoders. That’s why that format makes this list even though it has fallen out of favor for last-mile delivery.

Pros

  • The latency of RTMP is low, about five seconds only.
  • Streaming with RTMP requires no buffering.

Cons

  • RTMP is not widely supported and works on Adobe Flash Player, Adobe AIR, and RTMP-compatible players only.
  • The quality of RTMP’s streaming experience is not guaranteed.
  • RTMP is not scalable.

Adaptive Bitrate Formats

Designed to work efficiently over the internet with varying video player bandwidths, ABR formats are HTTP-based, media-streaming communications protocols. They are exciting alternatives for progressive download formats. ABR formats are encoded for various resolutions that correspond to bitrates.

Low-Latency Apple HLS (LL-HLS)

LL-HLS is the low-latency version of Apple's HTTP Live Streaming (HLS). Recently, Apple rolled out HLS native support for numerous platforms (Android, Linux, Microsoft, etc.), which means that Apple’s 1.4 billion active devices worldwide can now use HLS, which in turn rules the digital video landscape. For one thing, the protocol supports ABR streaming, which is key to viewer experience.

Videos delivered with LL-HLS have a file extension of .m3u8, which depicts the container. Its streaming profile defines its default codec. The LL-HLS design delivers the same simplicity, scalability, and quality as HLS while significantly shrinking the latency.

Pros

  • LL-HLS has backward compatibility. Any players that are yet optimized for LL-HLS can fall back to the standard (higher-latency) HLS behavior.
  • LL-HLS delivers high video quality due to its capabilities for ABR streaming.
  • LL-HLS is the most cost-effective way of delivering videos over HTTP.

Cons

LL-HLS is not as scalable as some people believe, as demonstrated in this video: Scaling Low-Latency HLS: Harder Than You Think by Wowza Media Systems.

MPEG-DASH

Developed by the Moving Pictures Expert Group (MPEG), MPEG-Dynamic Adaptive Streaming Over HTTP (DASH) is an adaptive HTTP-based protocol for streaming media.

Videos delivered in MPEG-DASH have a file extension of .mpd, which depicts the container. Its streaming profile defines its default codec.

The MPEG-DASH streaming process works as follows:

  1. Segmentation and encoding. The web server divides the video file into segments of a few seconds long and then encodes the segments.
  2. Delivery. When the viewer starts streaming, the web server sends the encoded segments to the viewer’s device.
  3. Decoding and playback. When the viewer's device receives the streamed data, the video player decodes the data and plays back the video.

Pros

  • MPEG-DASH is encoder and codec agnostic.
  • MPEG-DASH enjoys broad support from almost all the popular smart devices, operating systems, and browsers.
  • MPEG-DASH is recognized as a most efficient web-video delivery standard vis-a-vis viewers' bandwidth.

Cons

MPEG-DASH does not work on Apple’s Safari browser. The only way viewers can access web videos of this format on an Apple device is on other browsers.

In 2011, streamingmedia.com wrote: “MPEG-DASH is a standard for adaptive streaming over HTTP that can replace existing proprietary technologies.” MPEG-DASH has done that. To learn more about that technology, read the article MPEG-DASH: Dynamic Adaptive Streaming Over HTTP Explained.

Delivery of Web-Video Formats on Cloudinary

The HTML <video> tag has limitations for viewing videos on webpages. However, with the Cloudinary HTML5 Video Player, not only can you deliver videos of the formats described above, you can also do the following:

  • Show a thumbnail preview of the content.
  • Specify the video source as a URL.
  • Manually select the video quality when using ABR streaming.

Note that if you use the Cloudinary HTML5 Video Player for adaptive streaming files ( m3u8 and mpd), you can deliver only those videos stored on Cloudinary.

To deliver videos with HLS or MPEG-DASH adaptive streaming on Cloudinary, follow these steps:

  1. Select a predefined streaming profile.
  2. Upload your video with an eager transformation, including the streaming profile and format you selected.
  3. Deliver the video. For details on Cloudinary’s support for web-video formats and streaming, check out these resources:
  4. Supported video formats on Cloudinary
  5. ABR streaming on Cloudinary
  6. HTTP live streaming
  7. Adaptive HLS streaming using the HTML5 video tag

Conclusion

Web-video formats have evolved by leaps and bounds over the years. With Cloudinary, you can easily create and deliver videos in one of the top five formats described in this post. Do have a try! To get started, sign up for a free Cloudinary account.

Recent Blog Posts

Overlaying Glasses Or Masks on Avatars With Vue.js and Cloudinary

Deep learning, a subset of machine learning, breaks down tasks in ways that make all kinds of machine assists possible. With deep learning, you can identify images by machine, i.e., instead of hand-coding software with specific instructions for a task, you train the machine with large amounts of data and algorithms that enable it to learn how to perform the task.

Read more
On-Demand Viewing of Live Video Presents New Opportunities

In early 2020, Cloudinary was planning its fourth annual ImageCon conference, a two-day event in the heart of San Francisco, where we’d congregate with curious digital-media minds to brainstorm best practices for media management. Instead, the COVID-19 pandemic forced the entirety of ImageCon 2020 online. As with all other events being planned, we had to overhaul the content to be communicated on video. Gratifyingly, we found the right partner—the event platform Bizzabo—to turn that into a reality.

Read more
Why the Future of E-commerce Is Live

In a previous post, I discussed how “going live” is gaining popularity across industries and verticals. What began as a way for gamers to jam together has evolved into a medium for broader entertainment and business purposes. To continue the conversation, this post unpacks the current trends of shoppable live streams to shine a light on how brands are leveraging “lives” to connect with shoppers in new ways.

Read more
An Overview of Live-Streaming Video Trends

“Let’s go live.” For decades, that’s what newscasters say as they cut to real-time footage of a colleague reporting in the field. The live-video feed adds visual interest and perspective to a story beyond what can be communicated by someone sitting behind the news desk. In the same way, live-streaming video nowadays adds context to other consumer environments. From gaming and events to shopping and social media, “going live” enhances everyday experiences, and it’s something anyone can do with relative ease.

Read more