Accessible and Customizable jQuery HTML5 Media Player - Acorn Media Player

File Size: 149 KB
Views Total: 3480
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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:

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.