Ogg Theora Cook Book

HTML5 Video

If you create video, you may wish to display the content in a webpage. The code you use to create webpages is governed by a set of rules known as HTML, and there is recently a new version of this these rules called HTML 5.

HTML 5 introduces a video tag. A 'tag' is a few lines of HTML code that instructs the browser to display something or do something. The HTML5 video tag allows simple integration of videos in a manner very similar to placing images in a webpage.

The video can also be displayed with very nice controls for play, pause, altering the audio volume, and scrolling through the timeline of the video.

Firefox_video_tag 

Basic Syntax

Here is a basic example of a video embed tag using HTML 5 :

<video src="../video.ogv"></video>

The above example embeds the video file, 'video.ogv', into a webpage. The file in this example should be located in the same directory as the HTML file because the 'src' parameter refers to a local file. To reference a video file in another directory on the same webserver you need to provide the path information just as you would for an image file.

<video src="..//bin/edit/myvideofiles/video.ogv"></video>

You can also specify a file on another server:

<video src="../http://mysite.com/video.ogv"></video>

Parameters

Adding additional parameters provides more control over the video.

<video
  src="../video.ogv"
  width="480"
  height="320"
  autoplay
  controls>
  Your Browser does not support the video tag, upgrade to Firefox 3.5+
</video>

In this example the width and height of the video are provided. If you don't want the image to appear distorted it is important that you set the height and width dimensions correctly. autoplay means that the video will be played as soon as the page loads. controls specifies that the controls to pause or play the video (etc) are displayed.

It is possible to include text or other HTML content inside the video tag as fallback content for browsers that do not support the video tag.

Using your own controls / player skin

If you know a little Javascript you can control the playback quite easily. Instead of using the controls provided by the browser, it is possible to create your own interface and control the video element via JavaScript. There are two things you need to remember with this method :

  1. Do not forget to drop the controls attribute
  2. The video tag needs an id parameter like this :
    <video src="../video.ogv" id="myvideo"></video>

Some JavaScript functions:

video = document.getElementById("myvideo");
//play video
video.play();
//pause video
video.pause();
//seek to second 10 in the video
video.currentTime = 10;

If you have multiple video tags in a single webpage you will need to give each a unique id so that the javascript knows which video the controls refer to.

A full list of functions and events provided by the video tag can be found in the HTML5 spec at http://www.whatwg.org/specs/web-apps/current-work/#video

Manual Fallback options

In the above, simple example, if the video element is not supported by the browser, it will simply fall back to displaying the text inside the video element.

Instead of falling back to the text, if the browser supports Java, it is possible to use Cortado as a fallback. Cortado is an open-source cross-browser and cross-platform Theora video player written in Java. The great thing is that the user doesn't need to download any extra Java packages as the applet uses the standard native Java in the browser. Cortado's home page can be found here :

http://www.theora.org/cortado/

A pre-compiled version of the applet is also available at this URL :

http://www.theora.org/cortado.jar

You can download the jar file, or you can refer to it directly. The following is an example to embed cortado (not all paramters are required, but listed here to provide you an idea of possible options) :

    <applet code="com.fluendo.player.Cortado.class"
            archive="http://www.theora.org/cortado.jar"
      width="352" height="288">
      <param name="url" value="http://myserver.com/theora.ogv"/>
      <param name="framerate" value="29"/>
      <param name="keepAspect" value="true"/>
      <param name="video" value="true"/>
      <param name="audio" value="true"/>
      <param name="bufferSize" value="100"/>
      <param name="userId" value="user"/>
      <param name="password" value="test"/>
    </applet>

If you select to download the jar file as a fallback, make sure you put it (cortado.jar) and the above html page in the same directory. Then change the following line to include a reference (link) to your own ogg stream (live or pre-recorded) :

<param name="url" value="http://myserver.com/theora.ogv"/>

Now if you open the webpage in a browser it should play the video. 

To use Cortado as a fallback, place the Cortado tag within the HTML5 video tag -- as in the following example:

<video src="../video.ogv" width="352" height="288">
  <applet code="com.fluendo.player.Cortado.class"
          archive="http://theora.org/cortado.jar" width="352" height="288">
    <param name="url" value="video.ogv"/>
  </applet>
</video>

Javascript Based Players

Some javascript libraries exist to handle fallback selection. These libraries enable simple embeding while retaining fallback to many players and playback methods across many browsers

Mv_Embed

The mv_embed library is very simple to use. A single JavaScript file include enables you to use the html5 video tag and have the attributes be rewritten to player that works across a wide range of browsers and plugins. More info on mv_embed

<script type="text/javascript" src="../http://metavid.org/w/mwScriptLoader.php?class=mv_embed"></script>
...
<video src="../mymovie.ogg" poster="mymovie.jpeg">

Itheora

ITheora is a PHP script allowing you to broadcast ogg/theora/vorbis videos (and audios) files. It's simple to install and use. Itheora includes documentation on their site on how to use their player and skins.

Support in Browsers

Right now, latest versions of Mozilla Firefox, GNU IceCat and Epiphany browsers support Theora natively. Opera and Google Chrome have beta versions available with Theora support. Safari supports the video tag, but only supports codecs through QuickTime - that means by default it does not support Theora. With XiphQT (http://xiph.org/quicktime) it is possible to add Theora support to QuickTime and thus Safari.