Acorn Media Player

jQuery HTML5 media player

"Tears of Steel" was realized with crowd-funding by users of the open source 3D creation tool Blender. Target was to improve and test a complete open and free pipeline for visual effects in film - and to make a compelling sci-fi film in Amsterdam, the Netherlands.

(CC) Blender Foundation -

See more demos




You can download the latest version from GitHub.


Acorn Media Player is a HTML5 media player with a focus on accessibility and customization.

Articles describing it's development:


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=""></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.

	$(document).ready(function() {
		$('video, audio').acornMediaPlayer();

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


These are the themes included with the player:

Key Default value Description
theme 'access'

Theme to be used by media player. The value is added as an extra class to the gallery wrapper.

You can also provide multiple values (just like adding multiple classes to an element). Some themes provide child themes, which build on, or modify the main theme. So, if you want to use 'accesslight', a child theme of 'access' you'll have to use 'access accesslight'.

Remember to include the theme.

nativeSliders false

More of an experimental feature. Whether or not to use <input type="range"> controls instead of jQuery UI sliders, for the seek and volume slider.

Can be true or false.

volumeSlider 'horizontal'

The direction of the volume slider, to be used with the jQuery UI Slider.

Can be horizontal or vertical.

captionsOn false

If true, the first caption will be selected by default.

Can be true or false.

tooltipsOn true

Show a tooltip for the hovered player control.

Can be true or false.


These are the themes included with the player:


See on Github


Please report any issues on GitHub. I'm very open to pull-requests.


Acorn Media Player is licensed under the MIT license.


You can use the Webshim Polyfill for supporting older browsers, and other cross-browser goodies. Thanks to aFarkas!

Check the source, it's used on these pages.