How To: Embed HTML5 Video Into Your Webpage (Part One)
For most people who want to embed video in their websites today, the most common option to do so is to upload the video to a third party service, such as YouTube or Vimeo, and use those sites’ embed codes. While those sites are great promotional tools, they don’t allow filmmakers much control over their own work as it’s displayed on the web.
Enter HTML5, a new web browser language that gives filmmakers that control they’ve been lacking. Rather than surrendering video to some other site for display, it’s now possible for filmmakers to host and display it themselves.
However, HTML5 and video display is far from being standardized across all browsers yet. The bad news is that there are a few programming language tricks needed get set up and to embed HTML5 video in a web page so that it plays in as many web browsers as possible. But, the good news is that once the initial set-up is complete, embedding HTML5 is fairly quick and painless, as I demonstrated in an earlier article on the coming HTML5 video revolution.
This tutorial is broken up into several sections. Part One, which you’re reading, will show you how to make — or at least make sure — your website is HTML5 compliant. Part Two discusses the different web video formats available today. And Part Three discusses actually embedding HTML5 video into a web page.
Declare Your Doctype!
HTML5 is called HTML5 because it’s the fifth standard of the HTML computer language. It’s currently under development by the World Wide Web Consortium, aka W3C. So, while HTML5 isn’t finalized or official yet, web developers can still use many of the standards that the W3C have put forth so far.
Web browsers need to know what version of HTML a web page has been built with so that that web page can be displayed properly. This is what’s known as making a Document Type Declaration, or, for short, declaring a Doctype.
The first thing all web pages do, if you look at the source code underneath, is declare their Doctype. In the past, this has been an ugly, messy thing to do with a string of code that only computer programmers seem to love.
Thankfully, the W3C decided to make declaring a Doctype super-duper easy for HTML5. How easy is it? All you need to do is place the following line at the very top of your web page source code:
That’s it! Your web page is now officially HTML5 compliant!
Here’s what’s extra cool about this: The W3C has made the HTML5 Doctype backwards compatible. So, if you declare your page is HTML5 ready, you don’t need to have any special HTML5 code in the rest of the page. Just create your web pages like you’ve always done and, if you want to start using special HTML5 tags, such as
video> like we’ll be doing later in this tutorial, you can.
Note: Let’s say you’ve already created a web page using an HTML4 Doctype. You don’t have to create a new HTML5 page. Just find the old Doctype, which probably looks something like this:
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
And replace it with the new, simple:
(See, I told you the old Doctypes were ugly!)
Also: In the past, in addition to declaring the HTML Doctype, many web pages also declared their compatibility to XHTML, an extension of regular HTML. However, going forward, HTML5 supplants the use of XHTML.
The point I’m making here is that if you’re converting an HTML4 Doctype to HTML5, your old web page may include a line of code that looks something like:
So, after you change to the new Doctype, you might want to look to see if you have that XHTML declaration and delete it. (It should be directly under the Doctype declaration.)
For example, if the top of your HTML code for your web page has several lines of code that looks like this:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
html lang="en" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
Change that mess to the simplified:
html lang="en" dir="ltr">
Finally: If you’re not familiar with editing web code, changing the Doctype might sound a bit daunting. But, on the other hand, once you do it, you’re set and you don’t have to mess with it again.