Acorn Media Player

jQuery HTML5 media player

Demos

Defaults

This uses the default options, with the default 'access' theme.

Just include the theme CSS and call the plugin.

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

jQuery('video').acornMediaPlayer();

accesslight Child Theme

Being a child theme of access, the styles for accesslight are included in the main theme's CSS.

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

Now call the plugin with the themes option.

jQuery('video').acornMediaPlayer({
	themes: 'access accesslight'
});

Darkglass theme and vertical volume slider

darkglass only works properly with vertical volume sliders.

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

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

darkglasssmall Child Theme

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

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

barebones Theme

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

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

barebones Theme with native sliders

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

jQuery('video').acornMediaPlayer({
	theme: 'barebones',
	nativeSliders: true
});

A word about the markup

If you take a look at the source of these demos, you can see I'm using a Wikipedia-like style of marking-up both <video> and <audio>, using the HTML 5 elements <figure> and <figcaption>.

<figure>
	<video controls="controls" width="826" height="330" poster="website/images/tos-poster.jpg" preload="metadata" aria-describedby="full-descript">
		<source type="video/webm" src="/tears_of_steel_240.webm" />

		<track src="subs/TOS-arabic.srt" kind="subtitles" srclang="ar" label="Arabic" />
		...

		You can download Tears of Steel at <a href="http://mango.blender.org/">mango.blender.org</a>.
	</video>
	<figcaption id="full-descript">
		<p><em>"Tears of Steel"</em> was realized with crowd-funding by users of the open source 3D creation tool <a href="http://www.blender.org">Blender</a>. 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. </p>
		<p>(CC) Blender Foundation - <a href="http://www.tearsofsteel.org">http://www.tearsofsteel.org</a></p>
	</figcaption>
</figure>

You can also notice I'm linking the <figure> and <figcaption> using aria-describedby.

Using the aria-describedby attribute makes screen readers and other AT read the media element description first, before reaching the controls.

This goes for both the <audio> and <video>, and is done for accessibility and semantic markup.

You don't have to use this markup. A simple video or audio element will do.