HTML5 Video

HTML5 video is intended by its creators to become the new standard way to show video on the web without plugins - wikipedia

The following HTML5 code fragment will embed a WebM (WebM Project) video into a web page - wikipedia

<video src="movie.webm" width="400" poster="movie.jpg" controls> This is fallback content to display for user agents that do not support the video tag. </video>

This is fallback content to display for user agents that do not support the video tag.

The "controls" attribute enables the browser's own user interface for controlling playback. Alternatively, playback can be controlled with JavaScript, which the web designer can use to create a custom user interface.

The optional "poster" attribute specifies an image to show in the video's place before playback is started. Its purpose is to be representative of the video.

# Presentations using HtML5 Video

Here is an example presentation using HTML5 Video in which the speaker and the slides are represented as two separate but synchronised videos - tele-task-demo.hpi.uni-potsdam.de

WebM

WebM is generally preferred over Ogg Theora Vorbis when available, because it provides better compression to quality ratio and is supported by more browsers.

To install ffmpeg with VP8 support on OSX you can follow the instructions here renevolution.com

The HTML5 specification introduced the video element for the purpose of playing videos, partially replacing the object element.



Plants and Machines video courtesy of CCC.

The above video can be rendered using standard HTML5 in compatible browsers. These browsers are required for Fedwiki in any case - so that is not really an issue.

The HTML used to render this video in Fedwiki can be seen below:

<video src="http://c3media.vsos.ethz.ch/congress/2013/webm/30c3-5437-en-Plants_Machines_webm.webm" width="400" controls> This is fallback content to display for user agents that do not support the video tag. </video><br></br> Plants and Machines video courtesy of <a href="https://media.ccc.de/v/30C3_-_5437_-_en_-_saal_g_-_201312282245_-_plants_machines_-_mrv_-_bbuegler#video" target="_blank">CCC</a>.

or more simply as we require modern browsers anyway:

<video src="http://people.canonical.com/~kirkland/byobu.mp4" width=420 controls>

The video can be delivered by any CDN or basic web server. In the example below the HTML5 video is delivered by the CCC-TV projects CDN.

WebM is generally preferred over Ogg Theora Vorbis when available, because it provides better compression to quality ratio and is supported by more browsers.

To install ffmpeg with VP8 support on OSX you can follow the instructions here renevolution.com

Please note that if you already installed FFmpeg with another command line, you will first need to run:

Please note that if you already installed FFmpeg with another command line, you will first need to run:

brew uninstall ffmpeg

brew uninstall ffmpeg

See the example install shell commands below:

See the example install shell commands below:

brew install ffmpeg --with-libvpx --with-libvorbis

brew install ffmpeg --with-libvpx --with-libvorbis

or

or

brew install ffmpeg --with-fdk-aac --with-ffplay --with-freetype --with-frei0r --with-libass --with-libvo-aacenc --with-libvorbis --with-libvpx --with-opencore-amr --with-openjpeg --with-opus --with-rtmpdump --with-schroedinger --with-speex --with-theora --with-tools

brew install ffmpeg --with-fdk-aac --with-ffplay --with-freetype --with-frei0r --with-libass --with-libvo-aacenc --with-libvorbis --with-libvpx --with-opencore-amr --with-openjpeg --with-opus --with-rtmpdump --with-schroedinger --with-speex --with-theora --with-tools

Other Codecs

Formats like H.264, and Vorbis might also be subject to unknown patents.

# ffmpeg with WebM support

The HTML5 specification introduced the video element for the purpose of playing videos, partially replacing the object element. HTML5 video is intended by its creators to become the new standard way to show video on the web without plugins - wikipedia