Microsoft Tech

HTML5 Video: Understanding Compression and DRM

David Voyles
Share

This article is part of a web dev tech series from Microsoft. Thank you for supporting the partners who make SitePoint possible.

A rough diagram of the video streaming process

In a previous tutorial, I gave a high-level overview of HTML5 video and many of the transport standards that we can use. In this tutorial—the second in a series on using Azure Media Services to create and consume HTML5 video. I’ll cover the way we can ingest our content using a video recording tool, as well as ways to encrypt or protect our video so that only viewers with permission can view it. Finally, we’ll cover the differences between a compression codec, a container, and a transport.

You’ll need to create a Media Service account in Azure before you can do anything. Here’s a tutorial on how to do that. If you don’t have an Azure account, you can sign up for a 30 day trial ($200 worth), or reach out to me about receiving a BizSpark account to get $150 per month per developer on your team, for three years.

Recent Updates

Below is a list of recent updates to Microsoft’s Media Services offering.

  • Live encoding

    • Can be combined with dynamic packaging, dynamic encryption, sub-clipping, dynamic manifest manipulation, ad-marker insertion, and seamless live to on-demand capabilities

  • Azure Media Player

    • Automatic platform detection and playback

      • Picks the best format for a browser / device.

    • Unified HTML5 and JS APIs

    • Playback for protected content

      • AES & Play Ready

    • Video player debugging

      • Logging, monitor quality of bit rate streams, diagnostic info

What is RTMP?

We need a format to ingest our content from our video recording tool, which I’ll cover in the next tutorial. To do that, we serve our content to Azure using RTMP.

Real Time Messaging Protocol was initially a proprietary protocol developed by Macromedia (now owned by Adobe) for streaming audio, video and data over the Internet between a Flash player and a server. Today however, it does not rely on Flash, as we’ll see in our example today.

I discussed several forms of streaming in my previous post, but I left out RTMP. The shortcoming to this method is that it requires specialized webservers which only deliver the frames of video content the user is currently viewing. Adaptive streaming on the other hand, does not require a special server or protocol.

This is a transport which delivers the container (.mp4, FLV) to your video player. Here’s a more in-depth lesson from the Sr. PM on the Media Services team, Cenk Dingiloglu.

RTMP is what we’ll be using to ingest our video content from our video recorder (camera on your laptop, phone, or an external device), and distribute on our channel. Viewers of our channel can than receive this video in a variety of ways, including HLS, Smooth Streaming, or MPEG-DASH.

What’s the Difference Between mpeg 4 and h.264?

A common question I hear is “what is the difference between these two?” Folks will often use the words interchangeably, but they are in fact two very different things.

.MP4 (MPEG-4): A container (and can also be a compression codec)

MP4 is undoubtedly the most popular video format at present, because it allows a combination of audio, video, subtitles and images to be held in the one single file. Moreover, it can be played on nearly all devices, leaving other formats like AVI, WMV, MOV far behind; it can be shared on many online video sites like YouTube. It is compressed with MPEG-4 video encoding and AAC audio compression.

H.264: A video compression codec

H.264, currently one of the frequently-used video codecs, is a popular compression for HD video. Since H.264 can achieve high quality video in relatively low bitrates, it’s commonly used in AVCHD camcorders, HDTV, Blu-ray, and HD DVD. MP4(.mp4) is one of the H.264 encoded video formats.

H.264 which has more advanced compression methods than the basic MPEG-4 compression. One of the advantages of H.264 is the high compression rate. It is roughly 1.5 – 2x more efficient than MPEG-4 encoding.

So the two main advantages of H.264 over MPEG-4 compression are:

  1. 1.Smaller file size
  2. 2.Better video quality for real time playback

A diagram of the structure of an mp4

Now we can see that MP4 is a file container format, while H.264 is actually a video compression codec that requires a video container to host the encoded video.

Protecting Your Content

So you’ve got your video out there on the internet, but what if you want to protect it from piracy? I know, I know, “information wants to be free”, but you’ve still got to get paid for your work.

Ever try to watch a video at an online source like Hulu, Xfinity, or Amazon and it says that you don’t have access to it and need to upgrade your subscription? Well they are doing that with an encryption standard to protect those assets.

An example of the Xfinity catalog

They can often achieve this with token passing, which is an encrypted object that illustrates to the application or video what you have access to, and this is referred to as “privileges” or DRM. I managed to stumble across a DRM error on Netflix today.

An example of a Netflix DRM error

Let’s look at a big provider like Comcast, who owns the Xfinity on-demand catalog. If I click on a video without logging into my account, it may say “HBO is not part of your subscriptions. In order to watch Veep, you need a subscription to HBO.” Just before I select the show, it makes it clear that I need a subscription to play as well, as marked by the “HBO Subscribers Only” text and the “Play” button with a key next to it.

An example of the DRM restrictions from Comcast

When I log into my account, Comcast gives me a token, which says who I am, and which services I have privileges to access. As I click on that “Play” button, that token is passed to the video service, which cracks it open, views my permissions, and declares whether or not I can view this content.

An HBO DRM error

AES vs PlayReady Encryption

AES is short for Advanced Encryption Standard and is not limited to video content, as it also works for telecommunications, finance, and government communications. This works fine with the various streaming protocols, such as HLS, Smooth Streaming, and MPEG-DASH. Here is a technical overview of the standard from Purdue.

Microsoft PlayReady is an extensive, studio approved encryption technology that protects your content from piracy, and it is supported on a wide range of the most popular devices today. Now, you can use PlayReady to protect both Video-on-demand and live streams.

Putting It All Together

Now that we understand what compression, a container, and transport protocols are, let’s put it all together.

In the next lesson, we will be recording video content and ingesting it with RTMP, we will encode it using the H.264 compression standard, store it in a .mp4 container, and stream it across from our channel using one of the various protocols listed in the previous tutorial.

An expanded diagram of streaming components

Learn More About Azure Media Services

Here are some great resources to learn more in-depth on media, Azure, and how to get set-up quickly:

Or our team’s broader learning series on HTML, CSS, and JS:

This article is part of the web dev tech series from Microsoft. We’re excited to share Project Spartan and its new rendering engine with you. Get free virtual machines or test remotely on your Mac, iOS, Android, or Windows device at modern.IE.