Web video
Adding audio and video
to web site concepts
Preparing / optimising /
compressing digital
video files
Adding video to web
sites & multimedia
Real Time & HTTP
streaming concepts
Video upload sites
YouTube 
vimeo.com This article discusses the concepts and real world pros and cons of HTML5 video, and gives advice on best practice for x-platform/browser compatibility when using it in your sites.
Our recommendations and advice
To begin with, we are going to show you how to overcome most of the problems outlined on this page with a simple example.
Due to the lovely <source src> and <type> tags, we can embed multiple video codec/file types in one "list" within the <video> tag, and a web browser will automatically select the one it can play. For example, if you have three src values, your browser will go down the list until it can find a supported format.
<video controls="controls">
<source src="imt_intro.mp4" type="video/mp4">
<source src="imt_intro.ogv" type="video/ogg">
<source src="imt_intro.webm" type="video/webm">
You need to update your browser to the latest version to watch this video
</video>
The only downsides are, the 3 competing HMTL5 video file types must be encoded and end-users will need the latest browser versions (including IE9) AND there are still buggy issues on various browsers and platforms!
Further technical guidelines on using HTML5 video tags are here.
Now, read on the find out about all the conceptual and technical concepts and the political and legal debates ...
The concept and politics
Due to the recent 'official' release of HTML 5 (it now has a logo from W3C) many web developers are moving away from established formats like Flash and QuickTime and toward HTML 5 video. HTML5 provides simple and powerful new tags which allow web developers to create a flexible video player with features such as custom controls using various tags and or pieces of script and allows video to be streamed without relying on an external host such as YouTube. The format also has the potential to free end-users from having to install browser extensions and plug-ins, and unite video format on the web in the same way MP3 has for audio.
According to a recent survey, 53% of video is now available in HTML format. Indeed YouTube has re-encoded its entire library to be Flash and HTML 5 compliant.
What is it?
HTML5 is a new way of playing video in your browser. Instead of using a plug in like Flash or Quicktime, the core browser application plays back the video. There are 3 primary technologies required ...
- HTML5 video tags to locate video files in a page and control its behaviour (playback etc)
- Optimised video files prepared in formats which the browsers recognise
- Core code in the browser application to decode and execute the HTML5 tag instructions
As we shall see, it is the third of these which causes most problems.
Why should I care?
Apple mobile devices, such as the iPhone and iPad, do not support Flash (except in the YouTube player format). Until HTML5, Flash has been the standard way of playing back video on the web. This means web designers who want video playback on those devices have to find an alternative if they don't want to use YouTube branded embedded video.
So what is the problem?
Different formats of video require different bits of software (codecs) when the are created (optimised/compressed) and when they are played. Not all browsers support all video formats for various reasons (more on this later). What all this means is nobody has a very good answer to the question “what type of video should I use?” and web developers are faced with some difficult choices when considering web video.
Why can’t the browsers makers settle on one format?
Each format has technical and legal restraints to it. The three main contenders for web video are ...
| Codec | Notes |
|---|---|
MPeg4/H.264 |
Patented codec producing the MP4 file format. Supported by: Safari, Chrome, iPhone and Android |
| Ogg Theora | Currently the most widely supported codec in sacrifice for quality. Supported by: Firefox, Safari (due to quicktime,) Chrome and Opera |
| WebM | Google's open source codec, the Youtube HTML 5 test uses this as well as H.264. Supported by Safari, Chrome and Opera |
Support by browsers for these formats is not universal. Each have pros and cons. For example, currently, none of these formats are supported by Internet Explorer (nothing new) but each have their own good and bad points. H.264 and it's almost universal support on mobile devices means that it is accessible by a wider range of people, however, browsers such as Firefox and Opera aren't supported. As we shall see, this is why multiple <src> tags within a <video> tag are so useful. Also, alternative text can be included in the tags for outdated browsers, meaning that an external link (to Youtube or another video site) can be provided if necessary.
What is wrong with Flash?
There are two main problems. Firstly Flash is owned by Adobe which means anyone who creates or uses Flash have to get a licence from Adobe. It would be best if you didn’t have to be tied to a specific commercial company for something as widespread as web video.
Secondly flash eats batteries; seriously it will drain your battery like an electricity vampire!
Why not use Ogg Theora?
Because it is open source, Ogg Theora was the original preferred choice for HTML5. This means that anyone can create software to make or playback Ogg Theora without having to pay the people who created Ogg Theora to do so. However other formats can create video that is smaller in size but better in quality when compared to Ogg Theora.
Why not use H.264?
H.264 is a high quality video format probably best known for its use in Blu-ray video. It must be encoded (compressed) during preparation for publishing and uncompressed (decoded) for playback. It is widely supported and highly praised for its scalability (it works on phones and at cinema projection level).
Unfortunately whilst use of the codec is free for use in decoder applications and plug-ins, a royalty must be paid to the patent owners whenever the encoder is included in encoder software.
H.264 was created (and the patents are owned) by the Moving Pictures Experts Group (MPEG) probably best known for the creation of MPEG-1 Audio Layer III more widely known as MP3. The World Wide Web Consortium (W3C) have ruled that H.264 cannot be considered as the standard video for the web due to the licensing issue surrounding it, furthermore browsers like Firefox cannot use H.264 due to the licensing issue.
Why not use WebM?
WebM is a new video format sponsored by Google. It is under a BSD licence meaning that all users are granted a worldwide, non-exclusive, no-charge, royalty-free patent license. It is of comparative quality to H.264 and being backed by Google it has gained a lot of commercial support. One drawback is that video playback is processor (and battery!) intensive meaning that it’s difficult to playback high quality video on mobile devices. H.264 gets around this by having a lot of hardware that is specially made to playback H.264. WebM being a relative newcomer does not yet have the same level of support.
What’s the patent problem?
Many people are worried that a legal challenge could be made in about any video format leading to various licensing issues. Currently the wide spread nature of H.264 means that it is unlikely that a challenge will be made towards H.264 but there are still concerned about Ogg Theora and WebM as they are not yet as widespread.
Can I get some numbers?
This is the current picture (Jan 2011)
45% of people use IE. Internet Explorer 8 (and under) does not support HTML5 video at all.
30% of people use Firefox. Firefox supports Ogg Theora and will support WebM but can’t use H.264.
12% of people use Chrome. Chrome supports Ogg Theora and WebM and will stop supporting H.264
6% of people use Safari. Safari only supports H.264.
2% of people use Opera. Opera supports Ogg Theora and WebM but can’t use H.264.
The remaining 5% is a mixture of mobile browsers and other more obscure browsers.
96% of people can use flash video.
44% of people can use WebM or Ogg Theora (when Firefox is updated)
6% of people can use H.264 (When chrome stops using H.264).
The tags and features
The basics
With the new <video> tag, video files can be "embedded" (linked) directly into a web page. Within this tag there are multiple values, these are ...
| Tags (controls) | Description |
|---|---|
| <!DOCTYPE HTML> | HTML5 simplifies the doctype dramatically. Here is the old XHTML doctype declaration ... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <video> | This works just like any other tag however there are two new elements that come in handy. "Controls" ensures the browser gives you a control panel for the video and poster allows you to set what the is displayed before the video plays. |
| <source src> | Much like when dealing with the <img> tag, the src value defines whereabouts the video file is located. Due to a number of reasons you may well have your video in more than one format. This tag allows you to declare multiple video sources and lets the browser playback whichever one it supports. "src" should be prefaced with "source" where multiple alternative files are listed. |
| type | Defines the file/codec type |
| Width & Height | Again, like the <img> tag of the good old days, the Width and Height values set, well, the width and height of the video (surprised?) |
| Controls | If user defined these are highly customisable, and thanks to the new @font-face CSS coding, things such as timers and other text features on the interface can be changed according to how the designer wants the player to look. If the controls value is left without any extra definition, the video tag will use your web browser's default controls. Poster - When the video is loading, an image is shown in place of the video, this is defined by the poster tag and could be fairly useful. |
| <poster> | This tag permits a still image to displayed before playback is started. |
| <autoplay> | Does what it says on the tin really. |
| <autobuffer> | A very useful feature that is not currently supported by many browsers, if you are confident that the end user is definitely going to view your piece of video (for example, on a dedicated page) then the Autobuffer value sets up the video to automatically download before the play button is pressed. The main downside to this feature on a main page is that not every user may want to view the video, so they are having their bandwidth taken up by content they don't need. |
| <loop> | Something that could be useful for experimenting with various video clips, the loop function allows looping (who'd have guessed?) |
The <video> tag
The <video> tag is like a div, it can be overlapped, floated and used like a regular box, this is due to the fact that it is being processed by the browser rather than an external plug-in (for example, flash player.) This means that video tags are incredibly flexible and can be positioned almost anywhere on a page, one of the classic problem with flash video was the constant overlapping of extendable drop down menus, this will no longer happen.
Video tags can be fully customized with CSS, this means that some really cool stuff such as semi transparent video can be achieved by simply adding an opacity value and a very handy expanding trick can be implemented with the recent 'transition' function.
With some JavaScript knowledge and an overwrite code (to prevent the browser using it's default controls,) it is possible to create interfaces that work with the entire site rather than having to rely on custom flash content, no doubt in the future we will be seeing some very interesting interfaces, providing that a common codec is decided upon sometime soon.