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.
Best Video Format for Screen Recording
best video format for web
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. 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:
.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.
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:
- Supported video formats on Cloudinary
- ABR streaming on Cloudinary
- HTTP live streaming
- Adaptive HLS streaming using the HTML5 video tag
Best resolution for recording video
It almost goes without saying… These days EVERYONE, should be creating their videos in High Definition. That means NO LESS than 720p; ideally at least 1080p.
If you don’t have a camera that can support 1080p, then go as close as you can. Of course, there ARE some cases where it may make more sense to go 720p, like often when shooting on a smartphone. Why? Well, front-facing lenses on a lot of phones right now only support upto 720p. Sure, rear-facing cameras are generally 1080p+ BUT in most circumstances the benefits of being able to see the screen while filming and actively frame your shot outweigh the downside of losing the extra resolution. So, in cases like this 720p is a perfectly reasonable choice.
What if your camera supports 2k or 4k? Should you go that high? Or if it doesn’t, do you need an upgrade? Well, there’s a few factors to consider first, and most of them relate to editing…
First – The higher the resolution, the bigger the file size. 2k is bigger than 1080p, and 4k is much bigger again. If you don’t have the storage space to handle all the 2k or 4k footage, then stick with 1080p.
Second, the higher the resolution the more intensive editing is for your computer and the more processing power you’ll need. You WILL notice pretty significant performance decreases editing 4k footage vs. 1080p if you don’t have a high-powered computer.
There is ONE exception here: Final Cut Pro on Mac. It’s absolutely awesome at chewing through 4k footage. It runs so efficiently, people have run tests editing 4k footage on the new 12″ macbook which is very low powered… Pretty awesome. But if you’re using Premiere or something else on a low-powered machine, forget it.
So let’s assume you have the storage space AND enough power to edit… Should you use 2k or 4k? And what are the advantages?
Well, the immediate benefit of 4k is that it is higher quality. More pixels on-screen, and a crisper image… IF the person viewing the video has a 4k display to make full use of it. There’s a growing number of these displays and TV’s out there for sure, but I wouldn’t say they’ve become the standard just yet.
One of the biggest advantages of shooting in 4k is that you can completely reframe your shot in editing, and still output a final full 1080p result. This means you can zoom in on your footage to create jump cuts, or reframe your shot in editing WITHOUT losing any quality. If that’s important to you, then the higher the resolution the better: i.e. 4k provides more flexibility than 2k. The higher resolution means more flexibility in editing if your output is at a lower resolution than your footage.
So, you should be aiming for a minimum of 1080p where possible. If you’re looking for more flexibility in your editing, then try 2k or 4k and output in 1080p. If you want the MAXIMUM quality possible, then of course – go for the highest resolution you can, but for most everyday content videos 1080p or even 720p are enough.
Best video format for youtube
MP4 is the best video format for YouTube with AAC-LC audio codec and H.264 video codec, and a standard aspect ratio of 16:9. This produces a high-quality video at a smaller file size. YouTube also recommends uploading videos in a format as close as possible to the original, especially if it’s HD or a higher resolution.
While MP4 is the recommended file format, here’s a look at other video formats compatible with YouTube. Note that these are basically a mix of codecs and/ or containers that make up a video file.
Why do you need to pay attention to your YouTube video format?
– Each file format is processed differently by YouTube and this might affect the playback of your video. Your video might not display properly, and the viewing quality may suffer.
– Certain YouTube video upload formats are such that they process a single video and produce a larger file size. This affects your video quality when shared on other social media portals.
– Keeping these points in mind, as YouTube is all about the video viewing experience, it’s essential to select the most advantageous YouTube video upload format.
YouTube’s recommended video upload settings
Whenever you upload videos to YouTube, you have the option to select your video encoding settings. Let’s understand what this means. Historically, for a video recorded at 30 frames per second (fps or frame rate), you had 30 photos per second of footage. That’s 1,800 images per minute of video. As a result, video file sizes were massive. Uploading these digitally would take a long time and require a whole lot of space on servers.
The only sensible solution was to compress these videos, but the quality was lost through this process. Engineers then developed video encoding which provided a way to compress these files without compromising the quality. Video encoding is basically the digital method used to compress files so that they are not saved as individual images but as fluid videos. Video encoding happens automatically when we are recording videos or during the editing process, using tools called codecs and containers.
Conclusion
Capturing video can be a great way to promote your products and create videos that capture the attention of viewers. However, it’s important to use a precise timing and use good lighting in order to create an attractive video. Additionally, you should use a creative strategy in order to make sure that your viewers are engaged and interested in the product they are watching. By exporting your video in a variety of export formats and destinations, you will have the opportunity to reach a wide audience and boost sales.