-
Notifications
You must be signed in to change notification settings - Fork 39
/
Copy pathindex.html
274 lines (240 loc) · 10.6 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
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
<!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-website.css" rel="stylesheet" type="text/css" />
<!-- Acorn Media Player specific -->
<link href="acornmediaplayer/acornmediaplayer.base.css" rel="stylesheet" type="text/css">
<!-- Theme -->
<link href="acornmediaplayer/themes/access/acorn.access.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>
Acorn Media Player
<p>jQuery HTML5 media player</p>
</h1>
<nav>
<ul>
<li><a href="demos.html">Demos</a></li>
</ul>
</nav>
<section>
<figure>
<video controls="controls" width="826" height="360" poster="website/images/tos-poster.jpg" preload="metadata" aria-describedby="full-descript">
<source type="video/webm" src="https://user-images.githubusercontent.com/325171/200515741-eb779885-d074-4ba2-9782-32a2add7dd79.webm" />
<track src="subs/TOS-arabic.srt" kind="subtitles" srclang="ar" label="Arabic" />
<track src="subs/TOS-japanese.srt" kind="subtitles" srclang="jp" label="Japanese" />
<track src="subs/TOS-english.srt" kind="subtitles" srclang="en" label="English" />
<track src="subs/TOS-turkish.srt" kind="subtitles" srclang="tr" label="Turkish" />
<track src="subs/TOS-ukrainian.srt" kind="subtitles" srclang="uk" label="Ukrainian" />
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>
</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 HTML5 media player with a focus on accessibility and customization. </p>
<p>Articles describing it's development: </p>
<ul>
<li>
<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>
</li>
<li>
<a href="http://dev.opera.com/articles/view/more-accessible-html5-video-player/">A more accessible HTML5 <video> player</a>
</li>
</ul>
</section>
<section id="features">
<h2>Features</h2>
<ul>
<li>
<h3 class="access-icon">Accessibility</h3>
<p>Acorn Media Player is built with accessibility in mind. </p>
<p>It provides full keyboard access 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 no native support for closed captioning on HTML5 <video> yet, but that shouldn't stop you from providing them. </p>
<p>It supports external SRT files just like desktop 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 theming</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 player: </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 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'. </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>
<tr>
<td>tooltipsOn</td>
<td>true</td>
<td>
<p>Show a tooltip for the hovered player control. </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="contributors" class="column-33">
<h2>Contributors</h2>
<a href="https://github.com/ghinda/acornmediaplayer/graphs/contributors" target="_blank">See on Github</a>
</section>
<section id="participate" class="column-33">
<h2>Participate</h2>
<p>Please report any issues on <a href="https://github.com/ghinda/acornmediaplayer/issues?state=open">GitHub</a>. I'm very open to pull-requests. </p>
</section>
<section id="license" class="column-33">
<h2>License</h2>
<p>Acorn Media Player is licensed under the <a href="http://www.opensource.org/licenses/mit-license.html">MIT</a> license. </p>
</section>
<section id="fallback">
<h2>Fallback</h2>
<p>You can use the <a href="http://afarkas.github.io/webshim/demos/index.html">Webshim Polyfill</a> for supporting older browsers, and other cross-browser goodies. Thanks to <a href="https://github.com/aFarkas">aFarkas</a>!</p>
<p>Check the source, it's used on these pages. </p>
</section>
<footer>
<p>Acorn Media Player is a project by <a href="http://www.ghinda.net">Ionuț Colceriu</a>. </p>
<p>Tears of Steel is © copyright the Blender Foundation | <a href="http://www.tearsofsteel.org">www.tearsofsteel.org</a>, licensed under a <a href="http://mango.blender.org/sharing/">Creative Commons</a> license. </p>
</footer>
<!-- Required by Acorn Media Player -->
<script src="lib/jquery.min.js"></script>
<script src="lib/jquery-ui-1.10.0.custom.min.js"></script>
<!-- Optional - for older browser support - Webshim Polyfill -->
<script src="lib/modernizr.custom.js"></script>
<script src="//afarkas.github.io/webshim/js-webshim/minified/polyfiller.js"></script>
<script>
if(window.webshims) {
webshims.polyfill('mediaelement');
}
</script>
<script src="acornmediaplayer/jquery.acornmediaplayer.js"></script>
<!-- Call the plugin -->
<script>
jQuery(function() {
jQuery('video, audio').acornMediaPlayer();
});
</script>
</body>
</html>