HTML5 Video: Understanding Compression and DRM

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

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

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

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

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

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

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