← Back

Render OGG/Theora video using the <canvas> tag

This demo shows how an Ogg/Theora video can be played back in modern browsers using a WebAssembly-based filter pipeline.

Although this format was once promoted as an open video standard, most major browsers (including Chrome, Firefox, and Safari) no longer natively support it.

Code snippet

We decode the ogg file trailer_1080p.ogg that contains a theora video stream and a vorbis audio stream using the universal canvas tag :

<canvas is="universal-canvas_1" data-url="../test_sequences/trailer_1080p.ogg" using="solver_1" with="ogg_1;vorbis_1;theora_1"> </canvas>

Specifications :

The specifications of the test sequence are :

Format Ogg
FileSize 27873937
Duration 33 sec
Overall BitRate 6757932
Video Theora
BitRate 6401458
FrameRate 24
Width 1920
Height 1080
FrameRate 25
FrameCount 825
StreamSize 26 MB
Audio Vorbis
BitRate 80000
Channels 2
SamplingRate 48000
StreamSize 329,9 kB