Ever want to create your own Twitch.tv-like app for livestreaming your work? How about your own YouTube-esque program for playing back your previously recorded video? With Azure Media Services, you can do all of this, and it is very straight forward.
Before I worked at Microsoft, I was a Sr. Engineer on the Product Development team at Comcast, where I worked on video players for a number of platforms, including the web, Xbox One, Xbox 360, and SmartGlass. It was an outstanding education in cutting edge video technology, and I’m glad that I can take my experience with me in this role and teach others much of what I learned there.
There are a number of formats to choose from, so let’s go through some of the ones you can use today. First and foremost, we should understand how adaptive steaming works, considering many of these technologies that lie ahead rely on this.
Adaptive streaming segments video into small chunks. The ‘adaptive’ part of this is the fact that video is encoded at multiple bitrates and resolutions creating chunks of multiple sizes. From there, the player can choose between different bitrates/resolutions and adapt to larger or smaller chunks automatically as network conditions change.
Scott Hanselman describes it (well, Smooth Streaming at least) well.
You kind have to see it to get it, but it’s actually clever in its simplicity. Some folks freak out when they take a, say, 200 meg video file and encode it for Smooth Streaming and the resulting directory is, say, 500 megs. They might say, it’s larger! I don’t have that kind of bandwidth! In fact, less is sent over the wire than exists on disk. The idea is that Smooth Streaming creates “steps” of bitrates. It encodes and stores your file multiple bit-rates on the disk.
This downloads and caches video on the viewer’s computer. A short period of time is required to buffer and cache the beginning of the media file before it starts playing. Once the video has been cached, subsequent viewing does not require any buffering. Using the standard HTTP protocol, progressively downloaded files are generally delivered through a content delivery network (CDN). So your video player creates a direct HTTP connection with the CDN’s (Azure) servers to retrieve the content.
The downfall to using something like this is the wasted bandwidth. The player will start video playback as soon as it has enough data to do so, but it will continue to download until it has received the whole file, regardless of how much the user watches. What happens when the viewer leaves after one minute? Wasted bandwidth.
Moreover, this does not allow the quality of the video to change mid-download, unlike the formats listed below.
HTTP Live Streaming (HLS) is owned by Apple and works is based on the idea of adaptive streaming, and usually done in 10 second chunks. Additionally, it works for both video on demand content, too. It supports both live and on-demand video.
This was announced in October of 2008 as part of Silverlight, and is a feature of Internet Information Services (IIS) Media Services, an integrated HTTP-based media delivery platform.
Smooth Streaming has all of the typical characteristics of adaptive streaming. This is delivered over HTTP, segmented into small chunks, and usually multiple bit rates are encoded so that the player can look at your network conditions to choose the best video bit rate to deliver an optimal viewing experience.
Low web-based infrastructure costs, firewall compatibility and bit rate switching are just some of the perks of adaptive streaming.
The big differentiator with DASH is that it is an international standard that is now controlled by a standards body – the Motion Picture Experts Group (MPEG) – instead of being controlled by Microsoft (Smooth Streaming) or Apple (HLS). Several companies participated in the creation and standardization efforts around MPEG DASH, including Microsoft, Apple, Netflix, Qualcomm, Ericsson, Samsung, and many more.
We see MPEG-DASH as the eventual replacement for all of the features that we have introduced and implemented in the past years with Smooth Streaming. Over time we will get out DASH support to have feature parity with Smooth, and introduce some even cooler features that are only available to us in an industry standard like DASH .
HTML5 video support
The video tag (<video>) has been in HTML5 for several years now. The W3C schools page illustrates its usage in clear terms.
Here’s how easy it is to add it to your page:
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> Fallback content: Your browser does not support the video tag. </video>
In fact, you likely use this every day. Netflix used to rely on Silverlight as their video player, but it now runs on HTML5 video. YouTube previously ran on Flash, but now much of its content is being converted to HTML5. You know those video players you see on Xbox One (YouTube, Xbox Video, Netflix, etc.)? Yup, Those are all HTML5 as well.
A note on players
There are many to choose from although the Azure Media Services Player is likely the best one to start from to get a feel for how media streaming works. It includes a number of sample videos, an a simple pull-down menu where you can select the various formats and see the tech and protection level behind each of them.
It provides support for a variety of formats out of the box, including:
- Smooth Streaming
- MPEG Dash
- Progressive MP4
Best of all, you don’t even need to create your own player or page to test any of your video content out. Simple change the URL to your content, and off you go.
You can also look at the open source video.js Framework. It is similar to the Microsoft player (below), but also offers a bevy of options to make it easy to style. They have an excellent skin designer, too. If you aren’t familiar with CSS however, I’d shy away from this.
Building your own video player
There are several player frameworks that we can use, but for simplicity’s sake, let’s use the HTML5 player provided by Microsoft. You can find the documentation on it here. There’s also a working sample, here.
Here are some of the perks of using it:
I’ll include more information about this in my next post.
Media Services Architecture
Live Media Streaming
Video on Demand (VOD)
In my next post, we’ll cover the process for creating your own video player inside of the browser. Even better, we can “wrap” that HTML5 site and player and create hybrid applications for mobile devices and Windows with a tool such as Cordova.
Following that, we’ll set up an Azure account and create our first Media Services content, which we can play back on our newly created video player. If you’re feeling anxious and would like to get started right away, you can sign up for a free Azure trial, or reach out to me about information on how to obtain a BizSpark account and receive $150 / mo in Azure credits.
- Azure Media Services 101 – Azure Fridays (Channel 9)
- Getting started with Azure Media Services (video)
- Dynamic Packaging with Azure Media Services
Here’s a full list of the tutorials in this series:
- Intro to HTML5 video
- Intro to Azure Media services, AES, and PlayReady DRM
- Live streaming HTML5 video using Azure Media Services
- Using Azure Blob Storage to store & serve your audio and video files
- Use this Azure Media Player for streaming Media Service video to all devices
- Uploading video to Azure Media Services