<!DOCTYPE html>
<!-- ========================================== kroc camen of camen design ============================================= -->
<title>blog · An Open Letter to Mozilla Regarding Their Use and Promotion of HTML5 Video</title>
<link rel="stylesheet" type="text/css" href="/design/design.css" />
<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=no" />
<link rel="alternate" type="application/rss+xml" href="/blog/rss" title="Just blog" />
<link rel="canonical" href="/blog/letter_to_mozilla_re_video" />
<!-- =================================================================================================================== -->
<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>
		<li><a href="http://forum.camendesign.com">forum</a></li>
	</ul><ul>
		<li><a href="/quote/">quote</a></li>
		<li><a href="/writing/">writing</a></li>
		<li><a href="/blog/" rel="tag">blog</a></li>
		<li><a href="/photo/">photo</a></li>
		<li><a href="/code/">code</a></li>
		<li><a href="/art/">art</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="/eve/">eve</a></li>
		<li><a href="/code-is-art/">code-is-art</a></li>
		<li><a href="/inspiration/">inspiration</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="/mac/">mac</a></li>
		<li><a href="/osnews/">osnews</a></li>
		<li><a href="/c64/">c64</a></li>
		<li><a href="/linux/">linux</a></li>
	</ul>
	<a rel="previous" href="/blog/of_netbooks">
		older article →
	</a><a rel="next" href="/blog/flash-week">
		← newer article
	</a></nav>
</header>
<!-- =================================================================================================================== -->
<article><header>
	<!-- date published or updated -->
	<time pubdate datetime="2009-06-23T12:24:00+01:00">
		<sup>12:24<abbr>pm</abbr> • 2009</sup>
		<abbr title="June">Jun</abbr> 23
	</time>
	<!-- categories -->
	<ul>
		<li><a href="/blog/letter_to_mozilla_re_video" rel="bookmark tag">blog</a></li>
		<li><a href="/web-dev/letter_to_mozilla_re_video">web-dev</a></li>
		<li><a href="/code-is-art/letter_to_mozilla_re_video">code-is-art</a></li>
		<li><a href="/annoyances/letter_to_mozilla_re_video">annoyances</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>An Open Letter to Mozilla Regarding Their Use and Promotion of HTML5 Video</h1>


<h2>Update:</h2>
<p>
	<strong>Success!</strong> Mozilla have
	<a href="http://hacks.mozilla.org/2009/06/html5-video-fallbacks-markup/" rel="external">published a new
	article</a> on <a href="http://hacks.mozilla.org" rel="external">hacks.mozilla.org</a> describing HTML5 Video
	with fallbacks and even link to <a href="/code/video_for_everybody">Video for Everybody</a>!
</p><p>
	<del>Even better news though is the actual use of Video for Everybody on a new page demonstrating
	“<a href="http://mozilla.com/en-US/firefox/video/firefox-3.5.html" rel="external">What’s New in Firefox
	3.5</a>”! This is a great stride ahead for sensible and forward-facing video embedding in websites.</del>
	<ins>well that didn’t last long</ins>
</p><p>
	I would like to thank Mozilla for their support and putting up with my ranting, and also all those who signed the
	letter and supported me on Twitter, OSNews and elsewhere on the ’Web.
</p>

<hr />

<p>
	<strong>Dear Mozilla</strong>,<br />
	The content of this letter is based upon
	<a href="http://hacks.mozilla.org/2009/06/html5-video-fallbacks/" rel="external">this blog post</a> at the
	<a href="http://hacks.mozilla.org" rel="external">hacks.mozilla.org</a> initiative.
</p><p>
	HTML5 video is coming, and a million web-developers up and down the ’Web will be soon looking for advice and
	sample code to make use of HTML5 video. Web-developers vary massively in skill and understanding of the open
	principles of web-development, promoted by yourselves via the
	<a href="http://mozilla.org/about/manifesto.en.html" rel="external"><cite>Mozilla Manifesto</cite></a>.
</p><p>
	We cannot expect all developers to understand the knock-on effect of code snippets that they are copy-pasting from
	people’s sites. It is one thing to educate people with a piece of code, it is another to communicate effectively
	the principles behind a piece of code. Some developers do not care, and never will—that is a fact of life.
</p><p>
	In presenting a JavaScript-only method for using HTML5 video, you are promoting to developers a number of major
	drawbacks, counter-intuitive to the points outlined in the <cite>Mozilla Manifesto</cite>.
</p>
<dl>
	<dt>Accessibility</dt>
	<dd>
		Screen-readers may be presented with a hurdle by a JavaScript solution. Users may also be using browsers
		that developers are very unlikely testing in, who may inadvertedly break support by using JavaScript
		features that are either not present, or not compatible with JavaScript implementations in these browsers.
		Requiring JavaScript may also hinder use of
		<a href="http://w3.org/WAI/intro/aria" rel="external"><abbr>WAI-ARIA</abbr></a>.
	</dd>
	<dt><code>&lt;video&gt;</code> is an element, not a JavaScript object</dt>
	<dd>
		<p>
			In other blog posts you have promoted the <code>&lt;video&gt;</code> element as a glorified
			<code>&lt;img&gt;</code> element—being fundamentally a part of the document with all the same
			capabilities CSS-wise. Some
			<a href="http://zachstronaut.com/lab/isocube.html" rel="external">incredible examples</a> have
			been demonstrated that go well beyond what is possible with plugins.
		</p><p>
			Just as you would never expect JavaScript to be required just to view an image (and bad code be
			responsible if so), the same should be true of video.
		</p>
	</dd>
	<dt>JavaScript still has no solid security model</dt>
	<dd>
		By requiring JavaScript, you are also requiring people to switch on JavaScript for sites that they may
		otherwise not trust. Viruses and malware have travelled far by hiding behind videos, and XSS attacks could
		be done by forcing people to enable JavaScript for a site so they can see a video.
	</dd>
	<dt>Non-aggregatable, mashable</dt>
	<dd>
		<p>
			The use of JavaScript promotes a traditional browser-centric model. As a document format, HTML
			goes beyond just the traditional ‘web-browser’ and may be parsed in many ways and environments
			outside of the traditional browser.
		</p><p>
			RSS aggregators (particularly web-based ones) may not execute JavaScript as a safety measure, thus
			preventing the user from seeing the content.
		</p><p>
			Robots and spiders also would not be able to spider HTML5 video content if it is only present with
			JavaScript. That alone could prevent all kinds of innovation that we cannot yet conceive. What if
			a TV station could be created using nothing but <code>&lt;video&gt;</code> tags found on the
			’Web? Requiring JavaScript to see <code>&lt;video&gt;</code> largely puts a stop to mash-ups
			wanting to pull video from the ’Web.
		</p>
	</dd>
</dl>


<h2>A Solution Has Been Presented</h2>
<p>
	A solution for using HTML5 video with fallbacks for Adobe Flash, QuickTime and Windows Media Player that works on a
	wide range of browsers without the need for JavaScript has been developed, it’s called
	“<a href="/code/video_for_everybody">Video for Everybody</a>”.
</p>
<blockquote>
	<p>
		The market is made up of more OSes, browsers and processor architectures than it was five years ago. More
		people (especially geeks) are browsing with AdBlock / NoScript / FlashBlock than ever before. We can no
		longer just assume people are going to have Flash and are allowing you to use it.
	</p><p>
		The same rules apply to video. If my platform / device / browser of choice cannot see your video, or you do
		not offer me the means to download the video to view offline, then I don’t see whatever it is you’ve
		got to show me.
	</p>
	<cite>Kroc Camen: <a href="/code/video_for_everybody">“Video for Everybody”</a></cite>
</blockquote>
<p>
	It helps web-developers promote HTML5 video as an equal citizen alongside Flash and QuickTime. The necessary
	playback is chosen automatically based on browser / operating system capabilities, all without JavaScript. If the
	video is not able to play within the browser helpful fallback text is displayed to offer the users a means of
	downloading the video file, or how to get the video to play in the webpage by installing an HTML5-capable browser,
	Flash or QuickTime.
</p><p>
	This means that it is almost impossible for the user to not be able to view the video—one way or another—and
	they are not hindered from viewing the content by bad design decisions such as requiring JavaScript to use a native
	HTML tag.
</p>


<h2>What You Can Do</h2>
<p>
	I ask you to please do the following:
</p>
<dl>
	<dt>Remove the content of that blog post and replace it with new content that covers two main factors:</dt>
	<dd>
		<ol>
			<li>
				<p>
					How to insert HTML5 video using HTML and providing levels of fallback for legacy
					systems
				</p>
			</li><li>
				<p>
					Why providing good fallback options / text is so important to a range of users
					and devices, and therefore why JavaScript should only be used to enhance a
					solution rather than be a requirement
				</p>
			</li>
		</ol>
	</dd>
	<dt>Adopt HTML5 video (with fallbacks) across all Mozilla branded blogs, sites and ’Web properties, unilaterally</dt>
	<dd>
		<p>
			I personally don’t have Flash installed, it is—after all—an optional install, and I don’t
			like what it does to my computer. It seems counter to the work you are doing providing HTML5 video
			in your browser that I cannot see your
			<a href="http://blog.mozilla.com/addons/2009/06/10/introducing-add-on-collections/" rel="external">own
			announcements</a>.
		</p><p>
			I believe Mozilla need to make a company-wide (and community-wide) commitment to using HTML5 video
			in all of their ventures—past, present and future.
		</p>
	</dd>
</dl>

<hr />

<p>
	<strong>Signed:</strong><br />
	(the undersigned)
</p>
<ul>
	<li>Kroc Camen—<small><a href="http://camendesign.com" rel="external">camendesign.com</a>—HTML5
	web-developer, <em>publicus defensor</em></small></li>
	<li>John
	Drinkwater—<small><a href="http://johndrinkwater.name" rel="external">johndrinkwater.name</a>—Open
	Web Cheerleader</small></li>
	<li>Thom Holwerda—<small><a href="http://cogscanthink.blogsome.com/" rel="external">Cogs Can
	Think</a>—OSNews Managing Editor</small></li>
	<li>Carlos
	Martins—<small><a href="http://abertoatedemadrugada.com" rel="external">abertoatedemadrugada.com</a>—Web
	Developper / Programmer / Blogger</small></li>
	<li>Brad
	Cooper—<small><a href="http://willworkforart.net" rel="external">willworkforart.net</a>—<dfn title="User Experience">UX</dfn>
	/ Interface Designer</small></li>
	<li>Nick
	Stevens—<small><a href="http://twitter.com/nickstevens" rel="external">twitter.com/nickstevens</a>—Web
	Designer / Developer</small></li>
	<li>Mike Laughton—<small><a href="http://libdmtx.org" rel="external">libdmtx.org</a>—Occasional Web
	Developer</small></li>
	<li>Jordan Spencer
	Cunningham—<small><a href="http://ipfsquared.wordpress.com" rel="external">ipfsquared.wordpress.com</a>—Author
	/ OSNews Editor / Upstanding Blogger</small></li>
	<li>Antoni Grzymala—<small><a href="mailto:antoni@grzymala.info">antoni@grzymala.info</a>—Systems
	Administrator and integrator with a special focus on accessibility</small></li>
	<li>Kurtis Nusbaum—<small><a href="mailto:klnusbaum@gmail.com">klnusbaum@gmail.com</a>—Web Designer /
	Programmer / Trilinos Developer / Blogger</small></li>
	<li>Neil Santos—<small><a href="http://dpi.sourceforge.net" rel="external">dpi.sourceforge.net</a>—Head
	code monkey and mad tinkerer for Qool Media</small></li>
	<li>Justin Burris—<small><a href="http://prxi.net" rel="external">prxi.net</a>—Interested in mobile
	devices, web interfaces, AI, OSs and programming languages</small></li>
	<li>Evert Mouw—<small><a href="http://animamundi.eu" rel="external">animamundi.eu</a>—part-time system
	administrator, student of medical informatics and political science</small></li>
	<li>Ricardo Governa—<small><a href="http://ricardo.governa.net" rel="external">ricardo.governa.net</a>—New
	Technologies / Media / Telecommunications Consultant</small></li>
	<li>Torbjørn Vik
	Lunde—<small><a href="http://twitter.com/torbjornlunde" rel="external">twitter.com/torbjornlunde</a>—Graphic
	Designer / Web Designer</small></li>
	<li>Morgan Johnson—<small><a href="mailto:morgan@kf4ytr.com">morgan@kf4ytr.com</a>—Occasional Web
	Developer</small></li>
	<li>Witold Krakowski—<small><a href="mailto:wkrakowski@gmail.com">wkrakowski@gmail.com</a>—System
	Administrator and occasional web developer</small></li>
	<li>Fernando Medina—<small><a href="http://tunicaragua.com" rel="external">tunicaragua.com</a>—Operate a
	retail site with need for video</small></li>
	<li>Dave Snowdon—<small><a href="http://davesnowdon.com" rel="external">davesnowdon.com</a>—Professional
	web developer</small></li>
	<li>Xavier Mouton-Dubosc—<small><a href="http://dascritch.net" rel="external">dascritch.net</a>—Freelance
	Web Developer</small></li>
	<li>Nikolai Lifanov—<small><a href="http://lifanov.com" rel="external">lifanov.com</a>—Network
	Administrator</small></li>
	<li>Vince
	Tingey—<small><a href="http://michaelsmith.ubc.ca" rel="external">michaelsmith.ubc.ca</a>—Sysadmin at
	the Michael Smith Laboratories, UBC, BC, Canada</small></li>
	<li>Marcin Szewczyk, Wodny—<small><a href="http://wodny.org" rel="external">wodny.org</a>—C/C++
	programmer, network admin, OSS fan and occasional web developer</small></li>
	<li>Leandro
	Guimarães—<small><a href="http://dutras.blogspot.com" rel="external">dutras.blogspot.com</a>—Data
	Admin, PostgreSQL community member, free software supporter</small></li>
	<li>Georgi Ivanov—<small><a href="http://netage.bg" rel="external">netage.bg</a>—Web Developer</small></li>
	<li>Andrew Pam—<small><a href="http://sericyb.com.au" rel="external">sericyb.com.au</a>—Software
	Developer, researcher and Open Source advocate</small></li>
	<li>C. Williams—<small><a href="mailto:penquincoder@gmail.com">penquincoder@gmail.com</a>—System Admin /
	Web Developer</small></li>
	<li>Ville Koskinen—<small><a href="mailto:vrkosk@iki.fi">vrkosk@iki.fi</a>—Bioinformatics software
	engineer</small></li>
	<li>Ross McDonald—<small>Professional Web Developer working with open technologies, all cross platform</small></li>
	<li>Andy Elvey—<small>Analyst / Programmer and Intranet <ins><em>sic</em></ins> report-writer</small></li>
	<li>Kristian Meier—<small>Web application developer and web security analyst</small></li>
	<li>Rei Kagetsuki—<small>Software and Hardware Design and Development</small></li>
	<li>Anthony Harris—<small>Novice web developer and game designer</small></li>
	<li>Kiefer O. Hicks—<small>bleeding edge web programmer</small></li>
	<li>Loris Cuoghi—<small>Occasional Web developer</small></li>
	<li>Fernando Scandolo—<small>Web app developer</small></li>
	<li>Markus Ingalsuo</li>
	<li>Kirby Dunsmore</li>
	<li>Robert Watkins</li>
	<li>L.J. Boatwright</li>
	<li>Ryan Quinn</li>
	<li>Steven Rowat</li>
</ul>
</section>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
</article>
<footer>
	<nav><a href="http://forum.camendesign.com">‹ Discuss this in the Forum ›</a></nav>
		
	<a href="mailto:kroc@camendesign.com">kroc@camendesign.com</a>
	<nav>view-source:
		<a href="/blog/letter_to_mozilla_re_video.rem">Rem</a> •
		<a href="/blog/letter_to_mozilla_re_video.html">HTML</a> •
		<a href="/design/">CSS</a> •
		<a href="/.system/">PHP</a> •
		<a href="/.htaccess">.htaccess</a>
	</nav>
	<form method="get" action="https://duckduckgo.com">
		<input type="hidden" name="sites" value="camendesign.com" />
		<input type="search" name="q" placeholder="search…" />
		<input type="submit" value="Go" />
	</form>
</footer>
<!-- =================================================================================================== code is art === -->