Acorn Media Player

Download Demo

Features

• 
  

  Accessibility

  
  

  Acorn Media Player is built with accessibility in mind.

  
  

  It provides full keyboard access using standard tab-based navigation, screen-reader (and other AT) support, accessible themes, and other accessibility tweaks.



• 
  

  Closed-Captions

  
  

  This is no native support for closed captioning on HTML5 <video> yet, but that shouldn’t stop you from providing them.

  
  

  It supports external SRT files just like desktop media players.



• 
  

  Transcript

  
  

  Along with closed captions support, the player provides a dynamic transcript generated from the selected captions.



• 
  

  Other features

  
  

  Other notable features include:

  
  
  • Easy customization and theming
  
  
  • Fullscreen support
  
  
  • Buffering indicator
  
  
  • <audio> support
  
  
  • Loading indicator
  
  
  • Remembers volume level using HTML5 LocalStorage
  
  
  • Easy to use, understand and adapt
  
  
  • Free and Open Source
  
  

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:

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.

Themes

These are the themes included with the player:

• access(default theme)Includes child theme accesslight


• darkglassIncludes child theme darkglasssmall


• barebones

Acorn Media Player