├── .gitignore
├── LICENSE.md
├── README.md
├── dist
├── css
│ ├── animation.css
│ ├── fontello-codes.css
│ ├── fontello-embedded.css
│ ├── fontello-ie7-codes.css
│ ├── fontello-ie7.css
│ ├── fontello.css
│ └── video.css
└── jsx
│ └── react-video.js
├── index.html
├── react.js
├── screenshot.png
└── src
├── jsx
└── react-video.js
└── sass
├── animation.scss
├── fontello-codes.scss
├── fontello-embedded.scss
├── fontello-ie7-codes.scss
├── fontello-ie7.scss
├── fontello.scss
└── video.scss
/.gitignore:
--------------------------------------------------------------------------------
1 | *.mp4
2 | *.sass-cache
3 | *.module-cache
4 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | GNU GENERAL PUBLIC LICENSE
2 | Version 2, June 1991
3 |
4 | Copyright (C) 1989, 1991 Free Software Foundation, Inc.,
5 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
6 | Everyone is permitted to copy and distribute verbatim copies
7 | of this license document, but changing it is not allowed.
8 |
9 | Preamble
10 |
11 | The licenses for most software are designed to take away your
12 | freedom to share and change it. By contrast, the GNU General Public
13 | License is intended to guarantee your freedom to share and change free
14 | software--to make sure the software is free for all its users. This
15 | General Public License applies to most of the Free Software
16 | Foundation's software and to any other program whose authors commit to
17 | using it. (Some other Free Software Foundation software is covered by
18 | the GNU Lesser General Public License instead.) You can apply it to
19 | your programs, too.
20 |
21 | When we speak of free software, we are referring to freedom, not
22 | price. Our General Public Licenses are designed to make sure that you
23 | have the freedom to distribute copies of free software (and charge for
24 | this service if you wish), that you receive source code or can get it
25 | if you want it, that you can change the software or use pieces of it
26 | in new free programs; and that you know you can do these things.
27 |
28 | To protect your rights, we need to make restrictions that forbid
29 | anyone to deny you these rights or to ask you to surrender the rights.
30 | These restrictions translate to certain responsibilities for you if you
31 | distribute copies of the software, or if you modify it.
32 |
33 | For example, if you distribute copies of such a program, whether
34 | gratis or for a fee, you must give the recipients all the rights that
35 | you have. You must make sure that they, too, receive or can get the
36 | source code. And you must show them these terms so they know their
37 | rights.
38 |
39 | We protect your rights with two steps: (1) copyright the software, and
40 | (2) offer you this license which gives you legal permission to copy,
41 | distribute and/or modify the software.
42 |
43 | Also, for each author's protection and ours, we want to make certain
44 | that everyone understands that there is no warranty for this free
45 | software. If the software is modified by someone else and passed on, we
46 | want its recipients to know that what they have is not the original, so
47 | that any problems introduced by others will not reflect on the original
48 | authors' reputations.
49 |
50 | Finally, any free program is threatened constantly by software
51 | patents. We wish to avoid the danger that redistributors of a free
52 | program will individually obtain patent licenses, in effect making the
53 | program proprietary. To prevent this, we have made it clear that any
54 | patent must be licensed for everyone's free use or not licensed at all.
55 |
56 | The precise terms and conditions for copying, distribution and
57 | modification follow.
58 |
59 | GNU GENERAL PUBLIC LICENSE
60 | TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
61 |
62 | 0. This License applies to any program or other work which contains
63 | a notice placed by the copyright holder saying it may be distributed
64 | under the terms of this General Public License. The "Program", below,
65 | refers to any such program or work, and a "work based on the Program"
66 | means either the Program or any derivative work under copyright law:
67 | that is to say, a work containing the Program or a portion of it,
68 | either verbatim or with modifications and/or translated into another
69 | language. (Hereinafter, translation is included without limitation in
70 | the term "modification".) Each licensee is addressed as "you".
71 |
72 | Activities other than copying, distribution and modification are not
73 | covered by this License; they are outside its scope. The act of
74 | running the Program is not restricted, and the output from the Program
75 | is covered only if its contents constitute a work based on the
76 | Program (independent of having been made by running the Program).
77 | Whether that is true depends on what the Program does.
78 |
79 | 1. You may copy and distribute verbatim copies of the Program's
80 | source code as you receive it, in any medium, provided that you
81 | conspicuously and appropriately publish on each copy an appropriate
82 | copyright notice and disclaimer of warranty; keep intact all the
83 | notices that refer to this License and to the absence of any warranty;
84 | and give any other recipients of the Program a copy of this License
85 | along with the Program.
86 |
87 | You may charge a fee for the physical act of transferring a copy, and
88 | you may at your option offer warranty protection in exchange for a fee.
89 |
90 | 2. You may modify your copy or copies of the Program or any portion
91 | of it, thus forming a work based on the Program, and copy and
92 | distribute such modifications or work under the terms of Section 1
93 | above, provided that you also meet all of these conditions:
94 |
95 | a) You must cause the modified files to carry prominent notices
96 | stating that you changed the files and the date of any change.
97 |
98 | b) You must cause any work that you distribute or publish, that in
99 | whole or in part contains or is derived from the Program or any
100 | part thereof, to be licensed as a whole at no charge to all third
101 | parties under the terms of this License.
102 |
103 | c) If the modified program normally reads commands interactively
104 | when run, you must cause it, when started running for such
105 | interactive use in the most ordinary way, to print or display an
106 | announcement including an appropriate copyright notice and a
107 | notice that there is no warranty (or else, saying that you provide
108 | a warranty) and that users may redistribute the program under
109 | these conditions, and telling the user how to view a copy of this
110 | License. (Exception: if the Program itself is interactive but
111 | does not normally print such an announcement, your work based on
112 | the Program is not required to print an announcement.)
113 |
114 | These requirements apply to the modified work as a whole. If
115 | identifiable sections of that work are not derived from the Program,
116 | and can be reasonably considered independent and separate works in
117 | themselves, then this License, and its terms, do not apply to those
118 | sections when you distribute them as separate works. But when you
119 | distribute the same sections as part of a whole which is a work based
120 | on the Program, the distribution of the whole must be on the terms of
121 | this License, whose permissions for other licensees extend to the
122 | entire whole, and thus to each and every part regardless of who wrote it.
123 |
124 | Thus, it is not the intent of this section to claim rights or contest
125 | your rights to work written entirely by you; rather, the intent is to
126 | exercise the right to control the distribution of derivative or
127 | collective works based on the Program.
128 |
129 | In addition, mere aggregation of another work not based on the Program
130 | with the Program (or with a work based on the Program) on a volume of
131 | a storage or distribution medium does not bring the other work under
132 | the scope of this License.
133 |
134 | 3. You may copy and distribute the Program (or a work based on it,
135 | under Section 2) in object code or executable form under the terms of
136 | Sections 1 and 2 above provided that you also do one of the following:
137 |
138 | a) Accompany it with the complete corresponding machine-readable
139 | source code, which must be distributed under the terms of Sections
140 | 1 and 2 above on a medium customarily used for software interchange; or,
141 |
142 | b) Accompany it with a written offer, valid for at least three
143 | years, to give any third party, for a charge no more than your
144 | cost of physically performing source distribution, a complete
145 | machine-readable copy of the corresponding source code, to be
146 | distributed under the terms of Sections 1 and 2 above on a medium
147 | customarily used for software interchange; or,
148 |
149 | c) Accompany it with the information you received as to the offer
150 | to distribute corresponding source code. (This alternative is
151 | allowed only for noncommercial distribution and only if you
152 | received the program in object code or executable form with such
153 | an offer, in accord with Subsection b above.)
154 |
155 | The source code for a work means the preferred form of the work for
156 | making modifications to it. For an executable work, complete source
157 | code means all the source code for all modules it contains, plus any
158 | associated interface definition files, plus the scripts used to
159 | control compilation and installation of the executable. However, as a
160 | special exception, the source code distributed need not include
161 | anything that is normally distributed (in either source or binary
162 | form) with the major components (compiler, kernel, and so on) of the
163 | operating system on which the executable runs, unless that component
164 | itself accompanies the executable.
165 |
166 | If distribution of executable or object code is made by offering
167 | access to copy from a designated place, then offering equivalent
168 | access to copy the source code from the same place counts as
169 | distribution of the source code, even though third parties are not
170 | compelled to copy the source along with the object code.
171 |
172 | 4. You may not copy, modify, sublicense, or distribute the Program
173 | except as expressly provided under this License. Any attempt
174 | otherwise to copy, modify, sublicense or distribute the Program is
175 | void, and will automatically terminate your rights under this License.
176 | However, parties who have received copies, or rights, from you under
177 | this License will not have their licenses terminated so long as such
178 | parties remain in full compliance.
179 |
180 | 5. You are not required to accept this License, since you have not
181 | signed it. However, nothing else grants you permission to modify or
182 | distribute the Program or its derivative works. These actions are
183 | prohibited by law if you do not accept this License. Therefore, by
184 | modifying or distributing the Program (or any work based on the
185 | Program), you indicate your acceptance of this License to do so, and
186 | all its terms and conditions for copying, distributing or modifying
187 | the Program or works based on it.
188 |
189 | 6. Each time you redistribute the Program (or any work based on the
190 | Program), the recipient automatically receives a license from the
191 | original licensor to copy, distribute or modify the Program subject to
192 | these terms and conditions. You may not impose any further
193 | restrictions on the recipients' exercise of the rights granted herein.
194 | You are not responsible for enforcing compliance by third parties to
195 | this License.
196 |
197 | 7. If, as a consequence of a court judgment or allegation of patent
198 | infringement or for any other reason (not limited to patent issues),
199 | conditions are imposed on you (whether by court order, agreement or
200 | otherwise) that contradict the conditions of this License, they do not
201 | excuse you from the conditions of this License. If you cannot
202 | distribute so as to satisfy simultaneously your obligations under this
203 | License and any other pertinent obligations, then as a consequence you
204 | may not distribute the Program at all. For example, if a patent
205 | license would not permit royalty-free redistribution of the Program by
206 | all those who receive copies directly or indirectly through you, then
207 | the only way you could satisfy both it and this License would be to
208 | refrain entirely from distribution of the Program.
209 |
210 | If any portion of this section is held invalid or unenforceable under
211 | any particular circumstance, the balance of the section is intended to
212 | apply and the section as a whole is intended to apply in other
213 | circumstances.
214 |
215 | It is not the purpose of this section to induce you to infringe any
216 | patents or other property right claims or to contest validity of any
217 | such claims; this section has the sole purpose of protecting the
218 | integrity of the free software distribution system, which is
219 | implemented by public license practices. Many people have made
220 | generous contributions to the wide range of software distributed
221 | through that system in reliance on consistent application of that
222 | system; it is up to the author/donor to decide if he or she is willing
223 | to distribute software through any other system and a licensee cannot
224 | impose that choice.
225 |
226 | This section is intended to make thoroughly clear what is believed to
227 | be a consequence of the rest of this License.
228 |
229 | 8. If the distribution and/or use of the Program is restricted in
230 | certain countries either by patents or by copyrighted interfaces, the
231 | original copyright holder who places the Program under this License
232 | may add an explicit geographical distribution limitation excluding
233 | those countries, so that distribution is permitted only in or among
234 | countries not thus excluded. In such case, this License incorporates
235 | the limitation as if written in the body of this License.
236 |
237 | 9. The Free Software Foundation may publish revised and/or new versions
238 | of the General Public License from time to time. Such new versions will
239 | be similar in spirit to the present version, but may differ in detail to
240 | address new problems or concerns.
241 |
242 | Each version is given a distinguishing version number. If the Program
243 | specifies a version number of this License which applies to it and "any
244 | later version", you have the option of following the terms and conditions
245 | either of that version or of any later version published by the Free
246 | Software Foundation. If the Program does not specify a version number of
247 | this License, you may choose any version ever published by the Free Software
248 | Foundation.
249 |
250 | 10. If you wish to incorporate parts of the Program into other free
251 | programs whose distribution conditions are different, write to the author
252 | to ask for permission. For software which is copyrighted by the Free
253 | Software Foundation, write to the Free Software Foundation; we sometimes
254 | make exceptions for this. Our decision will be guided by the two goals
255 | of preserving the free status of all derivatives of our free software and
256 | of promoting the sharing and reuse of software generally.
257 |
258 | NO WARRANTY
259 |
260 | 11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY
261 | FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN
262 | OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES
263 | PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED
264 | OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
265 | MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS
266 | TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE
267 | PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING,
268 | REPAIR OR CORRECTION.
269 |
270 | 12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
271 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR
272 | REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
273 | INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING
274 | OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED
275 | TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY
276 | YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER
277 | PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE
278 | POSSIBILITY OF SUCH DAMAGES.
279 |
280 | END OF TERMS AND CONDITIONS
281 |
282 | How to Apply These Terms to Your New Programs
283 |
284 | If you develop a new program, and you want it to be of the greatest
285 | possible use to the public, the best way to achieve this is to make it
286 | free software which everyone can redistribute and change under these terms.
287 |
288 | To do so, attach the following notices to the program. It is safest
289 | to attach them to the start of each source file to most effectively
290 | convey the exclusion of warranty; and each file should have at least
291 | the "copyright" line and a pointer to where the full notice is found.
292 |
293 | {description}
294 | Copyright (C) {year} {fullname}
295 |
296 | This program is free software; you can redistribute it and/or modify
297 | it under the terms of the GNU General Public License as published by
298 | the Free Software Foundation; either version 2 of the License, or
299 | (at your option) any later version.
300 |
301 | This program is distributed in the hope that it will be useful,
302 | but WITHOUT ANY WARRANTY; without even the implied warranty of
303 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
304 | GNU General Public License for more details.
305 |
306 | You should have received a copy of the GNU General Public License along
307 | with this program; if not, write to the Free Software Foundation, Inc.,
308 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
309 |
310 | Also add information on how to contact you by electronic and paper mail.
311 |
312 | If the program is interactive, make it output a short notice like this
313 | when it starts in an interactive mode:
314 |
315 | Gnomovision version 69, Copyright (C) year name of author
316 | Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
317 | This is free software, and you are welcome to redistribute it
318 | under certain conditions; type `show c' for details.
319 |
320 | The hypothetical commands `show w' and `show c' should show the appropriate
321 | parts of the General Public License. Of course, the commands you use may
322 | be called something other than `show w' and `show c'; they could even be
323 | mouse-clicks or menu items--whatever suits your program.
324 |
325 | You should also get your employer (if you work as a programmer) or your
326 | school, if any, to sign a "copyright disclaimer" for the program, if
327 | necessary. Here is a sample; alter the names:
328 |
329 | Yoyodyne, Inc., hereby disclaims all copyright interest in the program
330 | `Gnomovision' (which makes passes at compilers) written by James Hacker.
331 |
332 | {signature of Ty Coon}, 1 April 1989
333 | Ty Coon, President of Vice
334 |
335 | This General Public License does not permit incorporating your program into
336 | proprietary programs. If your program is a subroutine library, you may
337 | consider it more useful to permit linking proprietary applications with the
338 | library. If this is what you want to do, use the GNU Lesser General
339 | Public License instead of this License.
340 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # ReactJS Video
2 |
3 | An HTML5 Video Player ReactJS Component
4 |
5 | 
6 |
7 | Originally created for [thisisepic.com](http://thisisepic.com) but is able to be used in any web project commercial or open source.
8 |
9 | Feel free to open pull requests with added features, or you can open a ticket if you'd like to see a feature added.
10 |
11 | # How to use
12 | Include react and the react video library in your document, then render the component to any element you wish.
13 |
14 | ```
15 |
16 |
17 | ```
18 |
19 | Pass in an options object.
20 | ```
21 | var videoStage = document.getElementById('video_stage')
22 | var videoOptions = {
23 | url: 'http://videos.thisisepic.com/2b9c1bf3-e19b-4be5-9d36-246c5d3607d8/high.mp4',
24 | poster: 'http://thumbnails.thisisepic.com/b1ce00de-e687-4c1b-97ac-afa05a287327/large/frame_0005.png'
25 | };
26 | React.render(, videoStage);
27 | ```
28 |
29 | ## Options
30 | | Name | Type | Description |
31 | | ---- | ---- | ----------- |
32 | | **url** | String | Any video file supported by HTML5 Video Tag
33 | | **poster** | String | jpg, png
34 |
35 |
36 |
37 | ## Modifying
38 |
39 | If you'd like to modify the css or jsx, you'll need to recompile the project using sass and jsx. Run these commands from the root directory:
40 | ```
41 | sass --watch src/sass:dist/css
42 | ```
43 | and or
44 | ```
45 | jsx --watch src/ dist/
46 | ```
47 |
48 | ## Todo
49 |
50 | - ~~Volume Slider~~
51 | - Full Screen (partial support)
52 | - ~~Responsive~~
53 | - Choose resolution
54 | - Playlists
55 | - Seeking, FF, RW
56 | - Change playback speed
57 |
58 | ## Changelog
59 | - Fri Mar 13
60 | - Volume slider should work in most modern browsers
61 | - Thu Mar 12
62 | - Full screen support for webkit, rest coming soon
63 | - video remains centered and keeps aspect ratio
64 |
--------------------------------------------------------------------------------
/dist/css/animation.css:
--------------------------------------------------------------------------------
1 | /*
2 | Animation example, for spinners
3 | */
4 | .animate-spin {
5 | -moz-animation: spin 2s infinite linear;
6 | -o-animation: spin 2s infinite linear;
7 | -webkit-animation: spin 2s infinite linear;
8 | animation: spin 2s infinite linear;
9 | display: inline-block; }
10 |
11 | @-moz-keyframes spin {
12 | 0% {
13 | -moz-transform: rotate(0deg);
14 | -o-transform: rotate(0deg);
15 | -webkit-transform: rotate(0deg);
16 | transform: rotate(0deg); }
17 |
18 | 100% {
19 | -moz-transform: rotate(359deg);
20 | -o-transform: rotate(359deg);
21 | -webkit-transform: rotate(359deg);
22 | transform: rotate(359deg); } }
23 |
24 | @-webkit-keyframes spin {
25 | 0% {
26 | -moz-transform: rotate(0deg);
27 | -o-transform: rotate(0deg);
28 | -webkit-transform: rotate(0deg);
29 | transform: rotate(0deg); }
30 |
31 | 100% {
32 | -moz-transform: rotate(359deg);
33 | -o-transform: rotate(359deg);
34 | -webkit-transform: rotate(359deg);
35 | transform: rotate(359deg); } }
36 |
37 | @-o-keyframes spin {
38 | 0% {
39 | -moz-transform: rotate(0deg);
40 | -o-transform: rotate(0deg);
41 | -webkit-transform: rotate(0deg);
42 | transform: rotate(0deg); }
43 |
44 | 100% {
45 | -moz-transform: rotate(359deg);
46 | -o-transform: rotate(359deg);
47 | -webkit-transform: rotate(359deg);
48 | transform: rotate(359deg); } }
49 |
50 | @-ms-keyframes spin {
51 | 0% {
52 | -moz-transform: rotate(0deg);
53 | -o-transform: rotate(0deg);
54 | -webkit-transform: rotate(0deg);
55 | transform: rotate(0deg); }
56 |
57 | 100% {
58 | -moz-transform: rotate(359deg);
59 | -o-transform: rotate(359deg);
60 | -webkit-transform: rotate(359deg);
61 | transform: rotate(359deg); } }
62 |
63 | @keyframes spin {
64 | 0% {
65 | -moz-transform: rotate(0deg);
66 | -o-transform: rotate(0deg);
67 | -webkit-transform: rotate(0deg);
68 | transform: rotate(0deg); }
69 |
70 | 100% {
71 | -moz-transform: rotate(359deg);
72 | -o-transform: rotate(359deg);
73 | -webkit-transform: rotate(359deg);
74 | transform: rotate(359deg); } }
75 |
--------------------------------------------------------------------------------
/dist/css/fontello-codes.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | .icon-volume-off:before {
3 | content: '\e800'; }
4 |
5 | /* '' */
6 | .icon-volume-down:before {
7 | content: '\e801'; }
8 |
9 | /* '' */
10 | .icon-volume:before {
11 | content: '\e802'; }
12 |
13 | /* '' */
14 | .icon-volume-up:before {
15 | content: '\e803'; }
16 |
17 | /* '' */
18 | .icon-play:before {
19 | content: '\e804'; }
20 |
21 | /* '' */
22 | .icon-pause:before {
23 | content: '\e805'; }
24 |
25 | /* '' */
26 | .icon-play-circled:before {
27 | content: '\e806'; }
28 |
29 | /* '' */
30 | .icon-stop:before {
31 | content: '\e807'; }
32 |
33 | /* '' */
34 | .icon-forward:before {
35 | content: '\e808'; }
36 |
37 | /* '' */
38 | .icon-backward:before {
39 | content: '\e809'; }
40 |
41 | /* '' */
42 | .icon-fullscreen:before {
43 | content: '\e80a'; }
44 |
45 | /* '' */
46 | .icon-cog:before {
47 | content: '\e80b'; }
48 |
49 | /* '' */
50 |
--------------------------------------------------------------------------------
/dist/css/fontello-embedded.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | @font-face {
3 | font-family: 'fontello';
4 | src: url("../font/fontello.eot?54656546");
5 | src: url("../font/fontello.eot?54656546#iefix") format("embedded-opentype"), url("../font/fontello.svg?54656546#fontello") format("svg");
6 | font-weight: normal;
7 | font-style: normal; }
8 |
9 | @font-face {
10 | font-family: 'fontello';
11 | src: url("data:application/octet-stream;base64,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") format("woff"), url("data:application/octet-stream;base64,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") format("truetype"); }
12 |
13 | /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
14 | /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
15 | /*
16 | @media screen and (-webkit-min-device-pixel-ratio:0) {
17 | @font-face {
18 | font-family: 'fontello';
19 | src: url('../font/fontello.svg?54656546#fontello') format('svg');
20 | }
21 | }
22 | */
23 | [class^="icon-"]:before, [class*=" icon-"]:before {
24 | font-family: "fontello";
25 | font-style: normal;
26 | font-weight: normal;
27 | speak: none;
28 | display: inline-block;
29 | text-decoration: inherit;
30 | width: 1em;
31 | margin-right: .2em;
32 | text-align: center;
33 | /* opacity: .8; */
34 | /* For safety - reset parent styles, that can break glyph codes*/
35 | font-variant: normal;
36 | text-transform: none;
37 | /* fix buttons height, for twitter bootstrap */
38 | line-height: 1em;
39 | /* Animation center compensation - margins should be symmetric */
40 | /* remove if not needed */
41 | margin-left: .2em;
42 | /* you can be more comfortable with increased icons size */
43 | /* font-size: 120%; */
44 | /* Uncomment for 3D effect */
45 | /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ }
46 |
47 | .icon-volume-off:before {
48 | content: '\e800'; }
49 |
50 | /* '' */
51 | .icon-volume-down:before {
52 | content: '\e801'; }
53 |
54 | /* '' */
55 | .icon-volume:before {
56 | content: '\e802'; }
57 |
58 | /* '' */
59 | .icon-volume-up:before {
60 | content: '\e803'; }
61 |
62 | /* '' */
63 | .icon-play:before {
64 | content: '\e804'; }
65 |
66 | /* '' */
67 | .icon-pause:before {
68 | content: '\e805'; }
69 |
70 | /* '' */
71 | .icon-play-circled:before {
72 | content: '\e806'; }
73 |
74 | /* '' */
75 | .icon-stop:before {
76 | content: '\e807'; }
77 |
78 | /* '' */
79 | .icon-forward:before {
80 | content: '\e808'; }
81 |
82 | /* '' */
83 | .icon-backward:before {
84 | content: '\e809'; }
85 |
86 | /* '' */
87 | .icon-fullscreen:before {
88 | content: '\e80a'; }
89 |
90 | /* '' */
91 | .icon-cog:before {
92 | content: '\e80b'; }
93 |
94 | /* '' */
95 |
--------------------------------------------------------------------------------
/dist/css/fontello-ie7-codes.css:
--------------------------------------------------------------------------------
1 | .icon-volume-off {
2 | *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
3 |
4 | .icon-volume-down {
5 | *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
6 |
7 | .icon-volume {
8 | *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
9 |
10 | .icon-volume-up {
11 | *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
12 |
13 | .icon-play {
14 | *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
15 |
16 | .icon-pause {
17 | *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
18 |
19 | .icon-play-circled {
20 | *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
21 |
22 | .icon-stop {
23 | *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
24 |
25 | .icon-forward {
26 | *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
27 |
28 | .icon-backward {
29 | *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
30 |
31 | .icon-fullscreen {
32 | *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
33 |
34 | .icon-cog {
35 | *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
36 |
--------------------------------------------------------------------------------
/dist/css/fontello-ie7.css:
--------------------------------------------------------------------------------
1 | [class^="icon-"], [class*=" icon-"] {
2 | font-family: 'fontello';
3 | font-style: normal;
4 | font-weight: normal;
5 | /* fix buttons height */
6 | line-height: 1em;
7 | /* you can be more comfortable with increased icons size */
8 | /* font-size: 120%; */ }
9 |
10 | .icon-volume-off {
11 | *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
12 |
13 | .icon-volume-down {
14 | *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
15 |
16 | .icon-volume {
17 | *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
18 |
19 | .icon-volume-up {
20 | *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
21 |
22 | .icon-play {
23 | *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
24 |
25 | .icon-pause {
26 | *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
27 |
28 | .icon-play-circled {
29 | *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
30 |
31 | .icon-stop {
32 | *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
33 |
34 | .icon-forward {
35 | *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
36 |
37 | .icon-backward {
38 | *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
39 |
40 | .icon-fullscreen {
41 | *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
42 |
43 | .icon-cog {
44 | *zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
45 |
--------------------------------------------------------------------------------
/dist/css/fontello.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | @font-face {
3 | font-family: 'fontello';
4 | src: url("../font/fontello.eot?82764686");
5 | src: url("../font/fontello.eot?82764686#iefix") format("embedded-opentype"), url("../font/fontello.woff?82764686") format("woff"), url("../font/fontello.ttf?82764686") format("truetype"), url("../font/fontello.svg?82764686#fontello") format("svg");
6 | font-weight: normal;
7 | font-style: normal; }
8 |
9 | /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
10 | /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
11 | /*
12 | @media screen and (-webkit-min-device-pixel-ratio:0) {
13 | @font-face {
14 | font-family: 'fontello';
15 | src: url('../font/fontello.svg?82764686#fontello') format('svg');
16 | }
17 | }
18 | */
19 | [class^="icon-"]:before, [class*=" icon-"]:before {
20 | font-family: "fontello";
21 | font-style: normal;
22 | font-weight: normal;
23 | speak: none;
24 | display: inline-block;
25 | text-decoration: inherit;
26 | width: 1em;
27 | margin-right: .2em;
28 | text-align: center;
29 | /* opacity: .8; */
30 | /* For safety - reset parent styles, that can break glyph codes*/
31 | font-variant: normal;
32 | text-transform: none;
33 | /* fix buttons height, for twitter bootstrap */
34 | line-height: 1em;
35 | /* Animation center compensation - margins should be symmetric */
36 | /* remove if not needed */
37 | margin-left: .2em;
38 | /* you can be more comfortable with increased icons size */
39 | /* font-size: 120%; */
40 | /* Uncomment for 3D effect */
41 | /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ }
42 |
43 | .icon-volume-off:before {
44 | content: '\e800'; }
45 |
46 | /* '' */
47 | .icon-volume-down:before {
48 | content: '\e801'; }
49 |
50 | /* '' */
51 | .icon-volume:before {
52 | content: '\e802'; }
53 |
54 | /* '' */
55 | .icon-volume-up:before {
56 | content: '\e803'; }
57 |
58 | /* '' */
59 | .icon-play:before {
60 | content: '\e804'; }
61 |
62 | /* '' */
63 | .icon-pause:before {
64 | content: '\e805'; }
65 |
66 | /* '' */
67 | .icon-play-circled:before {
68 | content: '\e806'; }
69 |
70 | /* '' */
71 | .icon-stop:before {
72 | content: '\e807'; }
73 |
74 | /* '' */
75 | .icon-forward:before {
76 | content: '\e808'; }
77 |
78 | /* '' */
79 | .icon-backward:before {
80 | content: '\e809'; }
81 |
82 | /* '' */
83 | .icon-fullscreen:before {
84 | content: '\e80a'; }
85 |
86 | /* '' */
87 | .icon-cog:before {
88 | content: '\e80b'; }
89 |
90 | /* '' */
91 |
--------------------------------------------------------------------------------
/dist/css/video.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | @import url(http://fonts.googleapis.com/css?family=Cabin);
3 | @font-face {
4 | font-family: 'fontello';
5 | src: url("../font/fontello.eot?54656546");
6 | src: url("../font/fontello.eot?54656546#iefix") format("embedded-opentype"), url("../font/fontello.svg?54656546#fontello") format("svg");
7 | font-weight: normal;
8 | font-style: normal; }
9 |
10 | @font-face {
11 | font-family: 'fontello';
12 | src: url("data:application/octet-stream;base64,d09GRgABAAAAAA18AA4AAAAAFuQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABRAAAAEQAAABWPilI/mNtYXAAAAGIAAAAOgAAAUrQHBm3Y3Z0IAAAAcQAAAAKAAAACgAAAABmcGdtAAAB0AAABZQAAAtwiJCQWWdhc3AAAAdkAAAACAAAAAgAAAAQZ2x5ZgAAB2wAAAMJAAAEFAb44BJoZWFkAAAKeAAAADQAAAA2BUgujWhoZWEAAAqsAAAAIAAAACQHmQNeaG10eAAACswAAAAgAAAANCwJAABsb2NhAAAK7AAAABwAAAAcBkYHPm1heHAAAAsIAAAAIAAAACAAowuzbmFtZQAACygAAAF3AAACzcydGx1wb3N0AAAMoAAAAHIAAACjxBlxV3ByZXAAAA0UAAAAZQAAAHvdawOFeJxjYGROZpzAwMrAwVTFtIeBgaEHQjM+YDBkZGJgYGJgZWbACgLSXFMYHF4wvOBmDvqfxRDFHMwwHSjMCJIDAOKMC6V4nGNgYGBmgGAZBkYGEHAB8hjBfBYGDSDNBqQZGZgYGF5w//8PUvCCAURLMELVAwEjG8OIBwBwBga5AAAAAAAAAAAAAAAAAAB4nK1WaXMTRxCd1WHLNj6CDxI2gVnGcox2VpjLCBDG7EoW4BzylexCjl1Ldu6LT/wG/ZpekVSRb/y0vB4d2GAnVVQoSv2m9+1M9+ueXpPQksReWI+k3HwpprY2aWTnSUg3bFqO4kPZ2QspU0z+LoiCaLXUvu04JCISgap1hSWC2PfI0iTjQ48yWrYlvWpSbulJd9kaD+qt+vbT0FGO3QklNZuhQ+uRLanCqBJFMu2RkjYtw9VfSVrh5yvMfNUMJYLoJJLGm2EMj+Rn44xWGa3GdhxFkU2WG0WKRDM8iCKPslpin1wxQUD5oBlSXvk0onyEH5EVe5TTCnHJdprf9yU/6R3OvyTieouyJQf+QHZkB3unK/ki0toK46adbEehivB0fSfEI5uT6p/sUV7TaOB2RaYnzQiWyleQWPkJZfYPyWrhfMqXPBrVkoOcCFovc2Jf8g60HkdMiWsmyILujk6IoO6XnKHYY/q4+OO9XSwXIQTIOJb1jkq4EEYpYbOaJG0EOYiSskWV1HpHTJzyOi3iLWG/Tu3oS2e0Sag7MZ6th46tnKjkeDSp00ymTu2k5tGUBlFKOhM85tcBlB/RJK+2sZrEyqNpbDNjJJFQoIVzaSqIZSeWNAXRPJrRm7thmmvXokWaPFDPPXpPb26Fmzs9p+3AP2v8Z3UqpoO9MJ2eDshKfJp2uUnRun56hn8m8UPWAiqRLTbDlMVDtn4H5eVjS47CawNs957zK+h99kTIpIH4G/AeL9UpBUyFmFVQC9201rUsy9RqVotUZOq7IU0rX9ZpAk05Dn1jX8Y4/q+ZGUtMCd/vxOnZEZeeufYlyDSH3GZdj+Z1arFdgM5sz+k0y/Z9nebYfqDTPNvzOh1ha+t0lO2HOi2w/UinY2wvaEGT7jsEchGBXMAGEoGwdRAI20sIhK1CIGwXEQjbIgJhu4RA2H6MQNguIxC2l7Wsmn4qaRw7E8sARYgDoznuyGVuKldTyaUSrotGpzbkKXKrpKJ4Vv0rA/3ikTesgbVAukTW/IpJrnxUleOPrmh508S5Ao5Vf3tzXJ8TD2W/WPhT8L/amqqkV6x5ZHIVeSPQk+NE1yYVj67p8rmqR9f/i4oOa4F+A6UQC0VZlg2+mZDwUafTUA1c5RAzGzMP1/W6Zc3P4fybGCEL6H78NxQaC9yDTllJWe1gr9XXj2W5twflsCdYkmK+zOtb4YuMzEr7RWYpez7yecAVMCqVYasNXK3gzXsS85DpTfJMELcVZYOkjceZILGBYx4wb76TICRMXbWB2imcsIG8YMwp2O+EQ1RvlOVwe6F9Ho2Uf2tX7MgZFU0Q+G32Rtjrs1DyW6yBhCe/1NdAVSFNxbipgEsj5YZq8GFcrdtGMk6gr6jYDcuyig8fR9x3So5lIPlIEatHRz+tvUKd1Ln9yihu3zv9CIJBaWL+9r6Z4qCUd7WSZVZtA1O3GpVT15rDxasO3c2j7nvH2Sdy1jTddE/c9L6mVbeDg7lZEO3bHJSlTC6o68MOG6jLzaXQ6mVckt52DzAsMKDfoRUb/1f3cfg8V6oKo+NIvZ2oH6PPYgzyDzh/R/UF6OcxTLmGlOd7lxOfbtzD2TJdxV2sn+LfwKy15mbpGnBD0w2Yh6xaHbrKDXynBjo90tyO9BDwse4K8QBgE8Bi8InuWsbzKYDxfMYcH+Bz5jBoMofBFnMYbDNnDWCHOQx2mcNgjzkMvmDOOsCXzGEQModBxBwGT5gTADxlDoOvmMPga+Yw+IY59wG+ZQ6DmDkMEuYw2Nd0ayhzixd0F6htUBXowPQTFvewONRUGbK/44Vhf28Qs38wiKk/aro9pP7EC0P92SCm/mIQU3/VdGdI/Y0Xhvq7QUz9wyCmPtMvxnKZwV9GvkuFA8ouNp/z98T7B8IaQLYAAQAB//8AD3icdVPfSxRRFL7fnXHG1drd0XVHC6xR3Ell3VJ3R0s0IwiXFWMTMxGVsNIVCR9kM/MhJCKoMIt9WEIiol9PRlT/QQYVPQU9RERsKWU+9RCit87srkZBzNxz5t7znfN999w7jDP265y0JLWyHFbFcp8YLolzf7VmQEN5RX0LTB+ZUO0OWLbxelzQbaOUBaDaxoc9OCbufeZTPBLhPMgVKdIuy5LF03OL5u0RMkHOTWxb2wd9QrYjuQTNZuSSlxVuAR0dgEWSGLN1xaSDUpR0uUiXK1+WSFdQqyNhFaFgvWl5dY+6jJMiiTvhcNspeeQKbqN8rZh0hweHIuFYYuYkk6jOKO2vg+o4mZflPfMWOvNkSfpTK1tKD7npw00lj4s53GprOzTMRwKTk5Fk8ipuwVgrhVEefkV1b1w7EYhjYDKcFJEkaZWJ4xFx5Gc5drKt+/N2bs8QyWmiCs2Pf4nSvhQeRX2JOvEaQ83NTT28tzIWOzA9XTY72xzt7Y0+wNDq2t2fRsv8/tae81PdlcOoGWm+IC5fLLuOudnW6LuV94dJA0jDIh/jb6lzymMw+KuLNPCxEr4iLmX7uchXKC4xlfqZI4NxG2NodTTQOIUGwq4X2IPwdt+Gpa/SEZbLNOahvhUWuLaonPqm1dOOOQ3L45VDbp+sQMuhe3ATu2TxUfSKT6dT2JtKiecpyIij7w18XHwQfeIDh+/N3Cf+BQ1LynsxiB+rbFN7RtumdkPjKyUZMUhfiBn+lCkb8aAGzUGn14ij4oHC58UCGsV9cR+N7F+8DMITPP10o0G8QB+67YT1w5S0kOGP0flFmU54JcOvO6BqhuqAaWimA5ZmWA7ocXjF8gS64ihC4QR64uIbefGQvPg+kfhfQNzNJG7ca5vLZLvpHGqqSvPs/y1ohSzT0kMtqNO9uqWr3h0oUhVVV03FhXLTZ6qm5TOp5bWhep8TCWfxwOh4ZcB90+2vHh8dKHYmMkvVfloKVKaXXnee7aQXWVC/boP0/r9BiY1SfU2dnWe6ePQ3Jo79OwAAAHicY2BkYGAA4pzAy6Hx/DZfGbiZXwBFGC7Kd/VB6IQ4Bob/mcyvmIOBXA4GJpAoADpuCuh4nGNgZGBgDvqfxRDF/IKB4f8/5lcMQBEUwAsAkWUF/XicY37BwMAMwi5QGoiZCoH4HZQNpJkmQDBMHgAQYgosAAAAAABMAHAAogDkAPQBDAFCAVIBagGCAbgCCgABAAAADQAxAAQAAAAAAAIAAAAQAHMAAAAeC3AAAAAAeJx1kc1Kw0AURr9pa9UWVBTceldSEdMf6EYQCpW60U2RbiWNaZKSZspkWuhr+A4+jC/hs/g1nYq0mJDMuWfu3LmZADjHNxQ2V5fPhhWOGG24hEM8OC7TPzqukJ8dH6COV8dV+jfHNdwiclzHBT5YQVWOGU3x6VjhTJ06LuFEXTku0985rpAfHB/gUr04rtIHjmsYqdxxHdfqq6/nK5NEsZVG/0Y6rXZXxivRVEnmp+IvbKxNLj2Z6MyGaaq9QM+2PAyjReqbbbgdR6HJE51J22tt1VOYhca34fu6er6MOtZOZGL0TAYuQ+ZGT8PAerG18/tm8+9+6ENjjhUMEh5VDAtBg/aGYwcttPkjBGNmCDM3WQky+EhpfCy4Ii5mcsY9PhNGGW3IjJTsIeB7tueHpIjrU1Yxe7O78Yi03iMpvLAvj93tZj2RsiLTL+z7b+85ltytQ2u5at2lKboSDHZqCM9jPTelCei94lQs7T2avP/5vh/gZIRNAHicbchbDoMgEEbh+RVvqEtxURSGpil1CJSa7t4YffQ8fTlU0Zmm+2YiVKih0KBFhx4DNEZMmPVPQvnwIt6PF51sa3t6uFaJKgbzb6IpmaeDi30lG9ip/JXYeUmbSa5/GPs+oH0JIdvEvNZWnkQ74IUliwAAeJxj8N7BcCIoYiMjY1/kBsadHAwcDMkFGxlYnTYyMGhBaA4UeicDAwMnMouZwWWjCmNHYMQGh46IjcwpLhvVQLxdHA0MjCwOHckhESAlkUCwkYFHawfj/9YNLL0bmRhcAAfTIrgAAAA=") format("woff"), url("data:application/octet-stream;base64,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") format("truetype"); }
13 |
14 | /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
15 | /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
16 | /*
17 | @media screen and (-webkit-min-device-pixel-ratio:0) {
18 | @font-face {
19 | font-family: 'fontello';
20 | src: url('../font/fontello.svg?54656546#fontello') format('svg');
21 | }
22 | }
23 | */
24 | [class^="icon-"]:before, [class*=" icon-"]:before {
25 | font-family: "fontello";
26 | font-style: normal;
27 | font-weight: normal;
28 | speak: none;
29 | display: inline-block;
30 | text-decoration: inherit;
31 | width: 1em;
32 | margin-right: .2em;
33 | text-align: center;
34 | /* opacity: .8; */
35 | /* For safety - reset parent styles, that can break glyph codes*/
36 | font-variant: normal;
37 | text-transform: none;
38 | /* fix buttons height, for twitter bootstrap */
39 | line-height: 1em;
40 | /* Animation center compensation - margins should be symmetric */
41 | /* remove if not needed */
42 | margin-left: .2em;
43 | /* you can be more comfortable with increased icons size */
44 | /* font-size: 120%; */
45 | /* Uncomment for 3D effect */
46 | /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ }
47 |
48 | .icon-volume-off:before {
49 | content: '\e800'; }
50 |
51 | /* '' */
52 | .icon-volume-down:before {
53 | content: '\e801'; }
54 |
55 | /* '' */
56 | .icon-volume:before {
57 | content: '\e802'; }
58 |
59 | /* '' */
60 | .icon-volume-up:before {
61 | content: '\e803'; }
62 |
63 | /* '' */
64 | .icon-play:before {
65 | content: '\e804'; }
66 |
67 | /* '' */
68 | .icon-pause:before {
69 | content: '\e805'; }
70 |
71 | /* '' */
72 | .icon-play-circled:before {
73 | content: '\e806'; }
74 |
75 | /* '' */
76 | .icon-stop:before {
77 | content: '\e807'; }
78 |
79 | /* '' */
80 | .icon-forward:before {
81 | content: '\e808'; }
82 |
83 | /* '' */
84 | .icon-backward:before {
85 | content: '\e809'; }
86 |
87 | /* '' */
88 | .icon-fullscreen:before {
89 | content: '\e80a'; }
90 |
91 | /* '' */
92 | .icon-cog:before {
93 | content: '\e80b'; }
94 |
95 | /* '' */
96 | body {
97 | background: #ccc; }
98 |
99 | body :-webkit-full-screen {
100 | width: 100%;
101 | height: 100%; }
102 |
103 | .video_player {
104 | background-color: #000;
105 | width: 640px;
106 | height: 360px;
107 | overflow: hidden;
108 | position: relative;
109 | text-align: center; }
110 | .video_player video {
111 | max-width: 100%;
112 | height: inherit; }
113 | .video_player .video_controls {
114 | height: 30px;
115 | position: absolute;
116 | bottom: 0;
117 | left: 0;
118 | right: 0;
119 | background: rgba(0, 0, 0, 0.75);
120 | color: #fff; }
121 | .video_player .video_controls .rhs {
122 | float: right;
123 | display: inline;
124 | height: 30px; }
125 | .video_player .video_controls .toggle_fullscreen_button {
126 | color: #fff;
127 | font-size: 0.9em;
128 | height: 30px;
129 | border: none;
130 | background: transparent;
131 | padding: 0 10px;
132 | cursor: pointer;
133 | outline: none; }
134 | .video_player .video_controls .volume {
135 | height: 30px;
136 | line-height: 34px;
137 | float: left;
138 | padding: 0 10px; }
139 | .video_player .video_controls .volume button {
140 | font-size: 1em;
141 | background: transparent;
142 | color: #fff;
143 | border: none;
144 | outline: none;
145 | cursor: pointer; }
146 | .video_player .video_controls .volume .volume_slider {
147 | cursor: ew-resize;
148 | max-width: 50px;
149 | display: none; }
150 | .video_player .video_controls .volume:hover .volume_slider {
151 | display: inline-block; }
152 | .video_player .video_controls .volume input[type=range].volume_slider {
153 | -webkit-appearance: none; }
154 | .video_player .video_controls .volume input[type=range].volume_slider:focus {
155 | outline: none; }
156 | .video_player .video_controls .volume input[type=range].volume_slider::-webkit-slider-runnable-track {
157 | width: 100%;
158 | height: 10px;
159 | cursor: pointer;
160 | box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
161 | background: #cc00ff;
162 | border-radius: 0px;
163 | border: 0px solid rgba(0, 0, 0, 0); }
164 | .video_player .video_controls .volume input[type=range].volume_slider::-webkit-slider-thumb {
165 | box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
166 | border: 1px solid rgba(0, 0, 0, 0);
167 | height: 8px;
168 | width: 5px;
169 | border-radius: 0px;
170 | background: #ffffff;
171 | cursor: pointer;
172 | -webkit-appearance: none;
173 | margin-top: 1px; }
174 | .video_player .video_controls .volume input[type=range].volume_slider:focus::-webkit-slider-runnable-track {
175 | background: #cc00ff; }
176 | .video_player .video_controls .volume input[type=range].volume_slider::-moz-range-track {
177 | width: 100%;
178 | height: 10px;
179 | cursor: pointer;
180 | box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
181 | background: #cc00ff;
182 | border-radius: 0px;
183 | border: 0px solid rgba(0, 0, 0, 0); }
184 | .video_player .video_controls .volume input[type=range].volume_slider::-moz-range-thumb {
185 | box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
186 | border: 1px solid rgba(0, 0, 0, 0);
187 | height: 8px;
188 | width: 5px;
189 | border-radius: 0px;
190 | background: #ffffff;
191 | cursor: pointer; }
192 | .video_player .video_controls .volume input[type=range].volume_slider::-ms-track {
193 | width: 100%;
194 | height: 10px;
195 | cursor: pointer;
196 | background: transparent;
197 | border-color: transparent;
198 | color: transparent; }
199 | .video_player .video_controls .volume input[type=range].volume_slider::-ms-fill-lower {
200 | background: #cc00ff;
201 | border: 0px solid rgba(0, 0, 0, 0);
202 | border-radius: 0px;
203 | box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0); }
204 | .video_player .video_controls .volume input[type=range].volume_slider::-ms-fill-upper {
205 | background: #cc00ff;
206 | border: 0px solid rgba(0, 0, 0, 0);
207 | border-radius: 0px;
208 | box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0); }
209 | .video_player .video_controls .volume input[type=range].volume_slider::-ms-thumb {
210 | box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
211 | border: 1px solid rgba(0, 0, 0, 0);
212 | width: 5px;
213 | border-radius: 0px;
214 | background: #ffffff;
215 | cursor: pointer;
216 | height: 8px; }
217 | .video_player .video_controls .volume input[type=range].volume_slider:focus::-ms-fill-lower {
218 | background: #cc00ff; }
219 | .video_player .video_controls .volume input[type=range].volume_slider:focus::-ms-fill-upper {
220 | background: #cc00ff; }
221 | .video_player .video_controls .time {
222 | height: 30px;
223 | float: left;
224 | font-size: .7em;
225 | font-family: 'Cabin', sans-serif;
226 | padding: 0 10px;
227 | line-height: 30px; }
228 | .video_player .video_controls .time .total {
229 | color: #999; }
230 | .video_player .video_controls .progress_bar {
231 | height: 5px;
232 | position: absolute;
233 | left: 0;
234 | right: 0;
235 | bottom: 30px;
236 | background-color: #333; }
237 | .video_player .video_controls .progress_bar .playback_percent {
238 | top: 0;
239 | bottom: 0;
240 | position: absolute;
241 | width: 0%;
242 | background-color: #c0f;
243 | z-index: 50; }
244 | .video_player .video_controls .progress_bar .buffer_percent {
245 | top: 0;
246 | bottom: 0;
247 | position: absolute;
248 | width: 50%;
249 | background-color: #666;
250 | z-index: 40; }
251 | .video_player .video_controls .toggle_playback {
252 | float: left;
253 | color: #fff;
254 | font-size: 1.3em;
255 | height: 30px;
256 | border: none;
257 | background: transparent;
258 | padding: 0 10px;
259 | cursor: pointer;
260 | outline: none; }
261 |
--------------------------------------------------------------------------------
/dist/jsx/react-video.js:
--------------------------------------------------------------------------------
1 | Number.prototype.toVideoDuration = function(){
2 | var hours, minutes, seconds, group;
3 | group = []
4 |
5 | hours = Math.floor(this / 3600);
6 | minutes = Math.floor(this % 3600 / 60);
7 | seconds = Math.floor(this % 3600 % 60);
8 |
9 | if (hours > 0) { group.push((hours > 9) ? hours : "0" + hours); }
10 | group.push((minutes > 9) ? minutes : "0" + minutes);
11 | group.push((seconds > 9) ? seconds : "0" + seconds);
12 |
13 | return group.join(":");
14 | }
15 |
16 | var VideoFullScreenToggleButton = React.createClass({displayName: "VideoFullScreenToggleButton",
17 | requestFullscreen: function(){
18 | this.props.onToggleFullscreen();
19 | },
20 | render: function(){
21 | return (
22 | React.createElement("button", {className: "toggle_fullscreen_button", onClick: this.requestFullscreen},
23 | React.createElement("i", {className: "icon-fullscreen"})
24 | )
25 | );
26 | }
27 | });
28 |
29 | var VideoTimeIndicator = React.createClass({displayName: "VideoTimeIndicator",
30 | render: function(){
31 | var current = (this.props.currentTime).toVideoDuration();
32 | var duration = (this.props.duration).toVideoDuration();
33 | return (
34 | React.createElement("div", {className: "time"},
35 | React.createElement("span", {className: "current"}, current), "/", React.createElement("span", {className: "total"}, duration)
36 | )
37 | );
38 | }
39 | });
40 |
41 | var VideoVolumeButton = React.createClass({displayName: "VideoVolumeButton",
42 | toggleVolume: function(){
43 | this.props.toggleVolume(!this.props.muted);
44 | },
45 | changeVolume: function(e){
46 | this.props.changeVolume(e.target.value);
47 | },
48 | render: function(){
49 | var volumeLevel = this.props.volumeLevel, level;
50 | if (volumeLevel <= 0){
51 | level = 'muted';
52 | }else if (volumeLevel > 0 && volumeLevel <= 0.33){
53 | level = 'low';
54 | }else if (volumeLevel > 0.33 && volumeLevel <= 0.66){
55 | level = 'medium';
56 | }else{
57 | level = 'high';
58 | }
59 |
60 | var sound_levels = {
61 | 'muted': 'icon-volume-off',
62 | 'low': 'icon-volume-down',
63 | 'medium': 'icon-volume',
64 | 'high': 'icon-volume-up'
65 | }
66 |
67 | return (
68 | React.createElement("div", {className: "volume"},
69 | React.createElement("button", {onClick: this.toggleVolume},
70 | React.createElement("i", {className: sound_levels[level]})
71 | ),
72 | React.createElement("input", {className: "volume_slider", type: "range", min: "0", max: "100", onInput: this.changeVolume})
73 | )
74 | );
75 | }
76 | });
77 |
78 | var VideoPlaybackToggleButton = React.createClass({displayName: "VideoPlaybackToggleButton",
79 | render: function(){
80 | var icon = this.props.playing ? (React.createElement("i", {className: "icon-pause"})) : (React.createElement("i", {className: "icon-play"}));
81 | return (
82 | React.createElement("button", {className: "toggle_playback", onClick: this.props.handleTogglePlayback},
83 | icon
84 | )
85 | );
86 | }
87 | });
88 |
89 | var VideoProgressBar = React.createClass({displayName: "VideoProgressBar",
90 | render: function(){
91 | var playedStyle = {width: this.props.percentPlayed + '%'}
92 | var bufferStyle = {width: this.props.percentBuffered + '%'}
93 | return (
94 | React.createElement("div", {className: "progress_bar"},
95 | React.createElement("div", {className: "playback_percent", style: playedStyle}),
96 | React.createElement("div", {className: "buffer_percent", style: bufferStyle})
97 | )
98 | );
99 | }
100 | });
101 |
102 | var Video = React.createClass({displayName: "Video",
103 | updateCurrentTime: function(times){
104 | this.props.currentTimeChanged(times);
105 | },
106 | updateDuration: function(duration){
107 | this.props.durationChanged(duration);
108 | },
109 | playbackChanged: function(shouldPause){
110 | this.props.updatePlaybackStatus(shouldPause);
111 | },
112 | updateBuffer: function(buffered){
113 | this.props.bufferChanged(buffered);
114 | },
115 | componentDidMount: function(){
116 | var video = this.getDOMNode();
117 |
118 | $this = this
119 |
120 | // Sent when playback completes
121 | video.addEventListener('ended', function(e){
122 | $this.playbackChanged(e.target.ended);
123 | }, false);
124 |
125 | var bufferCheck = setInterval(function(){
126 | var percent = (video.buffered.end(0) / video.duration * 100)
127 | $this.updateBuffer(percent);
128 | if (percent == 100) { clearInterval(bufferCheck); }
129 | }, 500);
130 |
131 | video.addEventListener('durationchange', function(e){
132 | $this.updateDuration(e.target.duration);
133 | }, false);
134 |
135 | video.addEventListener('timeupdate', function(e){
136 | $this.updateCurrentTime({
137 | currentTime: e.target.currentTime,
138 | duration: e.target.duration
139 | });
140 | }, false)
141 | },
142 | render: function(){
143 | return (
144 | React.createElement("video", {src: this.props.url, poster: this.props.poster})
145 | );
146 | }
147 | });
148 |
149 | var VideoPlayer = React.createClass({displayName: "VideoPlayer",
150 | getInitialState: function(){
151 | return {
152 | playing: false,
153 | percentPlayed: 0,
154 | percentBuffered: 0,
155 | duration: 0,
156 | currentTime: 0,
157 | muted: false,
158 | volumeLevel: 0.5,
159 | fullScreen: false
160 | };
161 | },
162 | videoEnded: function(){
163 | this.setState({
164 | percentPlayed: 100,
165 | playing: false
166 | });
167 | },
168 | togglePlayback: function(){
169 | this.setState({
170 | playing: !this.state.playing
171 | }, function(){
172 | if (this.state.playing){
173 | this.refs.video.getDOMNode().play()
174 | }else{
175 | this.refs.video.getDOMNode().pause()
176 | }
177 | });
178 | },
179 | updateDuration: function(duration){
180 | this.setState({duration: duration});
181 | },
182 | updateBufferBar: function(buffered){
183 | this.setState({percentBuffered: buffered});
184 | },
185 | updateProgressBar: function(times){
186 | var percentPlayed = Math.floor((100 / times.duration) * times.currentTime);
187 | this.setState({
188 | currentTime: times.currentTime,
189 | percentPlayed: percentPlayed,
190 | duration: times.duration
191 | });
192 | },
193 | toggleMute: function(){
194 | this.setState({
195 | muted: !this.state.muted
196 | }, function(){
197 | this.refs.video.getDOMNode().muted = this.state.muted
198 | });
199 | },
200 | toggleFullscreen: function(){
201 | this.setState({
202 | fullScreen: !this.state.fullScreen
203 | }, function(){
204 | if (this.state.fullScreen){
205 | this.getDOMNode().webkitRequestFullScreen();
206 | }else{
207 | document.webkitExitFullscreen();
208 | }
209 | });
210 | },
211 | handleVolumeChange: function(value){
212 | this.setState({volumeLevel: value / 100}, function(){
213 | this.refs.video.getDOMNode().volume = this.state.volumeLevel;
214 | });
215 | },
216 | render: function(){
217 | return (
218 | React.createElement("div", {className: "video_player"},
219 | React.createElement(Video, {ref: "video",
220 | url: this.props.options.url,
221 | volume: this.state.volumeLevel,
222 | poster: this.props.options.poster,
223 | currentTimeChanged: this.updateProgressBar,
224 | durationChanged: this.updateDuration,
225 | updatePlaybackStatus: this.videoEnded,
226 | bufferChanged: this.updateBufferBar}),
227 | React.createElement("div", {className: "video_controls", ref: "videoControls"},
228 | React.createElement(VideoProgressBar, {percentPlayed: this.state.percentPlayed, percentBuffered: this.state.percentBuffered}),
229 | React.createElement(VideoPlaybackToggleButton, {handleTogglePlayback: this.togglePlayback, playing: this.state.playing}),
230 | React.createElement(VideoVolumeButton, {muted: this.state.muted, volumeLevel: this.state.volumeLevel, toggleVolume: this.toggleMute, changeVolume: this.handleVolumeChange}),
231 | React.createElement(VideoTimeIndicator, {duration: this.state.duration, currentTime: this.state.currentTime}),
232 | React.createElement("div", {className: "rhs"},
233 | React.createElement(VideoFullScreenToggleButton, {onToggleFullscreen: this.toggleFullscreen})
234 | )
235 | )
236 | )
237 | );
238 | }
239 | });
240 |
241 | var videoStage = document.getElementById('video_stage')
242 | var videoOptions = {
243 | url: 'http://videos.thisisepic.com/2b9c1bf3-e19b-4be5-9d36-246c5d3607d8/high.mp4',
244 | poster: 'http://thumbnails.thisisepic.com/b1ce00de-e687-4c1b-97ac-afa05a287327/large/frame_0005.png'
245 | };
246 | React.render(React.createElement(VideoPlayer, {options: videoOptions}), videoStage);
247 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | React Video Component
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zackperdue/React-Video-Player/a1383798408e9cf28eca9e4464ddc1fc4ce92fa7/screenshot.png
--------------------------------------------------------------------------------
/src/jsx/react-video.js:
--------------------------------------------------------------------------------
1 | Number.prototype.toVideoDuration = function(){
2 | var hours, minutes, seconds, group;
3 | group = []
4 |
5 | hours = Math.floor(this / 3600);
6 | minutes = Math.floor(this % 3600 / 60);
7 | seconds = Math.floor(this % 3600 % 60);
8 |
9 | if (hours > 0) { group.push((hours > 9) ? hours : "0" + hours); }
10 | group.push((minutes > 9) ? minutes : "0" + minutes);
11 | group.push((seconds > 9) ? seconds : "0" + seconds);
12 |
13 | return group.join(":");
14 | }
15 |
16 | var VideoFullScreenToggleButton = React.createClass({
17 | requestFullscreen: function(){
18 | this.props.onToggleFullscreen();
19 | },
20 | render: function(){
21 | return (
22 |
25 | );
26 | }
27 | });
28 |
29 | var VideoTimeIndicator = React.createClass({
30 | render: function(){
31 | var current = (this.props.currentTime).toVideoDuration();
32 | var duration = (this.props.duration).toVideoDuration();
33 | return (
34 |