Images on the web have been a solved problem for many years. Web designers know they can insert a JPEG, PNG, or GIF file with <img>
and it will work in virtually all browsers. Video, on the other hand, is much more difficult to provide. There are a range of formats and none are universally supported across browsers. Inserting video should be as easy as inserting an image: just make sure the video is in the right format and use <video>
to place it. While we’re not there yet, such a reality could be closer than you think.
(For a summary, skip down to the “Solution summary” heading.)
For video to work as seamlessly as images, we need to agree on a video format (or “codec”) that all browsers will support. This codec must be royalty-free so that anyone can implement it and freely distribute their browser without fear of a lawsuit. Currently, the most widely-used codec that fits this requirement is Theora. To make Theora video as seamless as JPEG, PNG, and GIF for web designers, we need to answer some questions: Which browsers support Theora? How easy is it to make Theora work in other browsers?
To answer these questions, we need to look at which browsers people are using:
Internet Explorer (65.50%)
Mozilla Firefox (22.51%)
Safari (8.43%)
Google Chrome (1.80%)
Opera (0.72%)
Other (1.04%)
Original image and figures from Wikipedia.
(Note: These statistics are used as an example. Different methodologies will yield different results. The important part of these stats is the relative order of the browsers, which tends to stay consistent between methodologies.)
So to make video work seamlessly on 99% of browsers, we will need to make sure IE, Firefox, Safari, Chrome, and Opera can support Theora and in that order (prioritizing highest usage share first).
Fortunately, most of these browsers already support or will soon support Theora. Firefox 3.5, released June 30, 2009, already supports Theora. Firefox users have a history of upgrading quickly (4 months after Firefox 3.0 was released, two-thirds of all Firefox users had upgraded) so most Firefox installs will be 3.5 in the near future. The latest beta version of Google Chrome, version 3, already supports Theora (try it out here). And Opera should have Theora support in version 11.
That leaves Internet Explorer and Safari, which will not support Theora natively for the foreseeable future. Fortunately, there are ways to play Theora in these browsers even without native support.
Though Safari is supported on Windows, the usage share is very small (around 0.15%) so I will focus on supporting Mac OS X. Thankfully, “Every version of Mac OS X comes with Java”, including support for Java applets, so we can use the Cortado applet to play Theora on all OS X machines running Safari. From what I’ve heard, loading the Cortado applet requires the user to explicit allow the applet to run because it is not signed by a trusted CA. This could be solved by getting a free certificate.
Since Microsoft discontinued IE for Mac support in 2005, we only need to be concerned with Internet Explorer on Windows. Unfortunately, not all versions of Windows ship with Java (about 17% of Windows computers don’t have Java) so the Cortado applet is not feasible for IE. However, all versions of IE support ActiveX controls, which means we can use the VLC ActiveX control as described on the VLC wiki. The newest release of the VLC ActiveX control is for version 0.8.6c so one must specify the .cab file location explicitly; it is available here as axvlc.cab. Using the VLC ActiveX control may require the user to agree to install the control, but I believe this can be bypassed by getting a free certificate.
These solutions for playing Theora on Internet Explorer and Safari are all well and good, but they will not be adopted if every web designer has to write all of the fallback code required to use each of these methods. Thanks to projects like Mv_Embed, designers won’t have to do this. Instead, they can include a single JavaScript file, which will dynamically determine the capabilities of the user’s browser and modify the DOM with the correct playing mechanism for their system. To embed a video, designers can just add a Theora video in a <video>
tag and source the JavaScript at the top of their page. It’s that easy.
While Mv_Embed does not yet support all of the solutions I explained, the developers are interested in expanding its reach so it won’t be long before more methods are supported.
Theora support on 99% of browsers is easily achievable:
- Internet Explorer (65.50% share): VLC ActiveX control available for all versions
- Firefox (22.51% share): Theora supported natively in Firefox 3.5
- Safari (8.43% share): Cortado player (Java) works on all versions of OS X; Windows share (0.15%) negligible
- Chrome (1.80% share): Theora supported natively in Chrome 3
- Opera (0.72% share): Theora supported natively in Opera 11 (likely)
To simplify these methods, one can use a tool like Mv_Embed to make inserting a video as easy as adding a <video>
tag and a JavaScript include, which will automatically implement some or all these solutions dynamically.
To make easy <video>
a reality, we need to take these steps:
- Stabilize the VLC ActiveX control, preferably compiling it from a recent version of VLC.
- Get a free certificate, sign the VLC ActiveX control and Cortado player, and test the user experience.
- Update Mv_Embed to support the VLC ActiveX control.
Because some browser vendors are slow to adopt new and/or royalty-free technologies, it will be a few years before <video>
is widely-adopted. However, we can speed adoption by implementing the solutions I’ve outlined, making <video>
virtually as easy to use as <img>
.
You don’t make any mention of the XiphQT project, which is Theora and Vorbis codecs for Quicktime. By installing these a user of Safari can view Theora via the video tag.
I’m guessing you didn’t mention it because it involves an install which would break the user flow. This is important, but the increase in responsiveness, and better UI experience means that any comprehensive solution should take advantage of XiphQT if it is installed, and should probably recommend it’s installation for a better experience even if using the Java solution.
Currently detecting if it is installed is problematic because of Safari bugs but hopefully these will get fixed.
The XiphQT install is also important as it allows Theora creation from a variety on Quicktime powered apps on OS X (not just Apple ones). Downsides are the clunky install process. They really need to steal some code from the Perian project which installs various other open source (though not patent free) codecs easily and runs an auto-updater.
A final related note: there was a long running Java exploit available for the Mac. Many geekier Mac users had turned Java off in their browser. How big a number this was in terms of userbase I don’t know, and a recent fix has meant Java is safe again, but something to bear in mind.
Also, I think there’s a much better case to be made for 100% penetration of Vorbis, given Flash-based fallback mechanisms and its non-visual aspect. This sometimes gets sideline because video is seen as “sexier”.
Another interesting project would be automate a world map which divides browser share into Theora-native/Non-Theora native video. There’s already countries with plus 50% shares for Firefox or Opera. You can’t let technologically backward countries like the UK and US hold everyone else back.
dave wrote:
Yes, that’s exactly why I didn’t mention it. The Cortado applet has a much easier installation user experience than XiphQT. For those that want to convert videos into Theora, they will find XiphQT on their own. They are only a small percentage of the total Internet population, though, so we shouldn’t optimize the installation process specifically for them.
That’s good to know. It might explain why the actual detected number of Java installs on Mac OS is lower than expected:
http://www.statowl.com/java.php?fltr_os=Mac
Hopefully most people have re-enabled Java by now.
dave wrote:
Yes, the number of Internet users who can play Vorbis is quite high thanks to two major Vorbis implementations that run on Flash:
http://barelyfocused.net/blog/2008/10/03/flash-vorbis-player/
http://labs.adobe.com/wiki/index.php/Alchemy:Libraries
I think video is far more important to support than audio because it’s used much more than audio. People occasionally listen to podcasts, but YouTube and other major video providers dominate in terms of time spent watching/listening to content online.
I don’t know about any maps of that type specifically, but there are some regional stats comparing different versions of Firefox:
http://blog.mozilla.com/metrics/2009/07/21/regional-patterns-in-firefox-adoption/
http://blog.mozilla.com/metrics/2009/07/16/people-in-vietnam-love-firefox-3-5/
While I would encourage everyone to start using <video> now, few web sites will until the majority of users can play it. This is why US adoption of Theora is very important: a large percentage of Internet users are from the US. If one’s site caters to a particular geographic location that has high Firefox usage, then <video> would make more sense, but if it’s intended to target the world, then global stats will be most important.
The door on HTML5 isn’t closed yet. I personally think that we can get the tag implemented correctly and get the Theora recommendation back in the spec. I have been researching various positions on this issue and have compiled some notes via Zotero.
The arguments given against the W3C recommendation are baseless and contradictory. Our cultural heritage and communications technologies are not to be subjugated by uncooperative corporate motives to ensnare public knowledge in their proprietary web.
We need a wiki page at Xiph to coordinate around, and clearly document, this critical issue. Will somebody please create this page and then e-mail me so that I can migrate my citation collection?
“Web designers know they can insert a JPEG, PNG, or GIF file with and it will work in virtually all browsers.”
“Virtually”. This should not be assumed. Especially since persons with visual impairments use the web, too. (And those of us who like to use technology beyond the dumb limitations expected by pop-culture web-developers.)
“Inserting video should be as easy as inserting an image”
No it shouldn’t.
“While we’re not there yet, such a reality could be closer than you think.”
Sigh….
/trolling-just-by-being-me
“persons with visual impairments use the web, too.”
True, and they have no way to see images no matter what the Web designer does. So why blame the latter for that? Sure, designers could and should provide fallbacks, which they seldom do, but that’s a different issue. Video and images have the same status in this regard.
“No it shouldn’t.”
Why not? It already is, in Firefox 3.5 for example.
Sigh indeed.