Best Video Codec for HTML5 Live Video Streaming

Getting started with live streaming is easier than ever. However, setting up advanced, high-quality streams does require a small amount of technical knowledge. Here at DaCast, one of our goals for this blog is to educate readers about live streaming technology. This piece will discuss the best video codec to use for HTML5 live streaming.

Codecs play a key role in all digital video. They can also be one of the more confusing topics. Even many people who use video regularly don’t truly understand codecs. Plus, codecs can be confused with other related subjects like container formats, streaming protocol, and more.

Let’s explore this topic, starting with our recommendation for the best video codec.

H.264 is the best video codec for live streaming

Let’s cut to the chase. Which is the best video codec you should use for live video streaming? We recommend using H.264, the safest bet to deliver your html5 live stream at this time.

H.264 was originally developed in the early-2000s, and has been updated continuously. It has been the de-facto standard for internet video delivery for quite some time. This continues today.

Best Video Codec for HTML5 Live Video Streaming - h.264Any device built in the last decade probably supports H.264 to some degree. This is the critical feature for H.264. Any video encoded and distributed with H.264 can be watched on most devices. This includes laptops, desktops, smartphones, tablets, smart TVs, gaming consoles, and other devices.

Another benefit of H.264 is relatively small file size. Compared to the previous generation of video codecs, such as H.263 and MPEG-2, file sizes are about 50 percent smaller.

H.264 profiles and settings

The H.264 codec has gone through a number of iterations and updates. It’s not a monolithic standard. In fact, H.264 could best be understood as a “family” of related standards. These are captured in the H.264 “profiles” that are available in any encoder.

There are at least 20 profiles available for H.264. However, most of those are very specialized. Most encoding software only uses a small number of these profiles. These more commonly-used profiles are:

  • Baseline
  • Main
  • High

The baseline profile uses only the older, most widely-supported compression features of H.264. This means that video compressed using the H.264 codec, baseline profile will be compatible with almost all devices. This includes older and low-power devices. However, the tradeoff is that file sizes will be larger.

The main profile applies some additional encoding features of the H.264 family. This requires more processing power and memory on the decoding side. Old or low-powered devices (such as tablets or smartphones made more than 5-8 years ago) may not be able to decode this video. However, file sizes are smaller.

The high profile is the most modern implementation of H.264. It includes more encoding features that enable smaller file sizes. However, this requires more processing power and memory from the viewer’s devices. Today, device power has become less of an issue. The high profile is supported on all modern smartphones, tablets, computers, set-top boxes, gaming consoles, and so on. However, using the high profile may prevent users with very old devices from accessing content.

In short: use the baseline profile if you’re targeting users on very old, underpowered devices. If your viewers tend to use modern devices, the high or main profile should be fine to use.

 

Other H.264 settings

Any video stream or file can be encoded using a wide variety of options. Here are some of the settings that need to be determined for any stream.

Best Video Codec for HTML5 Live Video Streaming - compressionResolution – This refers to the size of the video, measured in pixels. A standard high definition video frame, for example, is 1920 pixels wide and 1080 pixels in height.

Frame rate – Video is made up of a series of still images. Frame rate is simply the number of pictures per second of video. Thirty frames-per-second (fps) is the most common setting.

Bit rate – Bit rate refers to the amount of data being included in a video, measured in kilobytes or megabytes per second. For example, a video may be encoded at 500 kbps, or at 1000 kbps (equivalent to 1 mbps). Bit rate has a direct relationship to quality. All else being equal, a higher bit rate video will be higher in quality than a lower bit rate video.

Audio codec – Another setting for any video is the audio codec being used. If H.264 is the most common video codec, AAC is the best audio codec. If in doubt, use AAC. MP3 is another common audio codec.

Audio bit rate – Like video bit rate, audio bit rate influences quality. Generally, audio bit rates are kept between 32 kbps and 128 kbps. Thirty two is appropriate for voice-only videos. For music or higher-quality content, 128 kbps—CD quality—is recommended.

Key frames – We recommend setting key frame interval to 2 seconds.

Codec settings and bandwidth

The video settings you select have a major influence on the quality of your video. They also influence file sizes and bandwidth requirements. In general, higher-quality and higher-resolution video requires more bandwidth.

As we mentioned above, bit rate, H.264 profile, and other settings can influence the amount of bandwidth a given video requires. Understanding the amount of bandwidth you need for live streaming is a key factor in your success. If you’re streaming a live event and are not sure about the amount of bandwidth you may need, contact DaCast or use our calculator.

The updated codec: H.265

Video codecs are always evolving. H.264 is an older protocol, and it will soon be replaced. The next version of H.264 is called H.265, or sometimes HEVC. This codec will provide about twice the video quality as H.264 at a given bit rate. That’s expected to help propel ultra-high resolution 4K video to the mainstream. However, this high performance will require additional processing power.

H.265 is still in development, and isn’t very widely supported. Chances are, most devices you and your audience own aren’t capable of playing back H.265 video. We at DaCast are watching the evolution of H.265 closely, and recommend you do the same.

VP9

Of course, the H.26x family of codecs aren’t the only video codecs that exist. One alternative is VP9, which is developed by Google and is free and open source. VP9 is a powerful codec that is used by YouTube. It’s also been tested by Netflix and found to be highly effective for delivering 4K video content.

However, VP9 is at this time not widely supported in the live streaming world. Therefore, we can’t recommend using it for streaming.

 

Other next-gen codecs

There are a variety of other next-generation video codecs being developed. Perhaps the most promising of these is AO Media Video 1 (AV1). Developed by a consortium of tech companies including Mozilla, Amazon, Netflix, and Google, AV1 promises even higher compression performance than H.265. AV1 is a completely open-source and royalty-free codec, and will likely be adopted as a web standard in the future.

How codecs work

For those who need an introduction, let’s discuss briefly how codecs work. Raw video is composed of a series of still images played one after another. However, at thirty frames per second, the amount of storage space necessary for digital video balloons very quickly.

Best Video Codec for HTML5 Live Video Streaming - videoCodecs exist to deal with this problem. At their core, a codec is a video compression method. They “throw out” certain data to make video files smaller in size, while trying to retain as much quality as possible.

Modern video codecs use many different mathematical methods to reduce file size. These methods include detecting when certain areas of the video don’t change from frame to frame, allowing you to toss out certain data. Other methods look at movement and use mathematical prediction to reduce the need to store every pixel.

Some of these methods are called chroma subsampling, quantization, and spatial / temporal downsampling.

Conclusion

Video codecs are a critical part of any digital video effort. We often get questions about codecs. Hopefully this article has helped you understand what codecs are, how they work, and which are the best video codecs for HTML5 live streaming.

Thanks for reading! We love to hear from our readers, so if you have any questions or experiences to share, let us know in the comments! For regular tips on live streaming, feel free to join our LinkedIn group.

DaCast helps a wide range of businesses get started with live streaming. If you’d like to try out our services, you can check out how our live streaming platform could boost your business with our 30-day free trial (no credit card required). We’d love to help you meet your streaming goals today!

video broadcast software

Thanks for reading, and good luck with your broadcasts!

By Max Wilbert.

Leave a Reply

Your email address will not be published. Required fields are marked *