Acorn Media Player

How to use

1. Mark-up your <audio> and <video>

Properly mark-up your videos, and make sure they work, without the player. It's also a good time to consider fallbacks.

2. Include jQuery and jQuery UI Slider

Since this is a jQuery plugin, you'll need to include jQuery. You can include it from Google's CDN.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

You don't have to include the whole jQuery UI, you'll only have to include the jQuery UI Slider component. You can create your own custom jQuery UI build on the jQuery UI website.

<script src="/path/to/jquery-ui-custom.js"></script>

3. Include specific JavaScript and CSS for Acorn Media Player

You'll need to include one JavaScript file

<script src="/path/to/jquery.acornmediaplayer.js"></script>

and one CSS file

<link href="/path/to/acornmediaplayer.base.css" rel="stylesheet" type="text/css">

4. Include the Theme(s)

The base CSS file you just included does not provide any themes. Themes are located in other external CSS files.

<link href="/path/to/themes/acorn.theme.css" rel="stylesheet" type="text/css">

See the themes included by default in the Themes section.

5. Call the plugin

When you're done including everything, call the plugin on the elements you want using a jQuery selector.

<script>
	$(document).ready(function() {
		$('video, audio').acornMediaPlayer();
	});
</script>

This will initialize the player using the default options. See the available options bellow.

Options

These are the themes included with the player:

Themes

These are the themes included with the player:

• access(default theme)

  Includes child theme accesslight

• darkglass

  Includes child theme darkglasssmall

• barebones