forked from ghinda/acornmediaplayer
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
247 lines (221 loc) · 11.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Acorn Media Player, Accessible and customizable HTML5 media player</title>
<link href="website/css/amp-page-base.css" rel="stylesheet" type="text/css" />
<script src="jquery/jquery.js"></script>
<script src="jquery/jquery-ui.js"></script>
<!-- Acorn Media Player specific -->
<link href="acornmediaplayer/acornmediaplayer.base.css" rel="stylesheet" type="text/css">
<script src="acornmediaplayer/jquery.acornmediaplayer.js"></script>
<!-- Theme -->
<link href="acornmediaplayer/themes/access/acorn.access.css" rel="stylesheet" type="text/css">
<!-- Call the plugin -->
<script>
jQuery(function() {
jQuery('video, audio').acornMediaPlayer();
});
</script>
</head>
<body>
<h1>
Acorn Media Player
<p>jQuery Plugin</p>
</h1>
<span class="version">Ver 1.6</span>
<section>
<figure>
<video controls="controls" width="826" height="352" preload="metadata" aria-describedby="full-descript">
<!--
<source src="https://acornmediaplayer.appspot.com/Elephants_Dream_320.mp4" />
<source src="https://acornmediaplayer.appspot.com/Elephants_Dream_320.webm" />
-->
<source src="http://acorn-media-player-media.googlecode.com/files/Elephants_Dream_320.mp4" />
<source src="http://acorn-media-player-media.googlecode.com/files/Elephants_Dream_320.webm" />
<track src="subs/afrikaans.srt" kind="subtitles" srclang="en" label="Afrikaans" />
<track src="subs/arabic.srt" kind="subtitles" srclang="de" label="Arabic" />
<track src="subs/brazilian.srt" kind="subtitles" srclang="es" label="Brazilian" />
<track src="subs/bulgarian.srt" kind="subtitles" srclang="fr" label="Bulgarian" />
<track src="subs/chinese.srt" kind="subtitles" srclang="it" label="Chinese" />
<track src="subs/french.srt" kind="subtitles" srclang="nl" label="French" />
<track src="subs/hungarian.srt" kind="subtitles" srclang="pl" label="Hungarian" />
<track src="subs/romanian.srt" kind="subtitles" srclang="pt" label="Romanian" />
<track src="subs/spanish.srt" kind="subtitles" srclang="pt" label="Spanish" />
You can download Elephant's Dream at <a href="http://orange.blender.org/">orange.blender.org</a>.
</video>
<figcaption id="full-descript">
<p><em>Elephants Dream</em> is the world’s first open movie, made entirely with open source graphics software such as <a href="http://www.blender.org">Blender</a>, and with all production files freely available to use however you please, under a <a href="http://www.creativecommons.org">Creative Commons</a> license. </p>
<p><a href="http://orange.blender.org/">orange.blender.org</a></p>
</figcaption>
</figure>
</section>
<section id="demos">
<a href="demos.html" id="demo-button">See more demos</a>
<h2>Demos</h2>
</section>
<section id="download">
<a href="https://github.com/ghinda/acornmediaplayer/zipball/gh-pages" id="download-button">Download</a>
<h2>Download</h2>
<p>You can download the latest version from <a href="https://github.com/ghinda/acornmediaplayer">GitHub</a>. </p>
</section>
<section id="about">
<h2>About</h2>
<p>Acorn Media Player is a jQuery plugin implementing a custom HTML5 <video> player with a special focus on accessiblity and customization. </p>
<p>It started as a proof-of-concept, for an article about <a href="http://dev.opera.com/articles/view/custom-html5-video-player-with-css3-and-jquery/">building a custom HTML5 video player with CSS3 and jQuery</a> on <a href="http://dev.opera.com">Dev.Opera.com</a>. </p>
<p></p>
</section>
<section id="features">
<h2>Features</h2>
<ul>
<li>
<h3 class="access-icon">Accessiblity</h3>
<p>Acorn Media Player is built with accessibility in mind. </p>
<p>It provides full keyboard control using standard tab-based navigation, screen-reader (and other <abbr title="Assistive Technologies">AT</abbr>) support, accessible themes, and other accessibility tweaks. </p>
</li>
<li>
<h3 class="caption-icon">Closed-Captions</h3>
<p>This is yet no native support for closed captioning on HTML5 <video>, but that shouldn't stop you from providing them. </p>
<p>It supports external SRT files just like “real” media players. </p>
</li>
<li>
<h3 class="transcript-icon">Transcript</h3>
<p>Along with closed captions support, the player provides a dynamic transcript generated from the selected captions. </p>
</li>
<li>
<h3 class="fullscreen-icon">Other features</h3>
<p>Other notable features include:</p>
<ul>
<li>Easy customization and themeing</li>
<li>Fullscreen support</li>
<li>Buffering indicator</li>
<li><audio> support</li>
<li>Loading indicator</li>
<li>Remembers volume level using HTML5 localStorage</li>
<li>Easy to use, understand and adapt</li>
<li>Free and Open Source</li>
</ul>
</li>
</ul>
</section>
<section id="how">
<h2>How to use</h2>
<h3>1. Mark-up your <audio> and <video></h3>
<p>Properly mark-up your videos, <em>and make sure they work, without the player. </em> It's also a good time to consider <a href="#fallback">fallbacks</a>. </p>
<h3>2. Include jQuery and jQuery UI Slider</h3>
<p>Since this is a jQuery plugin, you'll need to include jQuery. You can include it from Google's CDN. </p>
<pre><code><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</code></pre>
<p>You don't have to include the whole jQuery UI, you'll only have to include the jQuery UI Slider component. You can <a href="#">create your own custom jQuery UI build</a> on the jQuery UI website.</p>
<pre><code><script src="/path/to/jquery-ui-custom.js"></script>
</code></pre>
<h3>3. Include specific JavaScript and CSS for Acorn Media Player</h3>
<p>You'll need to include one JavaScript file</p>
<pre><code><script src="/path/to/jquery.acornmediaplayer.js"></script>
</code></pre>
<p>and one CSS file</p>
<pre><code><link href="/path/to/acornmediaplayer.base.css" rel="stylesheet" type="text/css">
</code></pre>
<h3>4. Include the Theme(s)</h3>
<p>The <code>base</code> CSS file you just included does not provide any themes. Themes are located in other external CSS files. </p>
<pre><code><link href="/path/to/themes/acorn.theme.css" rel="stylesheet" type="text/css">
</code></pre>
<p>See the themes included by default in the <a href="#themes">Themes</a> section. </p>
<h3>5. Call the plugin</h3>
<p>When you're done including everything, call the plugin on the elements you want using a jQuery selector. </p>
<pre><code><script>
$(document).ready(function() {
$('video, audio').acornMediaPlayer();
});
</script>
</code></pre>
<p>This will initialize the player using the default options. See the available options bellow. </p>
</section>
<section id="options">
<h2>Options</h2>
<p>These are the themes included with the playe: </p>
<table>
<thead>
<tr>
<th class="small-column">Key</td>
<th class="small-column">Default value</td>
<th>Description</td>
</tr>
</thead>
<tbody>
<tr>
<td>theme</td>
<td>'access'</td>
<td>
<p>Theme to be used by media player. The value is added as an extra class to the gallery wrapper. </p>
<p>You can also provide mutiple 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'. </p>
<p><strong>Remember to include the theme. </strong></p>
</td>
</tr>
<tr>
<td>nativeSliders</td>
<td>false</td>
<td>
<p>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. </p>
<p>Can be <code>true</code> or <code>false</code>.</p>
</td>
</tr>
<tr>
<td>volumeSlider</td>
<td>'horizontal'</td>
<td>
<p>The direction of the volume slider, to be used with the jQuery UI Slider. </p>
<p>Can be <code>horizontal</code> or <code>vertical</code>. </p>
</td>
</tr>
<tr>
<td>captionsOn</td>
<td>false</td>
<td>
<p>If true, the first caption will be selected by default. </p>
<p>Can be <code>true</code> or <code>false</code>. </p>
</td>
</tr>
</tbody>
</table>
</section>
<section id="themes">
<h2>Themes</h2>
<p>These are the themes included with the player: </p>
<ul>
<li>
<strong>access(default theme)</strong>
<p>Includes child theme <code>accesslight</code></p>
</li>
<li>
<strong>darkglass</strong>
<p>Includes child theme <code>darkglasssmall</code></p>
</li>
<li>
<strong>barebones</strong>
</li>
</ul>
</section>
<section id="participate">
<h2>Participate</h2>
<p>Please report any issues you may have using the GitHub issue tracker, and I'll do my best to fix them asap. Also, feel free to fork the project, I'll be glad to add back any improvements. </p>
<p>You can also email me directly at <a href="mailto:contact@ghinda.net">contact@ghinda.net</a>. </p>
</section>
<section id="license">
<h2>License</h2>
<p>I know <cite>"copyright is for losers"</cite>, but the media player is dual-licensed under the <a href="http://www.gnu.org/licenses/gpl.html">GPL</a> and <a href="http://www.opensource.org/licenses/mit-license.html">MIT</a> licenses. You can use it under whichever of these suits you. </p>
</section>
<section id="fallback">
<h2>Fallback?</h2>
<p>Acorn Media Player does not provide any fallback for browsers that are old, or don't support the provided video format. </p>
<p>This keeps you, the developer, from being locked into a certain fallback method. Most "other" video implementations(Flash, Silverlight, Java) have a lot of accessibility issues, so I'm not going to choose sides. Also, this way you can do things the way you want, and even if you later decide that you don't want to use this media player, your markup will stay the same and the fallback mechanism you chose will still work. </p>
<p>If I were you, I'd take a look at <a href="http://camendesign.com/code/video_for_everybody">Video for Everybody</a>. </p>
</section>
<footer>
<p>See the <a href="demos.html">Acorn Media Player Demos</a> page. </p>
<p>Acorn Media Player is a project by <a href="http://www.ghinda.net">Ionut Cristian Colceriu</a>. </p>
<p>Elephant's Dream is © copyright the Blender Foundation | <a href="http://orange.blender.org/">orange.blender.org</a>, licensed under a <a href="http://orange.blender.org/blog/creative-commons-license-2/">Creative Commons</a> license. </p>
</footer>
<script>var _gaq=[['_setAccount','UA-19824700-1'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'))</script>
</body>
</html>