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 2024: their pros and cons, performance, potential, accessibility, etc. Also elaborated is how to deliver videos over the internet with Cloudinary’s HTML5 Video Player. This is part of an extensive series of guides about Front-End Development.
In this article:
- Terminology
- Web-Video Format Types
- Progressive Download Formats
- Adaptive Bitrate Formats
- Delivery of Web-Video Formats on Cloudinary
Terminology
Below are the definitions of the related terminology. For a video called, for example, meme.mp4:
.mp4is the name of the container, which contains all the files (video stream, audio stream, and metadata) required to playmeme.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.
MP4
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.
MOV Format
The MOV format, designed by Apple, is tailored to support the QuickTime player. It can encompass videos, audio, subtitles, and other media types. MOV files are playable on Mac, Windows, and most USB-compatible televisions. They are also recognized as the professional standard for video editing.
Pros
- MOV can contain videos, audio, subtitles, and other media types, making it a comprehensive format.
- MOV files are playable on a wide range of devices, including Apple devices, Windows programs, and most USB-compatible televisions.
- Recognized as the professional standard for video editing, making it a preferred choice for professionals in the industry.
Cons
- MOV files can be larger than other formats, which might not be ideal for web streaming or limited storage.
- While MOV is supported on many platforms, there are some devices and platforms where it might not be the default or most optimized format.
- Some MOV files use codecs that may not be readily available on all devices, requiring additional downloads or software.
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:
- Supported video formats on Cloudinary
- ABR streaming on Cloudinary
- HTTP live streaming
- 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.
See Additional Guides on Key Front-End Development Topics
Together with our content partners, we have authored in-depth guides on several other topics that can also be useful as you explore the world of front-end development.
Responsive Images
Authored by Cloudinary
- 5 Techniques and Examples for Creating Responsive Images in CSS
- 3 Ways to Generate Responsive Image Backgrounds
- Responsive Images in HTML: A Practical Guide
eCommerce Platform
Authored by Cloudinary
- Choose the Right E-commerce Platform
- Integrate With E-commerce Platforms and CMS Early On
- Move Toward Headless E-commerce
Product Led Growth
Authored by Frontegg
![Kimberly Matenchuk](data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800"><rect width="100%" height="100%"><animate attributeName="fill" values="rgba(153,153,153,0.5);rgba(153,153,153,0.1);rgba(153,153,153,0.5)" dur="2s" repeatCount="indefinite" /></rect></svg>)