Cloudinary Blog

Top Five Web-Video Formats of 2021

By William Imoh
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) contains the 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 plugins.

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:

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

Partner news: Cloudinary-Getty Images Integration

Supported by intelligent automation, Cloudinary serves as an effective conduit between media asset management and delivery so you can take maximum advantage of assets, compress workflows, and build and coordinate engaging and inspiring customer experiences. Through Cloudinary’s Digital Asset Management (DAM) solution, which employs the company’s innovative image and video APIs, creative and marketing teams can benefit from them, as well as from many AI-powered and automated capabilities. As a result, you can transform, optimize, and deliver media at scale on an intuitive UI.

Read more
Why Audio in Video Matters

Many content creators and consumers tend to regard video as visuals, but that’s only part of the experience. Immersive video content includes strong audio. Just like in a movie, the audio for video content comprises many components: the narrator or subjects, the background music that sets the mood and draws viewers in, sound effects, and so forth.

Read more

For Developers: the HTML <picture> Element Explained

By Amarachi Amaechi
For Developers: the HTML <picture> Element Explained

We all know the good ol', tireless <img> element, which has been a long-time go-to for inserting graphics into webpages. Time doesn’t stop, however, and neither do technological advancements. So, let’s get you up to speed with the element’s modern alternative: the <picture> element.

Read more