Video Formats Is There a Best Video File Format? 10 Top Video Formats 5 Ways to Change Videos to Any Format Lossless Video Format: 7 Popular Formats and How to Choose All You Need To Know About MP4 To MOV Conversion Choosing Your Codec: AVC (H.264) vs. HEVC (H.265) Decoding the Future: x264 vs. x265 Mastering HEVC: The Future-Ready Video Compression Standard Pixel Perfect: H.264 VS H.265 Explained FFmpeg: Features, Use Cases, and Pros/Cons You Should Know VP9 vs. H.264 What Are Container File Formats (Media Containers)? VP8 vs VP9: 8 Key Differences and How to Choose What Is the M4A Format? | M4A vs. MP3 vs. WAV What Is MPEG-DASH? And MPEG-DASH vs. HLS What Are Video Subtitles? Common Formats and Best Practices H.264 Video Encoding: How It Works, Benefits, and 9 Best Practices QuickTime File Format (MOV): Apple’s MPEG-4 Predecessor MP4 Format (MPEG-4 Part 14): How It Works, Pros and Cons MKV Format: How It Works and How It Compares to MP4 AVI Format: Should You Still Use AVI? Windows Media Video (WMV) Format: What You Should Know HD Format: History of HD Video and 8 Formats You Should Know M4V Format: How It Works and MP4 vs. MPV FLV Format: Security Concerns and 5 Reasons to Switch to MP4 Top Six Web-Video Formats of 2024 What Is Video Transcoding? Video Frame Rates Explained Along With Tips for Picking the Right FPS A Primer on Video Codecs Open-Source and Royalty-Free AV1 Compresses Video Efficiently and Effectively Convert Video Formats: Six Essential Features of Video-Conversion Tools OGG Format: An In-Depth Look WebM Format: Basic Facts, Compatibility, and WebM vs. MP4

Top Six Web-Video Formats of 2024

Best video format for website header image

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.

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.

Best video format for website supporting image

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.

“Video

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:

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

eCommerce Platform

Authored by Cloudinary

Product Led Growth

Authored by Frontegg

QUICK TIPS
Kimberly Matenchuk
Cloudinary Logo Kimberly Matenchuk

In my experience, here are tips that can help you optimize the use of web-video formats for 2024:

  1. Prioritize compatibility with MP4 for universal access MP4 remains the most universally compatible format, making it ideal for ensuring your videos play seamlessly across various devices and platforms. This is especially important for reaching a broad audience without requiring additional plugins or software.
  2. Utilize WebM for smaller file sizes and efficient streaming When bandwidth is a concern or when you need to optimize for fast loading times, WebM is an excellent choice. Its ability to maintain high resolution with reduced file size makes it a go-to format for web-based video content.
  3. Leverage LL-HLS for low-latency live streaming For live events or real-time broadcasts, LL-HLS offers the best balance of low latency and high video quality. This format is particularly beneficial for live sports, webinars, and other real-time content where viewer experience is critical.
  4. Consider MOV for professional video editing and high-quality outputs MOV is favored in professional video editing environments due to its support for multiple media types and high-quality video. If your workflow involves heavy editing, using MOV can ensure you retain the highest video quality throughout the process.
  5. Adopt MPEG-DASH for adaptive streaming across diverse networks MPEG-DASH’s adaptability to varying network conditions makes it a powerful format for delivering consistent video quality. It’s especially effective for users with fluctuating internet speeds, ensuring they get the best possible viewing experience without buffering.
  6. Transition away from legacy formats like RTMP and FLV With the decline of Adobe Flash and the rise of more efficient formats, it’s time to phase out older formats like RTMP and FLV. These formats are less secure, less compatible, and less efficient than modern alternatives, so switching to newer formats like MP4 or WebM is advisable.
  7. Experiment with VP9 codec in WebM for cutting-edge compression If you’re looking to push the boundaries of video compression without sacrificing quality, consider using the VP9 codec within the WebM format. This codec offers superior compression efficiency, making it ideal for high-quality video at lower bitrates.
  8. Regularly update your delivery methods for optimal performance As video formats and delivery technologies continue to evolve, it’s essential to keep your content delivery methods up to date. Tools like Cloudinary’s HTML5 Video Player offer advanced features like ABR streaming and on-the-fly video transformations, ensuring that your video delivery is always optimized.

By following these tips, you can ensure that your web videos are not only high-quality but also accessible, efficient, and future-proof.

Last updated: Aug 31, 2024