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.
Here is a basic example of a video embed tag using HTML 5 :
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.
You can also specify a file on another server:
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
- Do not forget to drop the controls attribute
- The video tag needs an id parameter like this :
<video src="../video.ogv" id="myvideo"></video>
video = document.getElementById("myvideo"); //play video video.play(); //pause video video.pause(); //seek to second 10 in the video video.currentTime = 10;
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 :
A pre-compiled version of the applet is also available at this URL :
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>
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.