Skip to content

Commit d44bc82

Browse files
slauriatslauriat
committed
Adding video to Our Stories, with the accessible player integrated.
1 parent cbb9882 commit d44bc82

38 files changed

+2375
-0
lines changed

‎js/jquery-ui-1.10.0.custom.min.js

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/modernizr.custom.js

+4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ourstories/acornmediaplayer/acornmediaplayer.base.css

+229
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,229 @@
1+
/*
2+
* Acorn Media Player - jQuery plugin
3+
*
4+
* Copyright (C) 2013 Ionut Cristian Colceriu
5+
*
6+
* Licensed under the MIT:
7+
* http://www.opensource.org/licenses/mit-license.php
8+
*
9+
* www.ghinda.net
10+
* [email protected]
11+
*
12+
* Contributors:
13+
* https://github.com/stephenoldham
14+
* https://github.com/leslash
15+
*
16+
*/
17+
18+
/* Main elements */
19+
.acorn-player, .acorn-controls {
20+
position: relative;
21+
}
22+
.acorn-timer {
23+
cursor: default;
24+
}
25+
.acorn-buffer {
26+
width: 0px;
27+
}
28+
/* <video> */
29+
.acorn-player video {
30+
position: relative;
31+
z-index: 1;
32+
background-color: #000;
33+
}
34+
/* <audio> */
35+
.acorn-player.audio-player {
36+
width: 500px;
37+
}
38+
.acorn-player.audio-player audio {
39+
display: none;
40+
}
41+
/* Captions and Transcript */
42+
.acorn-transcript {
43+
clear: both;
44+
display: none;
45+
46+
overflow: auto;
47+
height: 15em;
48+
}
49+
.acorn-transcript-button {
50+
display: none;
51+
}
52+
/*
53+
* Show the timings in square brackets before each "subtitle" in the transcript.
54+
* Borrowed and adapted from Bruce Lawson's “Accessible HTML5 Video with JavaScripted captions”
55+
* http://dev.opera.com/articles/view/accessible-html5-video-with-javascripted-captions/
56+
*/
57+
.acorn-transcript span {
58+
display: block;
59+
float: left;
60+
width: 100%;
61+
line-height: 1.5em;
62+
63+
-moz-border-radius: 5px;
64+
-webkit-border-radius: 5px;
65+
border-radius: 5px;
66+
}
67+
.acorn-transcript span:hover {
68+
background-color: #cadde7 !important;
69+
70+
font-weight: bold;
71+
}
72+
.acorn-transcript span:nth-of-type(even) {
73+
background-color: #efefef;
74+
}
75+
.acorn-transcript [data-begin]:before {
76+
display: block;
77+
float: left;
78+
content: " [" attr(data-begin) "s-" attr(data-end)"s] ";
79+
width: 15%;
80+
padding: 0.2em 1.5em 0.2em 0.2em;
81+
}
82+
.acorn-caption {
83+
display: none;
84+
position: absolute;
85+
bottom: 75px;
86+
z-index: 12;
87+
width: 100%;
88+
89+
text-align: center;
90+
}
91+
.acorn-caption-button {
92+
display: none;
93+
}
94+
.acorn-caption-selector {
95+
position: absolute;
96+
display: none;
97+
width: 170px;
98+
padding: 5px;
99+
height: 75px;
100+
margin-bottom: 10px;
101+
overflow: auto;
102+
103+
background-color: #000;
104+
border: 3px solid #fff;
105+
106+
z-index: 3;
107+
108+
-moz-border-radius: 5px;
109+
-webkit-border-radius: 5px;
110+
border-radius: 5px;
111+
112+
-moz-box-shadow: 0px 1px 5px #000;
113+
-webkit-box-shadow: 0px 1px 5px #000;
114+
box-shadow: 0px 1px 5px #000;
115+
}
116+
.acorn-caption-selector label {
117+
display: block;
118+
119+
font-weight: bold;
120+
color: #fff;
121+
}
122+
.acorn-caption-selector ul, .acorn-caption-selector li {
123+
list-style-type: none;
124+
margin: 0px;
125+
padding: 0px;
126+
}
127+
/* Fullscreen Mode */
128+
.fullscreen-video,
129+
.has-fullscreen-video .polyfill-mediaelement {
130+
position: fixed !important;
131+
top: 0px;
132+
left: 0px;
133+
z-index: 99999 !important;
134+
width: 100% !important;
135+
height: 100% !important;
136+
background-color: #000;
137+
}
138+
.acorn-controls.fullscreen-controls {
139+
position: fixed !important;
140+
z-index: 100000 !important;
141+
}
142+
/* Loading */
143+
.show-loading .loading-media {
144+
visibility: visible;
145+
}
146+
.loading-media {
147+
visibility: hidden;
148+
149+
position: absolute;
150+
left: 50%;
151+
top: 50%;
152+
z-index: 11;
153+
width: 20px;
154+
height: 20px;
155+
margin-top: -10px;
156+
margin-left: -10px;
157+
158+
background-color: #000;
159+
border: 5px solid #fff;
160+
border-top: 5px solid rgba(0,0,0,0);
161+
border-left: 5px solid rgba(0,0,0,0);
162+
border-radius: 20px;
163+
164+
animation: spin 1s infinite linear;
165+
-o-animation: spin 1s infinite linear;
166+
-moz-animation: spin 1s infinite linear;
167+
-webkit-animation: spin 1s infinite linear;
168+
}
169+
170+
@-o-keyframes spin {
171+
0% { -o-transform:rotate(0deg); }
172+
100% { -o-transform:rotate(360deg); }
173+
}
174+
@-ms-keyframes spin {
175+
0% { -ms-transform:rotate(0deg); }
176+
100% { -ms-transform:rotate(360deg); }
177+
}
178+
@-moz-keyframes spin {
179+
0% { -moz-transform:rotate(0deg); }
180+
100% { -moz-transform:rotate(360deg); }
181+
}
182+
@-webkit-keyframes spin {
183+
0% { -webkit-transform:rotate(0deg); }
184+
100% { -webkit-transform:rotate(360deg); }
185+
}
186+
@keyframes spin {
187+
0% { transform:rotate(0deg); }
188+
100% { transform:rotate(360deg); }
189+
}
190+
191+
/* Controls overlay while loading */
192+
.show-loading:after {
193+
content: ' ';
194+
position: absolute;
195+
top: -2px; /* Slider handle goes above */
196+
padding-bottom: 2px;
197+
left: 0;
198+
z-index: 10;
199+
width: 100%;
200+
height: 100%;
201+
202+
background: #000;
203+
opacity: 0.9;
204+
}
205+
206+
/* Styles needed for the jQuery UI slider
207+
* We're declaring these so we don't have to use jQuery UI's stylesheet
208+
*/
209+
a.ui-slider-handle {
210+
position: absolute;
211+
display: block;
212+
margin-left: -0.6em;
213+
z-index: 2;
214+
cursor: default;
215+
outline: none;
216+
}
217+
.ui-slider {
218+
position: relative;
219+
}
220+
.ui-slider-range {
221+
position: absolute;
222+
display: block;
223+
width: 100%;
224+
height: 100%;
225+
left: 0;
226+
bottom: 0;
227+
border: none;
228+
z-index: 1;
229+
}

0 commit comments

Comments
 (0)