<!DOCTYPE html>
<!-- ========================================== kroc camen of camen design ============================================= -->
<title>code · Video for Everybody!</title>
<link rel="stylesheet" type="text/css" href="/design/" />
<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=no" />
<link rel="alternate" type="application/rss+xml" href="/code/rss" title="Just code" />
<link rel="canonical" href="/code/video_for_everybody" />
<!-- =================================================================================================================== -->
<header>
<h1><a href="/" rel="index">
Camen Design
</a></h1>
<nav><ul>
<li><a href="/">all</a></li>
<li><a href="/projects">projects</a></li>
</ul><ul>
<li><a href="/quote/">quote</a></li>
<li><a href="/photo/">photo</a></li>
<li><a href="/writing/">writing</a></li>
<li><a href="/blog/">blog</a></li>
<li><a href="/art/">art</a></li>
<li><a href="/code/" rel="tag">code</a></li>
<li><a href="/link/">link</a></li>
<li><a href="/poem/">poem</a></li>
<li><a href="/audio/">audio</a></li>
</ul><ul>
<li><a href="/web-dev/">web-dev</a></li>
<li><a href="/annoyances/">annoyances</a></li>
<li><a href="/inspiration/">inspiration</a></li>
<li><a href="/code-is-art/">code-is-art</a></li>
<li><a href="/windows/">windows</a></li>
<li><a href="/gift/">gift</a></li>
<li><a href="/gaming/">gaming</a></li>
<li><a href="/osnews/">osnews</a></li>
<li><a href="/mac/">mac</a></li>
<li><a href="/c64/">c64</a></li>
<li><a href="/linux/">linux</a></li>
</ul>
<a rel="previous" href="/code/website_optimisation_measures">
older article →
</a><a rel="next" href="/code/abbr_redux">
← newer article
</a></nav>
</header>
<!-- =================================================================================================================== -->
<article><header>
<!-- date published or updated -->
<time pubdate datetime="2010-07-11T15:03:00+01:00">
<sup>3:03<abbr>pm</abbr> • 2010</sup>
<abbr title="July">Jul</abbr> 11
</time>
<!-- categories -->
<ul>
<li><a href="/code/video_for_everybody" rel="bookmark tag">code</a></li>
<li><a href="/web-dev/video_for_everybody">web-dev</a></li>
<li><a href="/code-is-art/video_for_everybody">code-is-art</a></li>
</ul>
<!-- licence -->
<small>
<a rel="license" href="http://creativecommons.org/licenses/by/3.0/deed.en_GB">c</a>
share + remix
</small>
</header>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<section>
<h1>Video for Everybody!</h1>
<ol>
<li><a href="#video-what">How It Works</a></li>
<li>
<a href="#video-code">The Code</a>
<ol>
<li><a href="#notes">IMPORTANT Notes</a></li>
<li><a href="#controls">Adding Custom Controls</a></li>
</ol>
</li><li>
<a href="#video-encode">Encoding the Videos</a>
<ol>
<li><a href="#hd">Using <dfn title="high definition">HD</dfn> Video</a></li>
<li><a href="#h264">A Warning About H.264</a></li>
<li><a href="#webm">Using WebM Video</a></li>
</ol>
</li>
<li><a href="#video-related">Related Projects</a></li>
<li><a href="#acknowledgements">Acknowledgements</a></li>
</ol>
<aside>
<strong>Update:</strong> Added note on <a href="#android">Android</a>, updated the <a href="/code/video_for_everybody/test.html">test page</a>
for updated browsers
</aside>
<p>
<strong>Video for Everybody is</strong> simply a chunk of HTML code that embeds a video into a website using the
HTML5 <code><video></code> element, falling back to Flash automatically, without the use of JavaScript or
browser-sniffing. It therefore works in RSS readers (no JavaScript), on the iPhone / iPad (don’t support Flash)
and on <a href="/code/video_for_everybody/test.html">many, many browsers and platforms</a>.
</p><p>
If you’ve arrived here from a link please note that VfE no longer includes QuickTime as part of the fallback, but
the code for that version is still available <a href="/code/video_for_everybody/test_qt.html">here</a>.
<br /><br />
<small>Hosting of the video generously provided by<br />
<a href="http://webop.de/users/69" rel="external">André M. Åslund</a> of
<a href="http://vorwaerts-gmbh.de" rel="external">Vorwärts GmbH</a>.</small>
</p>
<!-- "Video For Everybody" by Kroc Camen - read this article for full documentation and commented code
=================================================================================================================== -->
<video width="640" height="360" controls poster="/code/video_for_everybody/poster.jpg">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
<object width="640" height="384" type="application/x-shockwave-flash" data="/code/video_for_everybody/player.swf">
<param name="movie" value="/code/video_for_everybody/player.swf" />
<param name="flashvars" value="image=/code/video_for_everybody/poster.jpg&file=http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" />
<img src="/code/video_for_everybody/poster.jpg" width="640" height="360" alt="Big Buck Bunny"
title="No video playback capabilities, please download the video below" />
</object>
</video>
<p><small>
<strong>Download Video:</strong>
Closed Format: <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">“MP4”</a> •
Open Format: <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv">“Ogg”</a> /
<a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm">“WebM”</a>
</small></p>
<hr />
<p>
<strong>Thanks to the rapid adoption of HTML5 video</strong> happening right now, Video for Everybody
<a href="http://speckyboy.com/2010/04/23/html5-video-libraries-toolkits-and-players/" rel="external">isn’t the
only solution around</a>. Video for Everybody is for developers who either want something really simple they can
quickly use on their blog or websites, or as a good starting point to develop their own custom solution. Video for
Everybody is not a neatly packaged, fully-featured solution for non-developers.
</p>
<h2 id="video-what">How It Works</h2>
<p>
If your browser supports it, HTML5 video is used. No Flash—no crash.
</p>
<img src="/code/video_for_everybody/screenshots/ipad.png" alt="iPad demonstrating Video for Everybody playback" width="640" height="496" />
<p>
If HTML5 video is not supported, Adobe Flash is used.<br />
You can host locally or embed any Flash file, such as a <a href="/code/video_for_everybody/test_yt.html">YouTube
video</a>.
</p>
<figure>
<img src="/code/video_for_everybody/screenshots/flash.jpg" alt="Screenshot of Internet Explorer 8 playing video using Adobe Flash" width="600" height="468" />
<figcaption>Flash fallback in IE8</figcatpion>
</figure>
<p>
Finally, if all else fails, a placeholder image is shown and the user can download the video using the links
provided. If the user doesn’t have Flash they are <strong>not</strong> prompted to install it. Users have enough
problems with security already without random websites prompting them to install things—and it’s even more
annoying for people who don’t want or cannot use Flash anyway. This is one aspect that makes
<dfn title="Video for Everybody">VfE</dfn> different than any other video embedding method.
</p>
<figure>
<img src="/code/video_for_everybody/screenshots/fallback.jpg" alt="Screenshot of Firefox 3 without QuickTime or Flash installed, displaying a fall back message about the video" width="600" height="446" />
<figcaption>Final fallback image, you could use a different image that points to the download links</figcatpion>
</figure>
<p>
This is all done <strong>without JavaScript</strong> and requires <strong>only two video encodes</strong>, one Ogg
file, and one MP4 file. Instructions on how to convert your videos to these formats with the correct settings are
provided <a href="#video-encode">further down</a> this article.
</p><p>
It’s compatible with HTML 4, HTML5 (valid markup), XHTML 1 and additionally also works when served as
<samp>application/xhtml+xml</samp>.
<br /><br />
For a full browser compatibility list, see the <a href="/code/video_for_everybody/test.html">Video for Everybody
Test Page</a>.
</p>
<h2 id="video-code">The Code</h2>
<p>
Here follows the full source code. It’s very large because it’s fully commented.<br />
You can easily compact this down (one such example follows afterwards).
<br /><br />
<small>Do not miss the <a href="#notes">important notes</a> below or you will be kicking yourself after wasting
hours trying to get it to work.</small>
</p>
<pre><code><!-- "Video For Everybody" v0.4.1 by Kroc Camen of Camen Design <camendesign.com/code/video_for_everybody>
=================================================================================================================== -->
<!-- first try HTML5 playback: if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise -->
<!-- warning: playback does not work on iPad/iPhone if you include the poster attribute! fixed in iOS4.0 -->
<video width="640" height="360" controls>
<!-- MP4 must be first for iPad! -->
<source src="__VIDEO__.MP4" type="video/mp4" /><!-- WebKit video -->
<source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera -->
<!-- fallback to Flash: -->
<object width="640" height="384" type="application/x-shockwave-flash" data="__FLASH__.SWF">
<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
<param name="movie" value="__FLASH__.SWF" />
<param name="flashvars" value="image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
<!-- fallback image. note the title field below, put the title of the video there -->
<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
title="No video playback capabilities, please download the video below" />
</object>
</video>
<!-- you *must* offer a download link as they may be able to play the file locally. customise this bit all you want -->
<p> <strong>Download Video:</strong>
Closed Format: <a href="__VIDEO__.MP4">"MP4"</a>
Open Format: <a href="__VIDEO__.OGV">"Ogg"</a>
</p></code></pre>
<p>
<small>(If you would like your video to automatically start playing, check out the sample code on the
<a href="/code/video_for_everybody/test.html">test page</a>.)</small>
<br /><br />
Here’s a compacted version as an example:
</p>
<pre><code><!-- Video for Everybody, Kroc Camen of Camen Design -->
<video width="640" height="360" controls>
<source src="__VIDEO__.MP4" type="video/mp4" />
<source src="__VIDEO__.OGV" type="video/ogg" />
<object width="640" height="384" type="application/x-shockwave-flash" data="__FLASH__.SWF">
<param name="movie" value="__FLASH__.SWF" />
<param name="flashvars" value="image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
title="No video playback capabilities, please download the video below" />
</object>
</video>
<p> <strong>Download Video:</strong>
Closed Format: <a href="__VIDEO__.MP4">"MP4"</a>
Open Format: <a href="__VIDEO__.OGV">"Ogg"</a>
</p></code></pre>
<p>
And one that auto plays: (notice the changes “<code>autobuffer</code>” and “<code>autostart=true</code>”)
</p>
<pre><code><!-- Video for Everybody, Kroc Camen of Camen Design -->
<video width="640" height="360" controls autobuffer>
<source src="__VIDEO__.MP4" type="video/mp4" />
<source src="__VIDEO__.OGV" type="video/ogg" />
<object width="640" height="384" type="application/x-shockwave-flash" data="__FLASH__.SWF">
<param name="movie" value="__FLASH__.SWF" />
<param name="flashvars" value="autostart=true&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
title="No video playback capabilities, please download the video below" />
</object>
</video>
<p> <strong>Download Video:</strong>
Closed Format: <a href="__VIDEO__.MP4">"MP4"</a>
Open Format: <a href="__VIDEO__.OGV">"Ogg"</a>
</p></code></pre>
<p>
It’s advised you <a href="/code/rss">subscribe to the RSS</a> to be kept informed of new releases in case you
get caught out by new bugs introduced by vendors <strong>*cough*</strong>Apple<strong>*cough*</strong>. The version
isn’t <1 for no reason.
</p>
<h3 id="notes">IMPORTANT Notes</h3>
<ul>
<li id="mime">
<p>
Ensure your server is using the correct mime-types. Firefox will <strong>not</strong> play the Ogg
video if the mime-type is wrong. Place these lines in your <samp>.htaccess</samp> file to send
the correct mime-types to browsers
</p>
<pre><code>AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm</code></pre>
</li><li>
<p>
Replace <q><samp>__VIDEO__.MP4</samp></q> with the path to your video encoded to MP4 and<br />
replace <q><samp>__VIDEO__.OGV</samp></q> with the path to your video encoded to Ogg
</p>
</li><li>
<p>
Replace <q><samp>__POSTER__.JPG</samp></q> with the path to an image you want to act as a title
screen to the video, it will be shown before the video plays, and as a representative image when
the video is unable to play (Also replace “<samp>__TITLE__</samp>” for the poster image’s
<code>alt</code> text). Not all browsers support the <code>poster</code> attribute, it’s
advisable to encode the poster image into the first frame of your video.
</p><p>
<strong>DO NOT INCLUDE THE <code>poster</code> ATTRIBUTE
(<code><video poster="…"></code>) FOR iPad / iPhone 3.x SUPPORT.</strong> There is a
major bug with iPhone OS 3 that means that playback will not work on any HTML5 video tag that uses
both the <code>poster</code> attribute and <code><source></code> elements. This was fixed
in iPhone OS 4.0, but of course for now there will still be a large number of OS 3 users. This bug
<em>does not</em> affect use of the poster image in the <code>flashvars</code> parameter, which
you should retain
</p>
</li><li>
<p>
Replace <q><samp>__FLASH__.SWF</samp></q> with the path to the Flash video player you are using.
I use <a href="http://longtailvideo.com/players/jw-flv-player/" rel="external">JW Player</a>
<small>(download and place ‘player.swf’ in the right place)</small>, but this could be any
Flash resource including YouTube. Sample code for using YouTube can be seen on the
<a href="/code/video_for_everybody/test_yt.html">Video for Everybody YouTube Test Page</a>
</p>
</li><li>
<p>
Set the width and height parameters correctly. Please note that Flash is 24 pixels higher—this
is because the controls for the Flash player don’t overlay the video like HTML5 does
</p>
</li><li id="buffer">
<p>
Safari buffers the video automatically even if <samp>autobuffer</samp> is absent. This has been
fixed in WebKit nightlies with a change to the HTML5 spec; the “<samp>preload="none"</samp>”
attribute on the video element prevents autobuffering
</p>
</li><li>
<p>
The iPhone will not autoplay. This is done to save bandwidth which may cost some users.<br />
It is not a bug, it’s a feature
</p>
</li><li id="android">
<p>
HTML5 video on Android, even the latest version, is badly broken. Resolution support varies from
one handset to the next, usually the fallback image doesn’t show and the code requires
<a href="http://broken-links.com/2010/07/08/making-html5-video-work-on-android-phones/" rel="external">special
adjustments</a>. The Android emulator is completely useless. <strong>THERE IS NO WAY TO TEST ON
ANDROID WITHOUT A PHYSICAL PHONE.</strong>
<strong><a href="http://code.google.com/p/android/issues/detail?id=8272" rel="external">BLAME
GOOGLE</a>.</strong> I would love to update the code to work better with Android, but until
Google fixes their code or sends me a phone, I can’t do that. They’ve had <em>only</em> three
years to do it so far.
</p>
</li><li>
<p>
There are some instances where people will simply not be able to view the video inside the
web-page (<abbr title="for example,">e.g.</abbr> Opera Mobile / Mini). It is absolutely essential
that you provide download links outside of the video to ensure your message gets through
</p>
</li><li>
<p>
A <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=449358" rel="external">current bug</a>
in Firefox means that when JavaScript is disabled (NoScript for example) the video controls do not
display. For now, right-click on the video for the controls, use autoplay on your videos or rely
on users allowing your site in NoScript
</p>
</li><li id="eolas">
<p>
The Eolas ‘Click to Activate’ issue affects Flash / QuickTime in Internet Explorer 6 / 7 as
the ActiveX controls are not inserted using JavaScript—however Microsoft removed ‘Click to
Activate’ in a later update patch. This issue will not affect users who have run Windows Update
</p>
</li><li id="camino">
<p>
A parsing bug in Camino 2.0 / Firefox 3.0 means that the image element inside the video element
will ‘leak’ outside of the video element. This is not visible however unless some kind of
background image or colour is applied to that image element. You can stop this by either wrapping
the video element in another element or modifying the code from
“<code><source … /></code>” to “<code><source …></source></code>”.
This works, but will not validate as HTML5
</p>
</li>
</ul>
<h3 id="controls">Adding Custom Controls</h3>
<p>
Since VfE doesn’t come with any JavaScript, the HTML5 video will use whatever native interface the browser
provides. This is in the best interest of the user because it provides an interface best tailored to that device.
For example, the iPhone always plays video fullscreen so that the edges of the video are not cut off in the browser
and the user does not have to pan around to get it all in view. The iPad provides finger-friendly sized controls.
</p>
<figure>
<img src="/code/video_for_everybody/screenshots/controls.jpg" alt="Two screenshots of the different HTML5 controls in Opera 10.5 and Google Chrome" width="640" height="180" />
<figcaption>Different native video controls in Opera 10.5 and Google Chrome</figcatpion>
</figure>
<p>
Designers however don’t like the inconsistency and would like a unified set of controls. This is easy to achieve
with some JavaScript. Steve Haffernan has written
<a href="http://blog.steveheffernan.com/2010/04/how-to-build-an-html5-video-player/" rel="external">a tutorial to
get you started</a> (this
<a href="http://steveheffernan.com/html5-video-player/demo-video-player-2.html" rel="external">demo page</a>
contains better markup, but he hasn’t updated his article to link to this yet). He has also rolled this into a
project of its own called <a href="http://videojs.com" rel="external">video.js</a> which uses VfE and custom
controls you can style how you please with CSS.
</p><p>
When adding controls to HTML5 video <a href="http://diveintohtml5.org/everything.html" rel="external">check</a> if
HTML5 video playback is possible first (“<code>!!document.createElement('video').canPlayType</code>”) and
insert the HTML controls into the page using JavaScript. Why insert the controls instead of just unhiding them using
CSS? Think of RSS readers and other aggregators where the JavaScript (and CSS) won’t travel to the user. You
don’t want to present them a set of ‘broken’ controls. Instead, dynamically remove the <code>controls</code>
attribute with JavaScript to hide the native controls and then insert your controls into the page. Also, of course,
if the browser doesn’t support HTML5 then the Flash video will show and you’ll end up with two sets of controls!
</p>
<h2 id="video-encode">Encoding the Videos</h2>
<p>
Full instructions are beyond the scope of this article, please refer to Mark Pilgrim’s
<a href="http://diveintohtml5.org/video.html" rel="external"><cite>Video on the Web</cite></a> article for an
excellent introduction to video formats and encoding instructions.
</p>
<ul>
<li>
<p>There is no restriction on the resolution of the Ogg video</p>
</li><li>
<p>
The iPhone can play MOV and MPEG4 videos with a maximum size of 640x480 and only allows the Base
Profile for H.264 (See <a href="http://tinyurl.com/vfe-iphonespecs" rel="external">Apple’s own
instructions</a> for the specifics). If your desired video is bigger than that, please read the
<a href="#hd">instructions below</a> for how to adjust the code to use hi-res videos whilst
keeping iPhone compatibility
</p>
</li><li>
<p>
The iPad <a href="http://apple.com/ipad/specs/" rel="external">can play</a> H.264 up to 720p, 30
FPS
</p>
</li><li>
<p>
Firefox will <strong>only</strong> play Ogg, and it will <strong>not</strong> degrade to Flash if
you leave out the Ogg video
</p>
</li><li>
<p>
For best results I recommend including the poster image as the first frame when you encode the
video
</p>
</li>
</ul>
<h3 id="hd">Using <dfn title="high definition">HD</dfn> Video</h3>
<p>
If you would like to use a larger video than 640x480, you can use a QuickTime reference movie to auto-select between
an iPhone compatible version and the full-size video. In QuickTime Pro use the ‘<kbd>File » Export for
Web…</kbd>’ option to output a reference movie (you can also use Apple’s
<a href="http://developer.apple.com/quicktime/quicktimeintro/tools/" rel="external">MakeRefMovie</a> tool for
finer control). You’ll have three files along these lines: “<samp>video.mov</samp>”,
“<samp>video-desktop.mp4</samp>” (or m4v) and “<samp>video-iphone.mp4</samp>”. Now replace the two
<code>source</code> elements in the code with these three: (substituting the right file paths)
</p>
<pre><code><source src="video.mov" type="video/mp4"></source>
<source src="video-desktop.mp4" type="video/mp4"></source>
<source src="video.ogv" type="video/ogg"></source></code></pre>
<p>
What happens here is that the browser will play the QuickTime reference movie (Safari / iPhone / iPad) which will
auto-select between the desktop and iPhone versions of the video automatically. If the MOV format isn’t supported
by the browser (Chrome for example), we point to the same MPEG4 video that the QuickTime reference movie uses.
</p>
<h3 id="h264">A Warning About H.264</h3>
<p>
I made Video for Everybody because since <a href="/blog/flash-week">I don’t have Flash installed</a> I wanted to
create a way websites could provide me access to their videos (currently <a href="/code/end_of_vfe">needlessly
trapped inside Flash</a>) without having to lose viewers from older browsers. VfE is not a tool I would use myself
(other videos on this site are HTML5/Ogg only) because of the
<a href="http://0xdeadbeef.com/weblog/2010/01/html5-video-and-h-264-what-history-tells-us-and-why-were-standing-with-the-web/" rel="external">threat</a>
that H.264
<a href="http://weblogs.mozillazine.org/roc/archives/2010/01/activex_all_ove.html" rel="external">represents</a>
to <a href="http://osnews.com/comments/23236" rel="external">freedom on the web</a>. Websites that are already
serving H.264 video to users using Flash have already made the conscious decision to buy into H.264, including what
that entails come 2016 when royalty fees kick in (I expect large video sites like YouTube are already well aware of
the costs and have the money to pay them).
</p><p>
Just be aware that if you decide to use H.264 video for commercial purposes then you will need to purchase a licence
from the MPEG-LA, and for non-commercial purposes (which are vaguely defined) it is free up until 2016 where they
can change the rules and charge you.
</p>
<h3 id="webm">Using WebM Video</h3>
<p>
On the 19<sup>th</sup> of May 2010
<a href="http://osnews.com/story/23322/BREAKING_Google_Opens_VP8_Codec_Enables_it_on_YouTube" rel="external">Google
released the VP8 codec as open-source and royalty free</a> with the full intent to drive broad adoption via
industry backing and switching YouTube over to the new format in the long term.
<a href="http://webmproject.org" rel="external">“WebM”</a> is a rebranded Matroska container utilising VP8
video and Vorbis audio.
</p><p>
This represents major competition to H.264—Mozilla, Google and Opera have already added support into special
builds of their browsers and even Microsoft have
<a href="http://osnews.com/story/23323/Microsoft_Internet_Explorer_9_To_Support_VP8" rel="external">about-faced</a>
on their H.264-only policy and said that IE9 will support WebM—but only if the codec has been installed by the
user. Obviously absent from any support is Apple, and this means that unfortunately codec-fragmentation will
continue into the foreseeable future so that you will still need to provide more than one video encode.
</p><p>
Adding a WebM video to Video for Everybody is easy, just add it to the source list! It has to go below the MP4 video
due to an iPad bug that ignores anything but the first source element, and ideally above the Ogg source so that
browsers that play both Ogg and WebM choose the WebM video first. Here is an example source stack:
</p>
<pre><code><source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webm" />
<source src="video.ogv" type="video/ogg" /></code></pre>
<p>
Note the new mime type, which you will have to <a href="#mime">add to your server</a>.
</p><p>
At this extremely early stage for WebM <strong>I will not provide any help via e-mail on how to encode or use WebM
video.</strong> If you don’t know how to use it already, it’s not for you—wait until support is added to your
favourite tools and more information is readily available. I will update this article as the situation with WebM
progresses.
</p>
<h2 id="video-related">Related Projects</h2>
<p>
If you’ve modified Video for Everybody to do something else, or have created an HTML5 video related project,
please <a href="mailto:kroccamen@gmail.com">let me know</a> and if it upholds the same
<a href="/blog/letter_to_mozilla_re_video">principles</a> as Video for Everybody, I’ll list it here.
</p><p>
(I will <em>not</em> list projects that cannot play the video in an RSS reader. Using JavaScript to insert
<code><video></code> defeats the entire purpose.)
</p>
<dl>
<dt><a href="http://videojs.com" rel="external">video.js</a></dt>
<dd>
Based on Video for Everybody but adds custom video controls made of HTML that you can style anyway you
please with a bit of CSS. The project is new and there are bugs yet to be ironed out. Remember as with all
HTML5 video, do your own testing and only utilise a project like this only if you (or your developer) are
knowledgeable enough to fix bugs and keep abreast of the rapidly changing HTML5 landscape.
</dd>
<dt><a href="http://video.braydon.com/" rel="external">Univers Video Plugin</a></dt>
<dd>
A WordPress plugin that provides you a simple interface for inserting video. It uses Video for Everybody
for the base template but steps up to a custom interface if JavaScript is available. The plugin even does
server-side encoding. The Flash interface is designed to closely mimic the look of Firefox’s native
<code><video></code> controls to provide consistency, regardless of technology used.
</dd>
<dt><a href="http://open.pages.kevinwiliarty.com/external-video-for-everybody/" rel="external">External Video for Everybody</a></dt>
<dd>
A WordPress plugin that provides a shortcode to insert video using Video for Everybody. The author has also
<a href="http://kevinwiliarty.com/dokuwiki/doku.php/open/vfe_bash_script" rel="external">provided</a> an
excellent bash script to automate the process of encoding the video files.
</dd>
<dt><a href="http://soukie.net/degradable-html5-audio-and-video-plugin/" rel="external">Degradable HTML5 audio and video Plugin</a></dt>
<dd>
Another WordPress plugin. It doesn’t use VfE, but does provide HTML5 video and Flash fallback.
</dd>
</dl>
<h2 id="acknowledgements">Acknowledgements</h2>
<ul>
<li><a href="http://steveheffernan.com/" rel="external">Steve Haffernan</a> for
<a href="http://videojs.com" rel="external">video.js</a> and demonstrating the better
<code>flashvars</code> method</li>
<li>Val Cohen for spotting the ASP problem with VfE_QT</li>
<li>Guido García for Blackberry Bold 9000 / Curve 8900 & Nokia N96 testing</li>
<li>Corey Weiner for iPad testing</li>
<li><a href="http://zeno.name" rel="external">Zeno Crivelli</a>
(<a href="http://jilion.com/sublime/video" rel="external">SublimeVideo</a>)</li>
<li>Terrell Kelley for spotting the Firefox 3.0 bug with self-closing <code>source</code> elements</li>
<li><a href="http://webop.de/users/69" rel="external">André M. Åslund</a> of
<a href="http://vorwaerts-gmbh.de" rel="external">Vorwärts GmbH</a> for the current hosting of the video
files</li>
<li><a href="http://volicol.com" rel="external">Mike Hadfield</a> for the <a href="/link/dasein">VfE
Playback</a> button</li>
<li><a href="http://bluishcoder.co.nz" rel="external">Chris Double</a> for previously hosting the video files</li>
<li><a href="http://longtailvideo.com" rel="external">LongTail Video</a> for
<a href="http://longtailvideo.com/players/jw-flv-player/" rel="external">JWPlayer</a>, the Flash fallback
player</li>
<li>Everybody who has promoted it, thank you</li>
</ul>
</section>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
</article>
<footer>
<a href="mailto:kroccamen@gmail.com">kroccamen@gmail.com</a>
<nav>view-source:
<a href="/code/video_for_everybody.rem">Rem</a> •
<a href="/code/video_for_everybody.html">HTML</a> •
<a href="/design/">CSS</a> •
<a href="/.system/">PHP</a> •
<a href="/.htaccess">.htaccess</a>
</nav>
<form method="get" action="http://google.com/search">
<input type="hidden" name="as_sitesearch" value="camendesign.com" />
<input type="search" name="as_q" placeholder="search…" />
<input type="submit" value="Go" />
</form>
</footer>
<!-- =================================================================================================== code is art === -->