oggplayer: A simple Ogg player using liboggplay

To help track down performance issues, and fix some a/v synchronisation bugs, I wrote a simple Ogg player in C++ using the same libraries and a similar approach to what I use in the Firefox video implementation.

The source to 'oggplayer' is available on github.

I've setup the repository to facilitate my experimenting with different approaches and different library versions. What this means is I've taken the, probably unusual, approach of having a 'thirdparty' directory containing git submodules for each of the Ogg based libraries I'm using. I configure and build these and link statically to them. This lets me use experimental versions of the Ogg libraries without dealing with 'shared library hell'.

This is all explained in the README, but just quickly these are the steps to clone oggplayer, and get the third party libraries from git:

$ git clone git://github.com/doublec/oggplayer.git
$ cd oggplayer
$ git submodules init
$ git submodules update

Once that's done you need to build the third party libraries:

$ cd thirdparty
$ sh build.sh

Run 'make' to build oggplayer itself. The third party libraries are built and installed in a 'local' subdirectory.

You'll notice the unix-centric leaning of these commands. I've only built on Linux. I'm using cross platform libraries so it should build with minor changes on Mac OS X. Mainly changing the audio library to link against in the Makefile. For Windows you'll probably need to use Cygwin or MSYS.

To run, just pass the filename on the command line:

$ ./oggplayer foo.ogg

Press ESC to exit the playback, and space bar to toggle full screen on supported platforms (those that SDL supports full screen).

These are the third party libraries I use, and include as submodules:

• libogg
• libvorbis
• libtheora
• liboggz
• libfishsound
• liboggplay
• libsydneyaudio

You'll need the following system libraries to build:

• Boost C++ libraries
• SDL

There's not much error checking, I mostly use 'assert' to bail on an error. I don't want to spend time creating an awesome player, rather something I can use to try test out the way I'm using the third party libraries.

Interestingly with this example player I can play back the problematic HD video I mentioned previously. Part of this is the newer YUV conversion routines in liboggplay and the more lower level optimized SDL libraries for blitting the video data. I'm also not seeing audio buffer underruns which I see with some videos in Firefox. Time to do some investigating!

Categories: firefox, video

Very nice web technology demo

This 'glimpse of future web technologies', all in one document is pretty nifty. Lots of different web stuff in there, including rotated videos, fancy CSS, and DFXP captions for videos.

Thanks to Sam Ruby for pointing to Philippe Le Hegaret's work.

Categories: firefox

Replacing <video> controls using a bookmarklet

[Update: Chris Blizzard has a neat screencast showing the bookmarklet and player replacement in action.]

There's been some interesting demo's of <video> usage and manipulation discussed in the TinyVid Feedback comments section.

One user, hansschmucker, has done some nice demonstrations of what <video> can offer.

For example, this bookmarklet can take a TinyVid video and replace the player using the built in controls with one written in JavaScript provided by the bookmarklet. The new interface includes seeking, play, pause and volume control. It looks very nice.

To use the bookmarket, visit the bookmarklet page, click on the button that appears there and bookmark the resulting page. Next visit a TinyVid video and visit the bookmarklet. The built in player will be replaced by the new one. This will also work on many pages that use video using the built in controls, for example this transparency camp video.

This example show's it's possible for users to create and customize their own video players and use it on sites of their choice which is pretty nice.

hansschmucker also provided some demo's of using <video> with <canvas> that allow you to view a video in 3D using red/cyan glasses. I've copied his comment from the feedback page below:

=== Using VIDEO as data source for 3D ===
I just wrote a little demo to demonstrate how powerful VIDEO elements can be as data source: This little script (it's 20 lines for god's sake) uses a video (which was also produced via JS by the way, thanks to Radiohead's choice of using simple CSV for the data, the power of Canvas and a bit of base64 decoding) to offset pixels in a randomly generated noise map, saving the original map as red and the altered image as red/blue.

You just have to get out your red/cyan glasses and you'll be able to enjoy the video in 3D. Lots more could be done with proper optimization (in fact, the whole thing may be done as a set of SVG filters) and just a little more attention to detail (random noise is possibly the worst thing you can use for a map), but it's still amazing how easily you can create something amazong with VIDEO.
...
Two more variants: uses a prerendered noise (looks much better) and warps the source image itself which probably makes most sense here.

Categories: tinyvid, video, firefox

tinyvid.tv updates

I did some updates to tinyvid.tv, my test site for using the HTML 5 video element, over the last week or so.

I mentioned the first in a previous post, using Facebook Connect for authentication. All user accounts have an internal identifier which is associated with the Facebook account when the user chooses to authorize TinyVid. This means all activities that require user authentication require a Facebook account. Eventually I'll probably add other methods (OpenId, etc).

The main feature addition was uploads. If you are authenticated you can upload files. They are initially set to private visibility. You can edit that to make them public.

There are two ways of doing uploads. The first is via the standard HTML file input element. This requires the uploaded file to be in Ogg format already. I check this when the upload is complete and fail the upload if it is not valid.

The second is using the firefogg Firefox extension. This lets you upload a file in almost any video format. It transcodes the video to Ogg format before uploading. It provides a progress bar for the transcode, and the upload progress, providing a slightly better user experience than the first method.

File uploads are still in testing and I'll be enabling/disabling it as I find problems and fix them.

I changed the fallback mechanism so that browsers that don't have native video support will immediately use the Cortado Java applet instead of requiring a click through.

I added a page showing popular videos. It shows videos with the most views over the last 24 hours, and for all time (since I enabled this feature which is only a few days ago).

There is an account management feature that lists all the videos you've uploaded or converted. You can edit the metadata for these videos (title, description, private/public visibility) or delete them. These requires being authenticated.

Search was added. Currently it searches through the titles. I'll add searching through the description field later.

I fixed an issue that prevented Safari from playing some of the videos due to a bug in the Factor webserver. Safari users will need to install the XiphQT plugin to get Ogg support however.

Categories: tinyvid, video