Originally published at: http://www.sitepoint.com/getting-started-html5-video/
This article is part of a web dev tech series from Microsoft. Thank you for supporting the partners who make SitePoint possible.
Ever want to create your own Twitch.tv-like app for livestreaming your workhsl? How about your own YouTube-esque program for playing back your previously recorded video? You might have used Flash, Java, or Silverlight for rich media in the past but with Chrome 42 announcing that that those plug-ins are no longer supported, now is as good a time to go HTML5 as ever.
Before I worked at Microsoft, I was a senior 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.
This is the first of a series of articles about using Azure Media Services to create and consume HTML5 video. In this tutorial, Iāll explain how to use this cloud media solution to get set-up and start experimenting with delivering live or on demand video.
A Primer on Video Formats
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 streaming 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 [of] 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.
Progressive MP4
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.
HLS
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.
Smooth Streaming
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.
Continue reading this article on SitePoint