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%)
Google Chrome (1.80%)
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.
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
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