http://camendesign.com/code/video_for_everybody



<!-- "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 iOS3 if you include the poster attribute! fixed in iOS4.0 -->
<video width="640" height="360" controls preload="none">
	<!-- MP4 must be first for iPad! -->
	<source src="__VIDEO__.MP4" type="video/mp4" /><!-- MPEG-4/H.264: Chrome 3 - 9 / Safari 4+ / IE 9+ w/VP8 codec installed in OS -->
	<source src="__VIDEO__.WEBM" type="video/webm" /><!-- WebM/VP8: Chrome 10+ / Firefox 4+ / Opera 10.60+ -->
	<source src="__VIDEO__.OGV" type="video/ogg" /><!-- Ogg/Theora: Chrome 3+ / Firefox 3.5+ / Opera 10.50+ -->
	<!-- 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>


<!-- Video for Everybody, Kroc Camen of Camen Design -->
<video width="640" height="360" controls preload="none">
	<source src="__VIDEO__.M3U8" type="application/x-mpegURL" />
	<source src="__VIDEO__.MP4"  type="video/mp4" />
	<source src="__VIDEO__.WEBM"  type="video/webm" />
	<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>



<!-- Video for Everybody with autoplay, 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>

================================================================================

<h1>“Video For Everybody” (QuickTime) Test Page</h1>
http://camendesign.com/code/video_for_everybody/test_qt.html
<p>
	Full write-up article <a href="/code/video_for_everybody">here</a>.<br />

	This is an old version of VfE that utilises QuickTime before Flash.
	See the <a href="test.html">test page for the latest version</a>.
</p><p>
	Hosting of the video generously provided by<br />
	<a href="http://webop.de/users/69">André M. Åslund</a> of <a href="http://vorwaerts-gmbh.de">Vorwärts GmbH</a>.
</p>

<!-- "Video For Everybody" v0.3.3 by Kroc Camen of Camen Design <http://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! we're awaiting a fix from apple -->
<video width="640" height="360" controls autoplay>
	<!-- MP4 must be first for iPad! you must use `</source>` to avoid a closure bug in Firefox 3.0 / Camino 2.0! -->
	<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4"><!-- Safari / iPhone video    --></source>
	<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg"><!-- Firefox native OGG video --></source>
	<!-- IE only QuickTime embed: IE6 is ignored as it does not support `<object>` in `<object>` so we skip QuickTime
	     and go straight to Flash further down. the line break after the `classid` is required due to a bug in IE -->
	<!--[if gt IE 6]>
	<object width="640" height="375" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"><!
	[endif]-->
	<!-- non-IE QuickTime embed (hidden from IE): the self-closing comment tag allows non-IE browsers to
	     see the HTML whilst being compatible with serving as XML -->
	<!--[if !IE]><!-->

	<object width="640" height="375" type="video/quicktime" data="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">
	<!--<![endif]-->
	<param name="src" value="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" />
	<param name="showlogo" value="false" />
	<param name="autoplay" value="true" />
	<!-- fallback to Flash -->
	<object width="640" height="384" type="application/x-shockwave-flash"
		data="player.swf?autostart=true&amp;image=poster.jpg&amp;file=http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">
		<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
		<param name="movie" value="player.swf?image=poster.jpg&amp;file=http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" />

		<!-- fallback image -->
		<img src="poster.jpg" width="640" height="360" alt="Big Buck Bunny"
		     title="No video playback capabilities, please download the video below" />
	</object><!--[if gt IE 6]><!-->
	</object><!--<![endif]-->
</video>
<!-- you *must* offer a download link as they may be able to play the file locally. customise this bit all you want -->
<p>	Download Video:	<a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">Apple iTunes "MP4"</a> |
			<a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv">Open Format "OGG"</a>

</p>
<!-- =================================================================================================================== -->