index.html

---
layout: default
---

<div class="jumbotron">
	<video id="earth" autoplay loop>
		<source type="video/mp4"  src="/videos/earth.mp4" />
		<source type="video/webm" src="/videos/earth.webm" />
	</video>

	<div>
		<p>A unique, intuitive and powerful framework for media playback.</p>
		<a class="btn btn-lg btn-download" href="/download/"><i class="icon-download-alt"></i> Download</a>
	</div>

	<script src="/js/fabuloos-1.0.0-alpha.min.js"></script>
	<script>fab("earth").on("playing", function() { this.element().className = "playing"; });</script>
</div><!-- end of #jumbotron -->

<section id="featured" class="row">
	<div class="col-md-4 col-sm-4">
		<h3>Design for All Screens</h3>
		<p>Fabuloos is a full-featured framework which can play any video, audio, or even YouTube stream on all the popular desktop browsers, tablets and mobile devices. Through a consistent UI, Fabuloos provides the best possible user experience in every moment.</p>
	</div>
	<div class="col-md-4 col-sm-4">
		<h3>Unified API for Media</h3>
		<p>Fabuloos offers a radically faster, cleaner and simpler approach for building top quality media players, based on open standards, whatever the development environment. Fabuloos conceals the complexity of playback technologies in an unique and intuitive API.</p>
	</div>
	<div class="col-md-4 col-sm-4">
		<h3>Full Experience</h3>
		<p>Fabuloos can be used to create interactive experiences, web documentaries, slides alongside a video, or second screen apps. Fabuloos is fully modular, supports playlists, skinning, subtitles and other plugins to assemble exactly the perfect player.</p>
	</div>
</section><!-- end of #featured -->

<hr class="section-line" />

<section id="how">
	<h1>How It Works</h1>

	<ul class="nav nav-tabs">
		<li class="active"><a data-toggle="tab" href="#browsers"><i class="icon-html5"></i> Browsers</a></li>
		<li><a data-toggle="tab" href="#ios"><i class="icon-apple"></i> iOS</a></li>
		<li><a data-toggle="tab" href="#android"><i class="icon-android"></i> Android</a></li>
		<li><a data-toggle="tab" href="#windows"><i class="icon-windows"></i> Windows</a></li>
	</ul>

	{% include getting-started.html %}
</section><!-- end of #how -->

<hr class="section-line" />

<section id="contribute">
	<h1>How to Contribute</h1>
	<p class="lead">We truly believe that openness and innovation are key to a better world where everyone can be free to learn and progress with others. Please contribute to keep the project alive.</p>
	<div class="col-sm-7">
		<p>If you &hearts; Fabuloos, first of all: <strong>thank you</strong>. You can help us making it even better.</p>
		<p>One of the most important things you can do is to <strong>spread the word</strong>, talk about it (even if you are critical), use it (push it to the limits!) and if you find something missing or broken, <a href="https://github.com/egeny/fabuloos-js/issues/new">request a feature</a> or <a href="https://github.com/egeny/fabuloos-js/issues/new">report a bug</a>.</p>
		<p>If you are confident with writing code, you can also write (awesome) <a href="/documentation/plugins.html">plugins</a> and <a href="/documentation/renderers.html">renderers</a>. Feel free to join us as a contributor by forking and asking for pull requests.</p>
		<p>And last but not least, if you integrate fabuloos into a commercial product, or for any other reason, please donate to the project by clicking on the button.</p>
	</div>
	<div class="col-sm-5 text-center">
		<img width="200" height="100" src="/img/ilovefab.svg" alt="I ♥ fab" onerror="swap(this)" />
		<p><a class="btn btn-lg btn-primary" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=9TDJJQN2K74DE">Donate to the project</a></p>
		<p class="small">You will be taken to the PayPal website. Note that you do not have to create a PayPal account in order to donate money.</p>
		<img width="1" height="1" src="https://www.paypalobjects.com/fr_FR/i/scr/pixel.gif" alt="" />
	</div>
</section><!-- end of #donation -->