Accessible and Customizable jQuery HTML5 Media Player - Acorn Media Player

Acorn Media Player is a jQuery plugin for creating accessible, highly customizable, and themeable HTML5 video & audio players on your web page.

Features:

• Fullscreen support
• 3 built-in themes: access(default theme), darkglass and barebones
• Buffering indicator
• <audio> support
• Loading indicator
• Remembers volume level using HTML5 LocalStorage
• Full keyboard access using standard tab-based navigation
• Screen-reader (and other AT) support
• Supports external SRT files just like desktop media players
• Provides a dynamic transcript generated from the selected captions.

See also:

• Simple and Clean jQuery Html5 Audio Player Plugin
• Cross Platform HTML5 Audio & Video Player For jQuery - jPlayer
• HTML5 & Flash Video Player - FlareVideo
• HTML5 Video and Audio Player Plugin - MEjs
• Amazing Music Player Plugin with jQuery and HTML5
• Customized HTML5 Audio Player with jQuery
• HTML5 Video Player with jQuery and CSS3 - video-js

Basic Usage:

1. Include jQuery javascript library and jQuery UI Slider component on your web page. Use the jQuery UI download builder to create your own jQuery UI build.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="js/jquery-ui-custom.js"></script>

2. Include jQuery Acorn Media Player plugin and basic CSS file on your web page.

<script src="js/jquery.acornmediaplayer.js"></script>
<link href="css/acornmediaplayer.base.css" rel="stylesheet" type="text/css">

3. Choose and include a theme css on your web page.

<link href="themes/barebones/acorn.barebones.css" rel="stylesheet" type="text/css">

4. Emebed a video player in your web page using HTML5 video elements.

<video id="demo" controls="controls" width="600" height="450" poster="poster.jpg" preload="metadata" aria-describedby="full-descript">
<source type="video/webm" src="demo.webm" />
<source type="video/mp4" src="demo.mp4" />
</video>

5. Call the plugin with options.

jQuery('video').acornMediaPlayer({
theme: 'darkglass',
});

6. Call the plugin with options.

jQuery('video').acornMediaPlayer({
theme: 'access',
nativeSliders: false, // Whether or not to use <input type="range"> controls instead of jQuery UI sliders, for the seek and volume slider.
volumeSlider: 'horizontal', // The direction of the volume slider, to be used with the jQuery UI Slider.
captionsOn: false, // If true, the first caption will be selected by default.
tooltipsOn: true // Show a tooltip for the hovered player control.
});

---

This awesome jQuery plugin is developed by ghinda. For more Advanced Usages, please check the demo page or visit the official website.