Opera Core Concerns

Official blog for Core developers at Opera

(re-)Introducing <video>

, , , , , ,

Today the desktop team released a new years pre-alpha of Opera 10.50 which includes the first public preview of our new HTML5 <video> implementation. It was Opera that first proposed <video> and made the first proof-of-concept build way back in 2007. In this post I will talk about what we've done since then, the decisions we've made and where we hope to go next.

Codecs

From the very beginning, one of the most important questions has been which audio and video formats should be used with HTML5. The issue has been debated heavily in the web standards community, but no consensus has been reached yet. We believe that the web platform must be built on open standards and will therefore continue to support the Ogg formats: the Vorbis audio codec and the Theora video codec. These, in addition to plain WAVE PCM audio, are our "core codecs" which we will support on all desktop platforms.

Features

While the core codec support remains the same, almost everything else has changed. The specification has evolved a lot since <video> was first added, and we try to follow the spec to the letter. This is a non-exhaustive list of what we consider more or less done:

  • Native controls (the controls attribute)
  • Scripted controls (e.g. using play(), .currentTime and ontimeupdate)
  • Poster image (the poster attribute)
  • Painting <video> frames on <canvas>
  • Selecting source depending on codec and environment (e.g. <source src="video-720p.ogv" type="video/ogg" media="(min-device-height: 720px)">)
  • Scripted codec detection (e.g. canPlayType('video/ogg; codecs=vorbis,theora'))

HTML5 <video> section then and now (rotated 90°; scale 1:73)

As this is a pre-alpha, there are also some parts that are not finished. Most importantly, we don't support seeking at all yet. As a side effect we don't have the duration of files until we have played through to the end, so the seekbar isn't very useful right now. This is at the top of our list of things to fix before a final release. We are also working on improving bandwidth management so that we will be able to honor (the absence of) the autobuffer attribute.

Implementation

In our original <video> demo, we were using the libogg, libvorbis and libtheora libraries. For this release those libraries are still included, but we have adopted the GStreamer media framework as an extra layer between the browser core and the raw decoding. Among other things, this allows processing to take place in a separate thread, which has improved responsiveness and audio quality.

For platforms where GStreamer is natively available, we are simply using the system-installed version. Thus, if you are using Linux or FreeBSD, make sure to install at least the GStreamer "base" and "good" plugins, otherwise <video> won't work at all. (Update: on Debian/Ubuntu the package names are gstreamer0.10-plugins-base and gstreamer0.10-plugins-good.) Having done this, Opera will be able to play anything that GStreamer can handle, which fortunately includes our core codecs. We also try to detect a number of GStreamer plugins so that we can give truthful answers to scripts that ask e.g. canPlayType('audio/flac') or canPlayType('video/x-msvideo'). We hope you have fun playing with this, but stick to Ogg for anything serious that should cross-platform and cross-browser.

On Windows we have made a minimal GStreamer configuration which keeps only the features necessary to decode the above mentioned core codecs. As required by the GStreamer license (LGPL), our modified source code is available. Unfortunately we don't have a Mac version of GStreamer ready for today's release, so <video> is not available on Mac just yet.

Many thanks to the developers of the GStreamer and Xiph projects, for excellent software and the occasional bit of advice on IRC.

Native controls in Opera 10.50 pre-alpha

The future

In the coming year, we hope that adoption of <video> continues and that we will see exciting new applications made possible by having audio and video as integral parts of the web platform. We will work hard to help realize this potential both by improving our own implementation and by contributing to the development of HTML and other specifications. A few things we think are important right now:

  • Fullscreen video playback is a must-have feature.
  • Subtitles/captions (static as well as scripted).
  • Media Fragment URIs will enable users to link to a specific point in time of a video and more.
  • More CSS to make <video> and the whole web even more awesome.
  • Let us not forget SVG's own <audio> and <video> elements.
  • Security, performance and stability (this is always important).

(No promises on when any specific feature will be done.)

Demos

If you have read this far, you deserve to see some demos!

With this I wish everyone a happy new year, may there be an abundance of <video> for all!

Carakan RevisitedEverything you need to know about HTML5 video and audio

Comments

Nguyễn Hồng Quânbachkhois Saturday, January 9, 2010 7:09:08 AM

Opera, like usual, is always innovative! Thank dude!

BohwaZbohwaz Wednesday, January 13, 2010 3:01:03 PM

Video doesn't work for me, controls are showing but I don't see any video and can't play it. Installed asked gstreamer packages, but still the same. (debian)

Maybe I forgot something?

Ruarí Ødegaardruario Thursday, January 14, 2010 10:05:12 PM

Originally posted by bohwaz:

Video doesn't work for me, controls are showing but I don't see any video and can't play it. Installed asked gstreamer packages, but still the same. (debian)



Hmm ... I am aware of another user who said the same. What version of Debian and also are you running 32bit or 64bit?

Witold Barylukmovax Friday, January 15, 2010 6:11:18 PM

Originally posted by ruario:

Originally posted by bohwaz:

Video doesn't work for me, controls are showing but I don't see any video and can't play it. Installed asked gstreamer packages, but still the same. (debian)

Hmm ... I am aware of another user who said the same. What version of Debian and also are you running 32bit or 64bit?

I have similar problem on Debian Stable (Lenny) i386, in console i see message "Unknown codec". On Unstable and Testing it works correctly.

BohwaZbohwaz Monday, January 18, 2010 12:21:59 PM

Debian squeeze/sid, 32bit. But I just tested on another computer with debian lenny 5.0.3 and same thing. Nothing on console except a X error on startup (not on video play) :

X request error - BadAtom (invalid Atom parameter):
Major opcode: 20, Minor opcode: 0
Resource ID: 0

With the wikipedia demo when I click I got this : http://i46.tinypic.com/15rxzcm.jpg

I hear a little 'click' in my speakers, a part of the video displays but don't play, it stays like the screenshot.

Installed gstreamer plugins on first computer (squeeze/sid) :

ii gstreamer0.10-plugins- 0.10.25-7 GStreamer plugins from the "base" set
ii gstreamer0.10-plugins- 0.10.17-1 GStreamer plugins from the "good" set

Installed gstreamer plugins on second computer (lenny) :

ii gstreamer0.10-plugins- 0.10.19-2 GStreamer plugins from the "base" set
ii gstreamer0.10-plugins- 0.10.8-4.1~lenny2 GStreamer plugins from the "good" set

With strace I can see that opera finds gstreamer stuff, nothing strange.

tomassplatch Thursday, January 21, 2010 9:55:02 AM

Google launched HTML5 video support, but only supports H264.
http://mashable.com/2010/01/20/youtube-html5/
If I understand right, I should be able to play them in Opera, if I have the correct gstreamer codec. So I installed x264 codec (I'm on Arch Linux here) but it doesn't seem to work. What to do? Is there any way of playing H264 videos in Evenes?

Ruarí Ødegaardruario Thursday, January 21, 2010 10:27:27 AM

Originally posted by tomassplatch:

I installed x264 codec



Which package? Do you have gstreamer0.10-bad-plugins installed?

tomassplatch Thursday, January 21, 2010 10:44:22 AM

Ah, no, I didn't have that package installed, thank you. However, when I try to play some youtube video via http://neosmart.net/YouTube5/ (I can't make youtube let me play html5 videos), I can only hear sound.

Daniel HendrycksDanielHendrycks Thursday, January 21, 2010 10:29:42 PM

Originally posted by tomassplatch:

but only supports H264.


Such a shame.

Martin RauscherHades32 Friday, January 22, 2010 1:50:07 PM

Is it (already) possible to install the full GStreamer on Windows?
See http://my.opera.com/community/forums/topic.dml?id=374151

BohwaZbohwaz Monday, February 1, 2010 2:35:36 PM

Now working in last build, cool.

balu_ Friday, February 12, 2010 12:02:30 PM

What is the movie that you have shown in the screencap?

Ruarí Ødegaardruario Friday, February 12, 2010 12:32:11 PM

Originally posted by tomassplatch:

Ah, no, I didn't have that package installed, thank you. However, when I try to play some youtube video via http://neosmart.net/YouTube5/ (I can't make youtube let me play html5 videos), I can only hear sound.



For people with this issue, make sure you have gst-plugins-ffmpeg installed. The name of the package varies between distros. Search for ffmpeg amongst the available gstreamer packages.

JCRaoult Tuesday, March 22, 2011 7:14:53 PM

Originally posted by bohwaz:

Video doesn't work for me, controls are showing but I don't see any video and can't play it. Installed asked gstreamer packages, but still the same. (debian)

Same problem: the following file does execute correctly on my computer (iMac with Intel processor, running Opera 11): I tested further all four MIME formats at the URL http://camendesign.com/code/video_for_everybody/test.html and neither had problems in the playback (I have Shockwave Flash and QuickTime plugins). Nevertheless the following HTML file only gives a blank image (with control buttons when the mouse in inside the frame). In particular, the message "Ca ne marche pas" does not appear: <!DOCTYPE HTML PUBLIC> <html> <body>

Ceci est un essai de la faculté de vidéo de HTML5

</body> </html> In the same directory as the html file, the file "videodaccueil.mp4" is located, and when input directly, Opera does play this file. What is wrong with the HTML file?

JCRaoult Tuesday, March 22, 2011 7:22:33 PM

Oops sorry: I included straight HTML, which appeared blank. Here is the HTML file (each line is between less than and superior signs)

video controls width=500 height=400
src="videodaccueil.mp4"
/video

Write a comment

New comments have been disabled for this post.