HTML5 Video and History: Features Users Can Really See
Wallace B. McClure | August 22, 2013
Who hasn’t started looking at the mobile Web and HTML5—features like the viewport, new HTML5 controls, geolocation and many others that are part of smartphones, tablets and advanced browsers? With these features, developers have started to provide users with fairly common, new input controls; jQuery Mobile features; location and mapping; and much more. In this article, I describe two features that you might not be familiar with: the <video> tag and Web history. The <video> tag lets you display video without the need for plug-ins like Flash. Web history allows users to use the Back button to return to the previous page in an AJAX application.
Note: The APIs for HTML5 vary slightly across different versions of browsers and different implementations. Because HTML5 is still in the recommendation phase at the W3C, think of it as a draft at this point. Because these APIs may change before they become a final standard, I cover only the version of HTML5 implemented in Internet Explorer 10. Every opportunity will be made to test the code across other browsers to verify that it works.
The <video> Tag
If a picture is worth a thousand words, video must be worth a whole lot more. Video has been integrated into Web sites large and small. I love the Yahoo! Finance site, for example, and listen to numerous news reports.
Before looking at a basic example of the <video> tag, we need to review the problem that arises because video can be saved in various formats. When files are played, the video content must be decoded, which is done through a codec. Unfortunately, browser and hardware vendors support different decoding formats. For example, Microsoft and Apple provide codecs for MP4. Google has refused to support MP4 because of the licensing and royalty requirements and instead provides codecs for its own format, WEBM. But Microsoft and Apple don’t provide support for WEBM. Thankfully, there’s a solution. The <video> tag supports having multiple video files associated with it by using the src attribute.
The<video> tag has a number of attributes that you can use to configure it and provide the user with an improved experience. These attributes (defined by the W3C) include:
Now, let’s look at an example that demonstrates the following behaviors.
Here’s the sample code:
The output will look something like Figure 1. In this image, the video frame is larger than the default because the code uses the width attribute and the controls are visible. Also, if the video is paused, clicking any part of the video will cause the video to play.
Mimetypes and File Access
If you download the previous code and run it locally in Visual Studio, the <video> tag will most likely not work. The Visual Studio Web Development Server (also known as Cassini) does not appear to have the appropriate mimetypes, and adding mimetypes to Cassini is not possible. As a result, developers need to test their code on the server-based IIS or IIS Express. Doing so requires a change within the web.config. Add mimetypes by inserting the following lines:
In this configuration, the mimetypes for the MP4, OGV, WEBM, and M4V video types are added to the Web server for serving static content.
Along with thinking about mimetypes, you also need to consider accessing the files themselves. It’s entirely possible to use the path from the display file to the video file. My examples use this method for simplicity. However, if the path to the files changes, a modification is needed. To get around this problem in Razor, your code can use the @Href method to access the video file within the <video> tag, like this:
Methods and Properties
The <video> tag has a set of methods and properties that you can use to programmatically change the behavior of the tag and its controls and also to interact with other elements on an HTML page. These methods and properties include:
The <video> tag’s events include (but are not limited to) the following:
Note: For a longer list of the properties, methods, and events of the <video> tag, consult the references at the end of this article.
Enhancing the User Interface
Now let’s take a look at improving the user interface. The following sample code creates four buttons and assigns event handlers to them. These buttons allow a user to play, pause, fast forward 5 seconds, and rewind 5 seconds. The results of this code are shown in Figure 2.
Some things to note are:
Note: In my sample code, I show different ways of doing things. For example, I wire up some events by using an assignment of an event. In other cases, I use the addEventListener syntax available in the DOM. I do this to show options and not to show favoritism for one mechanism over another.
Learning History’s Lessons
Browsers have had the ability to go backward and forward between various pages since the beginning of the Web, and developers have been able to interact, change, and manage the browser URL for years. With the advent of AJAX, however, Web pages could change fairly dramatically without sending a full refresh of the page. This resulted in browser URLs that did not necessarily change with AJAX calls, and from a user’s standpoint, this behavior created a problem:
How can developers solve this problem? With ASP.NET 3.5 Service Pack 1, the ASP.NET team came out with a great solution. They could create a new URL and hold some type of state information in the URL. However, this solution raised issues regarding support for all the myriad of browsers in the marketplace. The W3C stepped into this scenario and defined the HTML5 History API.
The History API is defined by two methods/events:
Let’s look at some simple code that puts this to use. In this example, a page is loaded and the time is displayed in a label. When the user clicks a button, the time in the label is updated. Along with the time being updated in the <span> tag, the browser’s current state is pushed to the History object, the URL hash is updated, and the browser’s Back button is now active.
You should note two items regarding HTML History and this example in particular:
In this article, I introduced you to the HTML5 <video> tag and the History object. Thanks to the great support for HTML5 features in Internet Explorer 10, Windows 8, Windows RT, and Windows Phone, developers have the opportunity to build some really fantastic apps. I hope that you find this article helpful.
About the Author
Wallace McClure is a redneck from Tennessee who somehow found his way to Atlanta and Georgia Tech. He was lucky enough to graduate from there twice, with a BS and MS in electrical engineering. He’s always loved things that were new and different, which led to his love of writing software (starting in COBOL and x86 asm), digging into Microsoft's Web technologies, jumping whole-hog into the .NET Framework 1.0 beta, falling in love with mobile way back in 1999, and taking on a whole host of things he probably shouldn't have done but did anyway. Somewhere along the way, he was contacted by someone representing a publisher that would eventually get purchased by John Wiley and Sons and folded into their Wrox division. Several books later, he’s run the gamut from software architecture, to scaling applications, ADO.NET, SQL Server, Oracle, Web, AJAX and mobile technologies. He’s worked for startup companies and many different organizations, all the way up through U.S. federal government agencies.
When not writing software, writing about software, talking about software or thinking he is a comedian, Wally can be found playing golf, in the gym, or coaching basketball.
Find Wally on: