A call for video on the web - Opera <video> release on Labs
Video is one of the hottest things on the Web today, with several solutions available to create video effects and embed it in your web pages (for example Flash and Quicktime,) and much improved hardware available - these days we web users have web-enabled video cameras in our pockets and the bandwidth available to transfer more clips and streams than we can watch.
Something however is still not quite there about web video. The video solutions mentioned above are proprietary closed solutions that rely on plugins to display in a web page - what we need to make video a first-class web citizen is an easy, open solution to integrate video into web pages, and native support for video in browsers.
In short, we need a
<video> element in HTML, and we must also agree on a baseline video format that will be universally supported, just like the GIF, JPEG and PNG image formats are universally supported for images. It's important that the video format we choose can be supported by a wide range of devices and that it's royalty-free (RF). RF is a well-established principle for W3C standards. The Ogg Theora format is a promising candidate, which has been chosen by Wikipedia.
The good news
<video> element has already been proposed in the HTML5 working draft, and here at Opera, we have created an experimental build of our browser for Windows, Mac and Linux with (amongst other things*) support for the
<video> element/Ogg Theora built in. Even better is that we have made it downloadable for you to play with:
- Opera 9.52 preview for Linux/UNIX
- Opera 9.52 preview for Windows (MSI installer)
- Opera 9.52 preview for Windows (Classic installer)
- Opera 9.52 preview for Mac
we have included several examples for you to check out below.
* This build of Opera also supports video in SVG, File I/O and the 3d <canvas> - these topics deserve their own articles, which we hope to publish soon, although some of the examples below include SVG.The Opera video build is currently at a very experimental stage, so not widely supported as of yet. But this is a start - We're inviting you to start playing with it and passing the message on to others about how powerful this is!
How does it work?
<video> element just uses a
src attribute to point at the video you want to display, and a
controls attribute, a boolean that specifies whether the user-agent should should provide controls for the video player (present,) or whether it shouldn't, as that will be handled by the web developer creating the site (absent):
<video controls src="demo.ogg"></video>
You can expand it slightly to include some text to display if the decoder isn't available, and an
id with which to manipulate the video:
<video controls src="demo.ogg" id="myVideo">Theora decoder not found</video>
It's just as easy as Flash, but using an open standard and running right in the browser. Check out the source code of the examples below for more inspiration, and let us know what you come up with!
Here are some pages using the video element:
- native controls
- scripted controls
- scripted with opacity
- Wikipedia-based demo on parrots
- Wikipedia-based demo on octopus
Here are some pages using the video element in SVG:
This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.