Leadership

How to use HTML 5's video tag

Justin James offers tips on using the HTML 5 <video> tag, including options for accessibility issues and browser support.</video>

One of the most exciting new features in HTML5 is the <video> tag, because it addresses a very common use case that currently is a headache (and potentially expensive) to deal with unless you are willing to put your content up on a site like YouTube. In addition to being free to use, the video tag is increasingly supported in browsers. For better or for worse, no video codec is specified by the HTML5 specification, which is the major drawback to using it, but it looks as though MPEG will be fairly well supported.

The first question you may have is, "What do I do about browsers that do now support <video>?" That is easily answered: the <video> tag may contain additional content, but browsers supporting <video> should not display it. This means that you can use the contents of <video> to have a reasonable default (a "can't display content" message, a Flash video player, an embedded YouTube object, etc.) that won't be displayed if the browser supports it.

Using <video> is not difficult at all, and in fact is a lot like using <img>. The basic attributes you should know about are src, width, and height, which all work as they do with <img>. You can use the poster attribute to specify the URL of an image to be used to display while the video content is loading. If you want the video to start playing when ready, add the autoplay attribute (you can either just use "autoplay" by itself, or "autoplay=autoplay"). To not use autoplay, either omit it entirely, or set it to false with "autoplay=""". You can use the same syntax with the "loop" attribute (to have the video automatically start over again when done) or the "muted" attribute (to have the sound shut off). Another useful attribute is "controls"; if this is true (again, just "controls" or "controls=controls" will set it to true, and leaving it out or "controls=""" will set it to false) then the browser will be responsible for displaying various controls; otherwise, you will need to make an interface in HTML and use JavaScript to manipulate the DOM to control the video playback.

The "preload" attribute is used to tell the browser if it should start to load the video before it starts to play. A value of "none" means that the browser should not preload at all, "metadata" tells it to load only the video's metadata, and "auto" allows the browser to get as much of the video as it wants ahead of time. If you set the value to "" then it will act as if you specified "auto." The HTML5 spec suggests (but does not require) that browsers use "metadata" if the value is not specified. You will want to definitely use a value here to ensure that the behavior is what you expect.

An interesting piece of the puzzle is the "mediagroup" attribute. By specifying a value for "mediagroup" you can have multiple <video> or <audio> elements tied to the same set of browser controls; when one plays, they all play, when one stops, they all stop. This is especially useful for providing alternative videos for accessibility. For example, you could have a secondary video that plays a series of text describing the main video for deaf users, and another with an audio track narrating the main video for blind users. An alternative to usability for the hearing disabled is the <track> element. You can use it to provide the browser with information on time track text files, which will provide captions, subtitles, etc. to be overlaid by the browser onto the video automatically.

As you can see, the <video> element makes it very easy to get your video content onto the Web, so long as your server can handle the load (use the "preload" attribute wisely). The big question mark in all of this is the codec situation, and it may require you to perform some user agent sniffing and manipulation of the src attribute (either on the server side or the client side via JavaScript) to determine which file to be used, based on the current codec support from each browser.

About

Justin James is the Lead Architect for Conigent.

14 comments
cougar.b
cougar.b

I did a Google search for "tutorial HTML5 controls false," and I found an easy way to avoid putting controls on the video using controls=false. I originally wrote that I didn't know what controls=""" is, but with two sizes of quotation marks. However, in trying to ask the question, this comment box transformed my question to explain that what I was seeing was not what was intended. The original article looks to me like it has three quotes. When I pasted that into this comment box to ask about it, it appeared to become a single double-quote. If it was actually two single quotes, I could understand it, but as it is, I don't understand. I'm sure I'm doing something wrong, here, but that's how it looks, and I'm confused. Sorry to be such a newbie.

TexasJetter
TexasJetter

Good explanation of the tag. Once thing worth noting is that the src attribute supports multiple sources, so you can specify more than one format (i.e. .mp4, .oog). It will sequence through the sources until it finds a supported codec. See http://www.w3schools.com/html5/tag_video.asp for more info..

pgit
pgit

Lately I see increasing numbers of video sites failing (using firefox and konqueror) without any indication of why. If I open the same link in Chromium I get a pop-up header saying the flash plugin is too old, with buttons to either update the plugin (which always fails using Linux) or to ignore the warning and play this video just this one time. I can only watch one video after receiving this pop up, until I log out and back in to the desktop environment. All other browsers just fail to play the video with no indication as to why the frame is blank. There's no runaway process when this happens, nothing seemingly related running that's not responding. Is this html5 related? Bad coding? If so is there some way to provide helpful feedback?

Justin James
Justin James

The system totally mangled things by doing "smart quotes" on the code in the article! It should be: controls="" With just two regular quotation marks (empty string). Sorry for the confusion! J.Ja

Justin James
Justin James

... at least that was the case a few months ago, but I *think* this has changed since because I specifically looked for it and couldn't find it... but I may have missed it. That's why I omitted that feature for the article. J.Ja

pgit
pgit

A SQL back end dev I know was telling me he's used ember (javascript) in his html5 apps to deal with the need to support multiple codecs. http://emberjs.com/ Don't ask me anything about it... all I know is he said ember was a tool from heaven in his dealings with html5.

Justin James
Justin James

A lot of sites detect the version of Flash and refuse to play it if your Flash plugin is out of date, as a reminder to you to go get the latest version for security reasons, most likely. HTML5 has nothing to do with this. It is a DELIBERATE decision, too, so your feedback probably won't be listened to. :( J.Ja

cougar.b
cougar.b

Glad I'm not losing my mind. I do want to thank you (and Ryan Boudreaux ) for the value you give me with your regular blogs. I really don't have time to take courses or study at length, so you help immeasurably in teaching me what I need to learn. I read things like this blog because I'm undertaking a personal project that's way out of my league, using PHP, jQuery, potentially HTML5, and other things that I've encountered for the first time ever in taking on this project. You and Ryan especially have helped me update my knowledge in short, bite-sized pieces that I can fit in around the edges of my life. My "Hello World" application in PHP created a multi-level array, and when I populated the database, I found myself with 715 complex pages, each one with unique CSS flyouts and links to the sources of all the CC pictures I used on 1/3 of the pages. And it's not like I'm overlaying PHP skills on top of other programming languages that I've mastered, because I haven't mastered any programming language yet. I'm currently flummoxed by a jQuery problem that a professional developer could solve with his or her eyes tied behind her back. (I'm trying to create a series of text boxes on a sequential series of layers that will append the contents to a scrollable box at the bottom of the page that is always visible. Easy peasy for anyone but me.) And I literally have a couple or three hours per week to work on the project. What I learned from this blog for the project is the following: I had an animated gif on one of the layers that I couldn't figure out how to reset it and start it when the layer became visible. So because of this blog by you, I've converted that animated gif to an mpeg, which I believe I can control more easily if I redo my prototype page in HTML5 and use the video tag with a call back from the button that makes the layer visible. I still don't know how to do this, but at least, you've personally given me a direction to explore. So I read blogs like yours to absorb information by osmosis, because I really don't have the time I need for reading all of the books I must read to know what the heck I'm doing. Thank you for what you do.

pgit
pgit

Well, they have apparently failed to account for Linux underlying a browser, because I have the very latest flash plugin installed. It's not a noscript issue either, totally disabling it (and even adblock plus for good measure) doesn't rectify it. Maybe they wouldn't hear a complaint about version, but is there possibility a developer would want to know his apps aren't running on Linux?

cougar.b
cougar.b

I appreciate your prompt reply. I will pass your information along to Elise, the friend from the Civil Hackers' School, who suggested that I look into this possibility.

Justin James
Justin James

Finding a mentor isn't easy. One of three things happens. One, you work for a company that has a formal mentor system (rare). Two, you find one within work, but outside of formal channels, such as an experience co-worker that you can bring problems to, ask questions, etc. Three, you find one outside of work, such as through a local user group, an open source project, etc. Keep in mind that mentoring offers zero rewards other than emotional, and in the case of software development, takes a lot of effort and can be quite frustrating. Not many people are willing to sign up for that kind of relationship. It may take a while. No one mentored me and I don't know of anyone else in this industry who talks of having a mentor in their past either. J.Ja

cougar.b
cougar.b

Justin, you may have covered this topic in a past blog, but if not, here's an question. How does a serious student of programming find a mentor who is capable in his or her specific types of programming? I'm currently practicing regularly with a very small SF Chapter of the Civil Hackers' School, which was founded by a man from Moscow (Ilya V Vasilyev) in the 1990s (https://www.noisebridge.net/wiki/Talk:Civil_Hackers_School). Currently, this group provides me with the social support to keep studying, but those who regularly attend (by irc) are not skilled in my technologies. I'm pretty isolated from people doing the kind of work I'm trying to do. Elise, from the Civil Hackers' School, suggested that finding a mentor might help me accelerate my progress, but I have no idea how to do that. I suspect that other programmers have the experience of finding mentors at key points in their development, but I don't know this to be true. However, if so, I suspect that a blog that draws together the experiences of others would be valuable.

pgit
pgit

This has been driving me nuts, so I tried on Linux/firefox with user agent switcher, no matter what OS/browser combo I tried these sites simply wouldn't load flash video. I didn't get any error messages. In chromium I got the 'flash is too old' error and on the first try was given the option of 'run flash this time only' which would play the videos. If I chose not to play, no amount of reloading would give me the option to play 'once' until I cleared cookies. Then I booted into the XP and Vista instances on the same 2 computers, made sure IE, the OS and flash were the absolute latest and the same sites still wouldn't play. These are both laptops, but vastly different hardware so I can't imagine that's an issue. I have one more machine to test this on, except there's no windows available on that hdw.

Justin James
Justin James

Believe it or not, that is probably still Flash's mistake. I've seen this many times in the past, where no matter what I did, Flash was still not being shown as the right version... using IE on Windows and once it happened with Chrome or Firefox too. Flash is just buggy! J.Ja

Editor's Picks