A call for video on the web - Opera <video> release on Labs

By Opera Software

Introduction

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

The <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:

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?

The simplest <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>

From here on in it's just a matter of using the CSS, SVG and JavaScript that you already know to create working controls and other interface items for your video player - you can even create effects like filters and reflections.

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!

Examples

Here are some pages using the video element:

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.

Comments

The forum archive of this article is still available on My Opera.

No new comments accepted.