Advertisement
  1. Web Design
  2. Azure
Webdesign

HTML5 Video: Understanding Compression and DRM

by
Difficulty:IntermediateLength:ShortLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Live with AES process flow chart

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 Services 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 / 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 Real Time Messaging Protocol (RTMP).

RTMP 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 Senior Program Manager 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 a single file. Moreover, it can be played on nearly all devices, leaving other formats like AVI, WMV and 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 at 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 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 to 2 times more efficient than MPEG-4 encoding.

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

  1. Smaller file size
  2. Better video quality for real time playback
MP4 as a container with H264 subtitles and images inside

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.

Xfinity on Demand screenshot

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.

DRM error on Netflix

Let’s look at a big provider like Comcast, which owns the Xfinity on-demand catalog. If I click on a video without logging in to 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.

VEEP screen on Xfinity when not logged in

When I log in to 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.

HBO is not part of your subscriptions

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.

Compression Container Transport

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 JavaScript:

This article is part of the web dev tech series from Microsoft. We’re excited to share Microsoft Edge and the new EdgeHTML rendering engine with you. Get free virtual machines or test remotely on your Mac, iOS, Android, or Windows device @ http://dev.modern.ie/.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.