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 ![]()