Getting Started with HTML5 Video

Share this article

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

HTML5vid 01 - vid of creatures

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.
HTML5vid 02 - DJ track mixing

Progressive MP4

Adobe.com overview

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

streamingmedia.com overview

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

RBGnetworks.com overview

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.

MPEG Dash

Streamingmedia.com overview.

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 and all the modern browsers support it. The Video For Everybody Test Page illustrates its usage in clear terms.

Browser support table for the <video> tag on caniuse.com
Browser support table for the <video> tag on caniuse.com

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 served via HTML5. You know those video players you see on Xbox One (YouTube, Xbox Video, Netflix, etc.)? Yup, those are all HTML5 as well.

It’s even gotten a lot easier to test HTML5 video across browsers, especially on various versions of Internet Explorer and the new Project Spartan. To do this, you can get free virtual machines or test remotely on your Mac, iOS, Android, or Windows device.

Netflix has moved from Silverlight to HTML5

A Note on Players

There are many to choose from. In this tutorial, I use Azure Media Services Player since it’s is a good one to start with, 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
  • HLS
  • Progressive MP4
The Azure media streaming options

Best of all, you don’t even need to create your own player or page to test any of your video content. Simply 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’re less familiar with advanced CSS however, I’d shy away from this.

Video.js

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 its perks:

The HTML5 Player framework delivers a consistent video experience for the browser. This is accomplished by detecting support for different video player technologies available on the client (e.g. HTML5 video tag, Silverlight, etc.) and then providing the same JavaScript API and the same set of controls regardless of the technology that is used. It will iterate through a list of fallback video player technologies until a supported technology is found.

I’ll include more information about this in my next post.

What’s Next? Browser Embed. App Wrap.

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’d like to get started right away, you can sign up for a free Azure trial and Visual Studio Community (now a free IDE too) or reach out to me about information on how to obtain a BizSpark account with free monthly Azure credit.

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.

Frequently Asked Questions (FAQs) about HTML5 Video Streaming

What is the difference between HTML5 video streaming and traditional video streaming?

Traditional video streaming involves downloading the entire video file before it can be played. This can lead to long wait times, especially for larger video files. On the other hand, HTML5 video streaming allows the video to be played as it is being downloaded. This means that users can start watching the video almost immediately, without having to wait for the entire file to download. HTML5 video streaming also supports adaptive bitrate streaming, which adjusts the quality of the video in real time based on the viewer’s network conditions.

How can I optimize HTML5 video streaming for better performance?

There are several ways to optimize HTML5 video streaming for better performance. One way is to use adaptive bitrate streaming, which adjusts the quality of the video in real time based on the viewer’s network conditions. Another way is to use a content delivery network (CDN) to deliver the video files. A CDN can help to reduce latency and improve the overall performance of the video streaming. Additionally, you can also optimize the video files themselves by using video compression techniques to reduce their size without significantly affecting their quality.

Can I use HTML5 video streaming for live streaming?

Yes, HTML5 video streaming can be used for live streaming. However, it’s important to note that live streaming requires a more complex setup than on-demand video streaming. For live streaming, you’ll need a live streaming server that can convert the incoming video feed into a format that can be streamed over the web. You’ll also need to ensure that your server has enough bandwidth to handle the live stream.

How can I add subtitles or captions to my HTML5 video?

You can add subtitles or captions to your HTML5 video by using the WebVTT (Web Video Text Tracks) format. This is a simple text format that allows you to specify the timing and content of the subtitles or captions. Once you have created your WebVTT file, you can add it to your video by using the “track” element in your HTML code.

What are the benefits of using HTML5 video streaming?

HTML5 video streaming offers several benefits over traditional video streaming. First, it allows the video to be played as it is being downloaded, which can significantly reduce wait times for viewers. Second, it supports adaptive bitrate streaming, which can improve the viewing experience for users with slower internet connections. Third, it is supported by all modern web browsers, which means that your videos can be viewed by a wide audience.

How can I make my HTML5 video responsive?

To make your HTML5 video responsive, you can use CSS to control the size and position of the video. By setting the width and height of the video to 100%, you can ensure that the video will scale to fit the size of its container. You can also use media queries to adjust the size and position of the video based on the screen size.

Can I control the playback of my HTML5 video using JavaScript?

Yes, you can control the playback of your HTML5 video using JavaScript. The HTML5 video element provides several methods and properties that you can use to control the video, such as play(), pause(), and currentTime. You can use these methods and properties in your JavaScript code to create custom video controls, synchronize the video with other elements on the page, and more.

How can I add a custom thumbnail to my HTML5 video?

You can add a custom thumbnail to your HTML5 video by using the “poster” attribute of the video element. The “poster” attribute specifies an image to be shown while the video is downloading, or until the user hits the play button. Simply set the “poster” attribute to the URL of your thumbnail image.

What video formats are supported by HTML5 video streaming?

HTML5 video streaming supports several video formats, including MP4, WebM, and Ogg. However, not all browsers support all formats. For example, Internet Explorer and Safari do not support the WebM and Ogg formats. Therefore, it’s a good idea to provide your video in multiple formats to ensure that it can be viewed by all users.

Can I use HTML5 video streaming for audio files?

Yes, you can use HTML5 video streaming for audio files. In fact, the HTML5 “audio” element works in much the same way as the “video” element. You can use it to stream audio files over the web, control the playback of the audio, and more. However, it’s important to note that not all browsers support all audio formats, so you may need to provide your audio in multiple formats.

David VoylesDavid Voyles
View Author

Dave Voyles is a Technical Evangelist for Microsoft. He spends a lot of time writing games, writing about games, and writing about how to write games for the game dev community, Read his blog or follow him on Twitter.

AzureHTML5 videoLouisLMDC
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week