├── .editorconfig
├── .gitignore
├── GPL-LICENSE-2.txt
├── Gruntfile.js
├── MIT-LICENSE.txt
├── build
└── compiler.jar
├── demo
├── default-style
│ ├── css
│ │ └── player-styles.css
│ └── img
│ │ ├── dev
│ │ ├── play-overlay.png
│ │ └── player-sprites.png
│ │ ├── loader.gif
│ │ ├── play-overlay.png
│ │ └── player-sprites.png
├── embedded-player.html
├── font-style.html
├── font-style
│ ├── css
│ │ └── player-styles.css
│ ├── fonts
│ │ ├── fontawesome-ie7.css
│ │ ├── fontawesome-ie7.less
│ │ ├── fontawesome-webfont.afm
│ │ ├── fontawesome-webfont.eot
│ │ ├── fontawesome-webfont.ttf
│ │ ├── fontawesome-webfont.woff
│ │ ├── fontawesome.css
│ │ ├── fontawesome.less
│ │ ├── fontawesome.sass
│ │ ├── fontawesome.scss
│ │ └── icon-reference.html
│ └── img
│ │ └── loader.gif
├── index-plugin-dev.html
├── index.html
├── jme-jqm.html
├── jqm-style
│ ├── css
│ │ └── player-styles.css
│ └── img
│ │ ├── loader.gif
│ │ ├── play-overlay.png
│ │ └── player-sprites.png
├── js
│ ├── jme.base.js
│ ├── jme.base.min.js
│ ├── jme.full.js
│ ├── jme.full.min.js
│ └── plugins
│ │ ├── jme.embed.min.js
│ │ ├── jme.fullscreen.min.js
│ │ └── jme.track.min.js
└── media
│ └── sintel
│ ├── cc-by.png
│ ├── sintel-trailer.m4v
│ ├── sintel-trailer.png
│ ├── sintel-trailer.webm
│ ├── sintel-trailer_de.vtt
│ ├── sintel-trailer_en.vtt
│ ├── sintel-trailer_es.vtt
│ ├── sintel-trailer_fr.vtt
│ ├── sintel-trailer_it.vtt
│ └── sintel-trailer_nl.vtt
├── package.json
└── src
├── jme.embed.js
├── jme.fullscreen.js
├── jme.js
├── jme.playlist.js
└── jme.track.js
/.editorconfig:
--------------------------------------------------------------------------------
1 | # editorconfig.org
2 |
3 | # top-most EditorConfig file
4 | root = true
5 |
6 | [*]
7 | end_of_line = lf
8 | indent_style = tab
9 | charset = utf-8
10 | trim_trailing_whitespace = true
11 | insert_final_newline = true
12 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | *.swp
2 | *.un~
3 | *.tmp_*~
4 | node_modules/*
5 |
6 | .DS_Store
7 | .sass-cache
--------------------------------------------------------------------------------
/GPL-LICENSE-2.txt:
--------------------------------------------------------------------------------
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.
--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
1 | module.exports = function(grunt) {
2 |
3 | grunt.initConfig({
4 | pkg: grunt.file.readJSON('package.json'),
5 | concat: {
6 | options: {
7 | separator: ';'
8 | },
9 | full: {
10 | src: ['src/jme.js', 'src/jme.fullscreen.js', 'src/jme.track.js'],
11 | dest: 'demo/js/jme.full.js'
12 | },
13 | base: {
14 | src: ['src/jme.js'],
15 | dest: 'demo/js/jme.base.js'
16 | }
17 | },
18 | uglify: {
19 | options: {
20 | banner: ''
21 | },
22 | full: {
23 | src: 'demo/js/jme.full.js',
24 | dest: 'demo/js/jme.full.min.js'
25 | },
26 | base: {
27 | src: 'demo/js/jme.base.js',
28 | dest: 'demo/js/jme.base.min.js'
29 | },
30 | fullscreen: {
31 | src: 'src/jme.fullscreen.js',
32 | dest: 'demo/js/plugins/jme.fullscreen.min.js'
33 | },
34 | track: {
35 | src: 'src/jme.track.js',
36 | dest: 'demo/js/plugins/jme.track.min.js'
37 | },
38 | track: {
39 | src: 'src/jme.embed.js',
40 | dest: 'demo/js/plugins/jme.embed.min.js'
41 | }
42 | },
43 | watch: {
44 | files: ['src/jme.js', 'src/jme.fullscreen.js', 'src/jme.track.js'],
45 | tasks: 'default'
46 | }
47 | });
48 |
49 | grunt.loadNpmTasks('grunt-contrib-concat');
50 | grunt.loadNpmTasks('grunt-contrib-uglify');
51 | grunt.loadNpmTasks('grunt-contrib-watch');
52 |
53 | grunt.registerTask('default', ['concat', 'uglify']);
54 |
55 | };
--------------------------------------------------------------------------------
/MIT-LICENSE.txt:
--------------------------------------------------------------------------------
1 | Copyright (c) 2010 Alexander Farkas, http://protofunc.com/
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining
4 | a copy of this software and associated documentation files (the
5 | "Software"), to deal in the Software without restriction, including
6 | without limitation the rights to use, copy, modify, merge, publish,
7 | distribute, sublicense, and/or sell copies of the Software, and to
8 | permit persons to whom the Software is furnished to do so, subject to
9 | the following conditions:
10 |
11 | The above copyright notice and this permission notice shall be
12 | included in all copies or substantial portions of the Software.
13 |
14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
17 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
18 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
19 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
20 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--------------------------------------------------------------------------------
/build/compiler.jar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aFarkas/jMediaelement/d6d7391ad9695eab92ae725747488099f4eb75b0/build/compiler.jar
--------------------------------------------------------------------------------
/demo/default-style/css/player-styles.css:
--------------------------------------------------------------------------------
1 | button {
2 | overflow: visible;
3 | }
4 | button::-moz-focus-inner {
5 | padding:0;
6 | border:0;
7 | }
8 |
9 | /* default */
10 | html.jme-embedded-player,
11 | html.jme-embedded-player body {
12 | margin: 0;
13 | padding: 0;
14 | position: relative;
15 | width: 100%;
16 | height: 100%;
17 | overflow: hidden;
18 | background: #000;
19 | }
20 |
21 | html.jme-embedded-player .mediaplayer,
22 | html.jme-embedded-player .mediaplayer video {
23 | width: 100%;
24 | height: 100%;
25 | }
26 |
27 | .volume-slider,
28 | .time-slider {
29 | position: relative;
30 | font-size: 0;
31 | line-height: 0;
32 | zoom: 1;
33 | min-height: 1px;
34 | min-width: 1px;
35 | }
36 |
37 | .time-slider[aria-disabled="true"] {
38 | opacity: 0.6;
39 | }
40 |
41 | .volume-slider .ws-range-thumb,
42 | .time-slider .ws-range-thumb {
43 | position: absolute;
44 | display: block;
45 | min-height: 1px;
46 | min-width: 1px;
47 | background: #000;
48 | cursor: pointer;
49 | border-radius: 0;
50 | border: 0;
51 | }
52 |
53 | .volume-slider[aria-disabled="true"] .ws-range-thumb,
54 | .time-slider[aria-disabled="true"] .ws-range-thumb {
55 | cursor: default;
56 | }
57 |
58 | .buffer-progress {
59 | position: relative;
60 | zoom: 1;
61 | }
62 |
63 | .buffer-progress .buffer-progress-indicator {
64 | display: block;
65 | height: 100%;
66 | width: 0;
67 | left: 0;
68 | min-height: 1px;
69 | position: absolute;
70 | top: 0;
71 | background: #E3E3E3;
72 | }
73 |
74 | .time-slider .buffer-progress-indicator {
75 | cursor: pointer;
76 | }
77 |
78 | .jme-default-media-overlay {
79 | position: absolute;
80 | top: 0;
81 | left: 0;
82 | width: 100%;
83 | height: 100%;
84 | cursor: pointer;
85 | background: url("../img/loader.gif") no-repeat -9999px -9999px;
86 | }
87 |
88 | .state-playing .jme-default-media-overlay {
89 | background-image: none;
90 | }
91 |
92 | .state-waiting .jme-default-media-overlay {
93 | background-position: center;
94 | }
95 |
96 | .state-idle .jme-default-media-overlay,
97 | .state-ended .jme-default-media-overlay {
98 | background: url("../img/play-overlay.png") no-repeat center;
99 | }
100 | /* default end */
101 |
102 | .mediaplayer,
103 | video {
104 | position: relative;
105 | display: block;
106 | width: 512px;
107 | height: 288px;
108 | }
109 |
110 | .mediaplayer {
111 | height: auto;
112 | }
113 |
114 | .audioplayer {
115 | height: 160px;
116 | }
117 |
118 | .mediaplayer.ratio-16-9,
119 | .mediaplayer.ratio-4-3 {
120 | position: relative;
121 | height: 0;
122 | width: 100%;
123 | }
124 |
125 | .mediaplayer.ratio-16-9 {
126 | padding-bottom: 56.25%;
127 | }
128 |
129 | .mediaplayer.ratio-4-3 {
130 | padding-bottom: 75%;
131 | }
132 |
133 | .mediaplayer.ratio-16-9 video,
134 | .mediaplayer.ratio-16-9 .polyfill-video,
135 | .mediaplayer.ratio-4-3 video,
136 | .mediaplayer.ratio-4-3 .polyfill-video {
137 | position: absolute !important;
138 | top: 0;
139 | left: 0;
140 | width: 100% !important;
141 | height: 100% !important;
142 | }
143 |
144 | .jme-default-control-bar {
145 | position: absolute;
146 | left: 0;
147 | bottom: 10px;
148 | width: 100%;
149 | outline: none;
150 | }
151 |
152 | .mediaplayer .media-controls {
153 | max-width: 980px;
154 | margin: 0 auto;
155 | padding: 0 10px;
156 | -webkit-transition: all 400ms;
157 | transition: all 400ms;
158 | }
159 |
160 |
161 | .mediaplayer .currenttime-display,
162 | .mediaplayer .duration-display,
163 | .mediaplayer .time-select {
164 | font-family: monospace;
165 | }
166 |
167 | .videoplayer.state-playing .media-controls {
168 | -webkit-transform: translate(0, 60%);
169 | transform: translate(0, 60%);
170 | opacity: 0;
171 | }
172 | .no-opacity .videoplayer.state-playing .media-controls {
173 | visibility: hidden;
174 | }
175 | .videoplayer.useractive .media-controls {
176 | -webkit-transform: translate(0, 0);
177 | transform: translate(0, 0);
178 | opacity: 1;
179 | }
180 | .no-opacity .videoplayer.useractive .media-controls {
181 | visibility: visible;
182 | }
183 | .media-controls button {
184 | cursor: pointer;
185 | display: inline-block;
186 | overflow: visible;
187 | border: 0;
188 | padding: 0;
189 | border-radius: 5px;
190 | -webkit-appearance: none;
191 | background: url("../img/player-sprites.png") no-repeat 0 -200px;
192 | }
193 |
194 | .media-controls button:hover,
195 | .media-controls button:focus {
196 | background-position: 0 -300px;
197 | }
198 |
199 | .media-controls button:focus {
200 | outline: 1px dotted #666;
201 |
202 | }
203 |
204 | .media-controls .currenttime-display,
205 | .media-controls .duration-display {
206 | margin: 1px 0 0;
207 | }
208 |
209 | .media-controls button:active {
210 | background-position: 0 -400px;
211 | }
212 |
213 | .media-controls button .jme-icon {
214 | display: inline-block;
215 | vertical-align: top;
216 | width: 13px;
217 | height: 13px;
218 | background: url("../img/player-sprites.png") no-repeat -9999px -9999px;
219 | }
220 |
221 | .media-controls button .jme-text {
222 | position: absolute;
223 | left: -9999px;
224 | width: 0;
225 | overflow: hidden;
226 | }
227 |
228 | .media-controls button.play-pause {
229 | float: left;
230 | margin: 0 10px 0 0;
231 | height: 22px;
232 | width: 42px;
233 | }
234 |
235 | .media-controls button.play-pause .jme-icon {
236 | margin: 2px 0 0 2px;
237 | background-position: 0 -700px;
238 | }
239 |
240 | .media-controls button.play-pause.state-playing .jme-icon {
241 | background-position: 1px -799px;
242 | }
243 |
244 | .media-controls .media-bar {
245 | position: relative;
246 | margin: 0 0 0 55px;
247 | padding: 3px 5px 1px;
248 | height: 100%;
249 | min-height: 18px;
250 | border-radius: 5px 5px 5px 5px;
251 | color: #FFFFFF;
252 | font-size: 11px;
253 | background: url("../img/player-sprites.png") repeat-x scroll 0 0 #333333;
254 | }
255 |
256 | html > body .media-controls .media-bar {
257 | height: auto;
258 | background-color: transparent;
259 | }
260 | .media-controls .media-bar > * {
261 | float: left;
262 | }
263 |
264 | .media-controls .ws-range {
265 | position: relative;
266 | display: inline-block;
267 | vertical-align: middle;
268 | font-size: 0;
269 | outline: none;
270 | box-shdow: none;
271 | }
272 | .media-controls .ws-range-rail {
273 | position: absolute;
274 | display: block;
275 | top: 0;
276 | left: 0;
277 | right: 0;
278 | height: 100%;
279 | }
280 |
281 | .media-controls .time-slider {
282 | margin: 1px 10px 0;
283 | background: url("../img/player-sprites.png") repeat-x scroll 0 -104px #999999;
284 | border-radius: 3px 3px 3px 3px;
285 | height: 4px;
286 | padding: 1px;
287 | top: 3px;
288 | }
289 |
290 |
291 | .media-controls .time-slider .ws-range-thumb {
292 | background: url("../img/player-sprites.png") no-repeat scroll 0 -1099px transparent;
293 | height: 15px;
294 | margin: -5px 0 0 -2px;
295 | outline: medium none;
296 | top: 0;
297 | width: 5px;
298 | z-index: 9;
299 | }
300 |
301 |
302 | .media-controls .time-slider.ws-focus .ws-range-thumb,
303 | .media-controls .time-slider.ws-active .ws-range-thumb {
304 | background-position: 0 -1199px;
305 | }
306 |
307 | .media-controls .time-slider .ws-range-progress {
308 | position: absolute;
309 | height: 4px;
310 | background:#369;
311 | border-radius: 3px;
312 | cursor: pointer;
313 | left: 0;
314 | top: 0;
315 | box-shdow: none;
316 | }
317 |
318 | .media-controls .time-select {
319 | position: absolute;
320 | visibility: hidden;
321 | opacity: 0;
322 | top: -1.2em;
323 | background: #000;
324 | border-radius: 4px;
325 | color: #fff;
326 | display: inline-block;
327 | width: 3em;
328 | padding: 3px;
329 | margin: -6px 0 0 -1.5em;
330 | font-size: 12px;
331 | line-height: 14px;
332 | text-align: center;
333 | transition: opacity 400ms, visibility 400ms;
334 | }
335 |
336 | .media-controls .show-time-select {
337 | visibility: visible;
338 | opacity: 1;
339 | }
340 |
341 | .media-controls .buffer-progress {
342 | height: 100%;
343 | min-width: 40px;
344 | }
345 | .media-controls .buffer-progress .buffer-progress-indicator {
346 | background: #E3E3E3;
347 | border-radius: 3px 3px 3px 3px;
348 | cursor: pointer;
349 | }
350 |
351 | .media-controls .duration-display {
352 | margin: 0 10px 0 0;
353 | }
354 |
355 | .media-controls .volume-controls {
356 | width: 49px; /* IE7*/
357 | zoom: 1;
358 | overflow: hidden;
359 | }
360 |
361 | .media-controls .volume-controls > * {
362 | float: left;
363 | }
364 |
365 | .media-controls .volume-slider {
366 | background: url("../img/player-sprites.png") no-repeat scroll 1px -599px transparent;
367 | cursor: pointer;
368 | height: 14px;
369 | top: 1px;
370 | width: 30px;
371 | margin: 0 0 0 3px;
372 | }
373 |
374 | .media-controls .volume-slider .ws-range-progress {
375 | position: absolute;
376 | background: url("../img/player-sprites.png") no-repeat scroll 1px -499px transparent;
377 | height: 100%;
378 | left: 0;
379 | min-height: 1px;
380 | min-width: 1px;
381 | top: 0;
382 | box-shdow: none;
383 | }
384 |
385 | .state-muted .media-controls .volume-slider .ws-range-progress {
386 | visibility: hidden;
387 | }
388 |
389 | /*.state-muted .media-controls .volume-slider .ui-slider-handle {
390 | left: 0 !important;
391 | }*/
392 |
393 | .media-controls .volume-slider .ws-range-thumb {
394 | top: 0;
395 | left: 0;
396 | height: 100%;
397 | width: 1px;
398 | background: none;
399 | }
400 |
401 | .media-controls .mute-unmute .jme-icon {
402 | margin: 0 2px 1px 1px;
403 | background-position: 2px -1397px;
404 | }
405 |
406 | .media-controls .mute-unmute.state-unmute .jme-icon {
407 | background-position: 2px -1497px;
408 | }
409 |
410 | .media-controls .fullscreen {
411 | margin-left: 5px;
412 | }
413 |
414 | .no-fullwindow .fullscreen {
415 | display: none;
416 | }
417 |
418 | .media-controls .fullscreen,
419 | .media-controls .mute-unmute {
420 | width: 16px;
421 | height: 16px;
422 | }
423 |
424 | .media-controls .fullscreen .jme-icon {
425 | margin: 0 2px 1px 1px;
426 | background-position: 2px -897px;
427 | }
428 |
429 | .media-controls .fullscreen.state-exitfullscreen .jme-icon {
430 | background-position: 2px -997px;
431 | }
432 |
433 | html.has-media-fullscreen,
434 | body.has-media-fullscreen {
435 | overflow: hidden;
436 | }
437 |
438 | .player-fullscreen {
439 | position: fixed !important;
440 | z-index: 999999;
441 | background: #000;
442 | }
443 |
444 | .mediaplayer.player-fullscreen.state-playing.userinactive,
445 | .mediaplayer.player-fullscreen.state-playing.userinactive * {
446 | cursor: none !important;
447 | }
448 |
449 | .media-fullscreen,
450 | .player-fullscreen .polyfill-mediaelement,
451 | .player-fullscreen {
452 | top: 0 !important;
453 | left: 0 !important;
454 | right: 0 !important;
455 | bottom: 0 !important;
456 | width: 100% !important;
457 | height: 100% !important;
458 | padding: 0 !important;
459 | margin: 0 !important;
460 | }
461 |
462 | .media-fullscreen {
463 | position: relative;
464 | }
465 |
466 | .media-controls .subtitle-controls {
467 | position: relative;
468 | zoom: 1;
469 | margin-left: 5px;
470 | display: none;
471 | }
472 |
473 | .media-controls .subtitle-controls .subtitle-menu {
474 | position: absolute;
475 | bottom: 20px;
476 | right: 0px;
477 | overflow: hidden;
478 | min-width: 130px;
479 | max-width: 400px;
480 | }
481 |
482 | .has-track .media-controls .subtitle-controls {
483 | display: block;
484 | }
485 |
486 | .media-controls .subtitle-menu div {
487 | color: #fff;
488 | background: #000;
489 | background: rgba(0, 0, 0, 0.7);
490 | border-radius: 8px;
491 | padding: 5px;
492 | visibility: hidden;
493 | }
494 |
495 | .media-controls .subtitle-menu.visible-menu div {
496 | visibility: visible;
497 | }
498 |
499 | .media-controls .subtitle-menu ul {
500 | padding: 0;
501 | margin: 0;
502 | list-style: none;
503 | }
504 |
505 | .media-controls .subtitle-menu button {
506 | background: none;
507 | color: #fff;
508 | padding: 2px;
509 | margin: 1px 0;
510 | white-space: nowrap;
511 | }
512 |
513 | .media-controls .subtitle-menu button:before {
514 | content: '';
515 | display: inline-block;
516 | margin: -0.1em 3px 0 0;
517 | vertical-align: middle;
518 | width: 5px;
519 | height: 5px;
520 | border: 1px solid #ccc;
521 | border-radius: 50%;
522 | }
523 |
524 | .media-controls .subtitle-menu button[aria-checked="true"] {
525 | text-decoration: underline;
526 | }
527 |
528 | .media-controls .subtitle-menu button[aria-checked="true"]:before {
529 | background: #fff;
530 | }
531 |
532 | .media-controls .captions .jme-icon {
533 | width: 16px;
534 | height: 16px;
535 | background-position: 3px -1797px;
536 | }
537 |
538 | .media-controls .captions[role="checkbox"] {
539 | display: none;
540 | }
541 |
542 | /*for checkbox captions
543 | [data-tracks="1"] .media-controls .captions[role="checkbox"] {
544 | display: inline-block;
545 | }
546 |
547 | [data-tracks="1"] .media-controls .captions[role="checkbox"] + .captions {
548 | display: none;
549 | }
550 | */
551 |
552 | .audioplayer .media-controls .fullscreen,
553 | .mobile .media-controls .volume-controls,
554 | .mobile.no-fullscreen .media-controls .fullscreen {
555 | display: none;
556 | }
557 |
--------------------------------------------------------------------------------
/demo/default-style/img/dev/play-overlay.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aFarkas/jMediaelement/d6d7391ad9695eab92ae725747488099f4eb75b0/demo/default-style/img/dev/play-overlay.png
--------------------------------------------------------------------------------
/demo/default-style/img/dev/player-sprites.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aFarkas/jMediaelement/d6d7391ad9695eab92ae725747488099f4eb75b0/demo/default-style/img/dev/player-sprites.png
--------------------------------------------------------------------------------
/demo/default-style/img/loader.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aFarkas/jMediaelement/d6d7391ad9695eab92ae725747488099f4eb75b0/demo/default-style/img/loader.gif
--------------------------------------------------------------------------------
/demo/default-style/img/play-overlay.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aFarkas/jMediaelement/d6d7391ad9695eab92ae725747488099f4eb75b0/demo/default-style/img/play-overlay.png
--------------------------------------------------------------------------------
/demo/default-style/img/player-sprites.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aFarkas/jMediaelement/d6d7391ad9695eab92ae725747488099f4eb75b0/demo/default-style/img/player-sprites.png
--------------------------------------------------------------------------------
/demo/embedded-player.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | mediaplayer
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
--------------------------------------------------------------------------------
/demo/font-style.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | jme2
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
111 |
112 |
113 | icnfnt generated subset of FontAwesome 3.0.2
6 | .icon-remove .icon-play-circle .icon-repeat .icon-volume-off .icon-volume-down .icon-volume-up .icon-share .icon-check .icon-play .icon-pause .icon-resize-full .icon-resize-small .icon-spinner
--------------------------------------------------------------------------------
/demo/font-style/img/loader.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aFarkas/jMediaelement/d6d7391ad9695eab92ae725747488099f4eb75b0/demo/font-style/img/loader.gif
--------------------------------------------------------------------------------
/demo/index-plugin-dev.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | mediaplayer
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | jme2
47 |
48 |
49 |
50 |
51 |
52 |
JME is a declarative HTML component library including DOM APIs and CSS-hooks to extend/customize HTML5 mediaelements (audio/video)
53 |
55 |
56 |
66 |
67 |
68 |
69 |
74 |
75 |
76 |
77 |
mediaplayer
78 |
79 |
80 | jme element class
81 |
82 |
83 | mediaplayer
84 |
85 |
86 | prefered elements
87 |
88 |
89 | div
90 |
91 |
92 | jme pseudo classes
93 |
94 |
95 |
96 | media state classes
97 | state-idlestate-waitingstate-playingstate-initialstate-endedstate-erroruser state classes
104 | focusenteruseractivefover(:hover)
109 |
110 |
111 |
112 | jme content attributes
113 |
114 |
115 | controlbar
116 |
117 |
118 | controls
119 |
120 | jme interface
121 |
122 | {
123 | property boolean controlbar;
124 | property boolean fullscreen;
125 | readonly property jQuery media;
126 | jQuery addControls(controls);
127 | readonly property string embedUrl;
128 | jQuery getIframe([width, height]);
129 | };
130 |
131 |
132 |
133 |
The mediaplayer element class wraps a mediaelement (audio/video) and associates this mediaelement with its control elements. The mediaplayer element class serves also as an user interaction wrapper for the player.
134 |
135 |
Using jme pseudo classes to build the user interface.
136 |
137 |
138 | .mediaplayer .media-controls {
139 | transition: all 400ms ease 0s;
140 | }
141 | /* hide player controls, if mediaelement is playing,... */
142 | .mediaplayer.state-playing .media-controls {
143 | opacity: 0;
144 | }
145 | /* ...but show controls if user is moving his mouse */
146 | .mediaplayer.useractive .media-controls {
147 | opacity: 1;
148 | }
149 |
150 |
151 |
Using jme interface to switch to custom styleable controls:
152 |
153 |
154 | $('div.mediaplayer').jmeProp('controlbar', true);
155 |
156 |
157 |
Using jme interface to toggle fullscreen:
158 |
159 |
160 | $('div.mediaplayer').jmeProp('fullscreen', function(i, state){
161 | return !state;
162 | });
163 |
164 |
165 |
166 |
Dynamically add a new control to a mediaplayer:
167 |
168 |
169 | $('div.mediaplayer')
170 | .jmeFn('addControls', $('<button class="play-pause">play/pause</button>').prependTo('body') )
171 | ;
172 |
173 |
174 |
177 |
JME extensions for native audio/video element
178 |
179 |
180 | elements
181 |
182 |
183 | audio
184 |
185 |
186 | video
187 |
188 |
189 | jme interface
190 |
191 | {
192 | readonly property jQuery player;
193 | property mixed srces;
194 | readonly property boolean isPlaying;
195 | readonly property number progress;
196 | jQuery togglePlay();
197 | Rangearray concerningRange([type:string ("buffered"), time:string (currentTime)]);
198 | formatedTime formatTime(seconds:number[, format:Array]);
199 | };
200 |
201 |
202 |
205 |
play-pause button
206 |
207 |
208 | jme element class
209 |
210 |
211 | play-pause
212 |
213 |
214 | prefered elements
215 |
216 |
217 | button
218 |
219 |
220 | jme pseudo classes
221 |
222 |
223 | state-paused, state-playing
224 |
225 | jme interface
226 |
227 | {
228 | readonly property jQuery player;
229 | readonly property jQuery media;
230 | };
231 |
232 |
233 |
234 | play / pause
235 |
236 |
238 |
mute-unmute button
239 |
240 |
241 | jme element class
242 |
243 |
244 | mute-unmute
245 |
246 |
247 | prefered elements
248 |
249 |
250 | button
251 |
252 |
253 | jme pseudo classes
254 |
255 |
256 | state-mute, state-unmute
257 |
258 | jme interface
259 |
260 | {
261 | readonly property jQuery player;
262 | readonly property jQuery media;
263 | };
264 |
265 |
266 |
267 | mute /unmute
268 |
269 |
271 |
buffer-progress
272 |
273 |
274 | jme element class
275 |
276 |
277 | buffer-progress
278 |
279 |
280 | prefered elements
281 |
282 |
283 | div
284 |
285 |
286 | jme interface
287 |
288 | {
289 | readonly property jQuery player;
290 | readonly property jQuery media;
291 | readonly proptery Number progress;
292 | };
293 |
294 |
295 |
297 |
volume-slider
298 |
299 |
300 | jme element class
301 |
302 |
303 | volume-slider
304 |
305 |
306 | prefered elements
307 |
308 |
309 | div
310 |
311 |
312 | jme interface
313 |
314 | {
315 | readonly property jQuery player;
316 | readonly property jQuery media;
317 | };
318 |
319 |
320 |
322 |
time-slider
323 |
324 |
325 | jme element class
326 |
327 |
328 | time-slider
329 |
330 |
331 | prefered elements
332 |
333 |
334 | div
335 |
336 |
337 | jme content attributes
338 |
339 |
340 | format
341 |
342 | jme interface
343 |
344 | {
345 | readonly property jQuery player;
346 | readonly property jQuery media;
347 | property mixed format; //not implemented yet
348 | };
349 |
350 |
351 |
354 |
currenttime-display
355 |
356 |
357 | jme element class
358 |
359 |
360 | currenttime-display
361 |
362 |
363 | prefered elements
364 |
365 |
366 | div
367 |
368 |
369 | jme content attributes
370 |
371 |
372 | format
373 |
374 |
375 | countdown
376 |
377 | jme interface
378 |
379 | {
380 | readonly property jQuery player;
381 | readonly property jQuery media;
382 | property boolean countdown;
383 | property mixed format;
384 | };
385 |
386 |
387 |
388 |
389 |
391 |
394 |
duration-display
395 |
396 |
397 | jme element class
398 |
399 |
400 | currenttime-display
401 |
402 |
403 | prefered elements
404 |
405 |
406 | div
407 |
408 |
409 | jme content attributes
410 |
411 |
412 | format
413 |
414 | jme interface
415 |
416 | {
417 | readonly property jQuery player;
418 | readonly property jQuery media;
419 | property mixed format;
420 | };
421 |
422 |
423 |
428 |
intrinsic ratio responsive/fluid video
429 |
based on http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
430 |
431 |
16:9 ratio
432 |
433 |
434 |
437 |
438 |
439 |
4:3 ratio
440 |
441 |
442 |
445 |
446 |
JME 2 + jQuery Mobile
12 |
61 |
62 | JME 2 + jQuery Mobile
63 | Back
64 | Home
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
123 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
160 |
',_create:function(b,c,d){var e,f=function(){clearTimeout(e),b.jmeFn("updateControlbar"),e=setTimeout(function(){b.jmeFn("updateControlbar")},9)};setTimeout(function(){c.bind("loadedmetadata volumechange play pause ended emptied",f),d.bind("updatetimeformat controlsadded controlschanged playerdimensionchange",f),a(window).bind("resize emchange",f)},1),f()}}),function(){var b={add:function(b,c,d){var e,f,g=a.data(b,"jmeuseractivity")||a.data(b,"jmeuseractivity",{idletime:2500,idle:!0,trigger:{}}),h=a(b),i=function(){g.idle||(g.idle=!0,g.trigger.userinactive&&h.trigger("userinactive"))},j=function(a){!a||"mousemove"===a.type&&a.pageX===e&&a.pageY===f||("mousemove"===a.type&&(e=a.pageX,f=a.pageY),g.idleTimer&&clearTimeout(g.idleTimer),g.idleTimer=setTimeout(i,g.idletime),g.idle&&(g.idle=!1,g.trigger.useractive&&h.trigger("useractive")))};g.idletime=(c||{}).idletime||g.idletime,c&&"idle"in c&&(g.idle=c.idle),g.trigger[d]=!0,g.bound||(h.bind("mouseleave.jmeuseractivity",i).bind("mousemove.jmeuseractivity focusin.jmeuseractivity mouseenter.jmeuseractivity keydown.jmeuseractivity keyup.jmeuseractivity mousedown.jmeuseractivity",j),g.bound=!0),g.idle||j({type:"initunidled"})},remove:function(b,c){var d=a.data(b,"jmeuseractivity")||a.data(b,"jmeuseractivity",{idletime:2500,idle:!0,trigger:{}});d.trigger[c]=!1,d.trigger.useractive||d.trigger.userinactive||(a(b).unbind(".jmeuseractivity"),d.bound=!1)}};a.each(["useractive","userinactive"],function(c,d){a.event.special[d]={setup:function(a){b.add(this,a,d)},teardown:function(){b.remove(this,d)}}})}()}(jQuery),function(a){function b(a,b){var c,d,e;return{get:function(){return e?void 0:a.apply(this,arguments)},set:function(){clearTimeout(c),clearTimeout(d);var a=this,f=arguments;e=!0,c=setTimeout(function(){b.apply(a,f),d=setTimeout(function(){e=!1},30)},0)}}}var c="pseudoClasses",d={play:1,playing:1},e={pause:1,ended:1},f=(!(Modernizr.boxSizing||Modernizr["display-table"]||Modernizr.video||a.support.getSetAttribute),function(){a.webshims.loader&&a.webshims.loader.loadList(["range-ui"])}),g=function(b){f(),a.webshims.ready("range-ui",b)},h='{%text%}
',j='
';a.jme.registerPlugin("play-pause",{pseudoClasses:{play:"state-paused",pause:"state-playing"},structure:h,text:"play / pause",_create:function(b,f){var g=a.jme.getButtonText(b,[this[c].play,this[c].pause]);f.bind("play playing ended pause updateJMEState",function(a){var b=a.type;b=d[b]?1:e[b]?0:f.jmeProp("isPlaying")?1:0,g(b)}).triggerHandler("updateJMEState"),b.bind(b.is("select")?"change":"click",function(a){f.jmeFn("togglePlay"),a.stopPropagation()})}}),a.jme.registerPlugin("mute-unmute",{pseudoClasses:{mute:"state-mute",unmute:"state-unmute"},structure:h,text:"mute / unmute",_create:function(b,d){var e=a.jme.getButtonText(b,[this[c].mute,this[c].unmute]);d.bind("volumechange updateJMEState",function(){e(d.prop("muted")?1:0)}).triggerHandler("updateJMEState"),b.bind(b.is("select")?"change":"click",function(a){d.prop("muted",!d.prop("muted")),a.stopPropagation()})}}),a.jme.registerPlugin("volume-slider",{structure:j,_create:function(a,c){f();var d=function(){var d,e;e=b(function(){var a=c.prop("volume");void 0!==a&&d.value(a)},function(){c.prop({muted:!1,volume:d.options.value})}),d=a.rangeUI({min:0,max:1,step:"any",input:function(){e.set()}}).data("rangeUi"),c.bind("volumechange",e.get)};g(d)}}),a.jme.registerPlugin("time-slider",{structure:j,pseudoClasses:{no:"no-duration"},options:{format:["mm","ss"]},_create:function(d,e,h){f();var i=this,j=function(){var f,g,j,k,l=a.jme.classNS+"has-duration",m=(a.jme.classNS+"no-duration",e.prop("duration"));f=b(function(){var a=e.prop("currentTime");if(!isNaN(a))try{j.value(a)}catch(b){}},function(){try{e.prop("currentTime",j.options.value).triggerHandler("timechanged",[j.options.value])}catch(a){}}),g=function(){m=e.prop("duration"),l=m&&isFinite(m)&&!isNaN(m),l?(j.disabled(!1),j.max(m),h.removeClass(i[c].no)):(j.disabled(!0),j.max(Number.MAX_VALUE),h.addClass(i[c].no))},j=d.rangeUI({min:0,value:e.prop("currentTime")||0,step:"any",input:function(){f.set()},textValue:function(a){return e.jmeFn("formatTime",a)}}).data("rangeUi"),k=a('
').prependTo(d)),g()};g(j)}}),a.jme.defineMethod("concerningRange",function(b,c){var d=this,e={start:0,end:0};if(b||(b="buffered"),b=a.prop(d,b),null==c&&(c=a.prop(d,"currentTime")),!(b&&"length"in b))return e;for(var f=0,g=b.length;g>f&&(e.start=b.start(f),e.end=b.end(f),!(e.start<=c&&e.end>=c));f++);return e}),a.jme.defineProp("progress",{get:function(b){var c=a.jme.data(b);if(!c.media)return 0;var d=c.media.jmeFn("concerningRange").end/c.media.prop("duration")*100;return d>99.4&&(d=100),d||0},readonly:!0}),a.jme.registerPlugin("buffer-progress",{_create:function(b,c,d,e){var f=a('
').appendTo(b),g=function(){var a=c.jmeProp("progress");e.progress!==a&&(e.progress=a,f.css("width",a+"%"))};c.bind({progress:g,emptied:function(){f.css("width",0),e.progress=0},playing:g}),g()}});var k={hh:6e4,mm:60,ss:1,ms:.001},l=function(b,c){var d;c||(c=["mm","ss"]),null==b&&(d=a.jme.data(this),b=a.prop(d.media,"duration")),b||(b=0);for(var e,f=[],g=0,h=c.length;h>g;g++)"ms"==c[g]&&g==h-1?e=Math.round(b/k[c[g]]/10):(e=parseInt(b/k[c[g]],10),b%=k[c[g]]),10>e&&(e="0"+e),f.push(e);return f.join(":")};a.jme.defineMethod("formatTime",l),a.jme.defineProp("format",{set:function(b,c){a.isArray(c)||(c=c.split(":"));var d=a.jme.data(b);return d.format=c,a(b).triggerHandler("updatetimeformat"),d.player.triggerHandler("updatetimeformat"),"noDataSet"}}),a.jme.registerPlugin("duration-display",{structure:i,options:{format:"mm:ss"},_create:function(a,b,c,d){"string"==typeof d.format&&(d.format=d.format.split(":"));var e=function(){a.html(l(b.prop("duration"),d.format))};b.bind("durationchange emptied",e),a.bind("updatetimeformat",e).jmeProp("format",d.format)}}),a.jme.defineProp("countdown",{set:function(b,c){var d=a.jme.data(b);return d.countdown=!!c,a(b).triggerHandler("updatetimeformat"),d.player.triggerHandler("updatetimeformat"),"noDataSet"}}),a.jme.registerPlugin("currenttime-display",{structure:i,options:{format:"mm:ss",countdown:!1},_create:function(a,b,c,d){"string"==typeof d.format&&(d.format=d.format.split(":"));var e=function(){var c=b.prop("currentTime");d.countdown&&(c=(b.prop("duration")||0)-c,.7>c&&(c=0)),a.html(l(c,d.format))};b.bind("timeupdate emptied durationchange",e),a.bind("updatetimeformat",e).jmeProp("format",d.format)}}),a.jme.registerPlugin("poster-display",{structure:"
",options:{},_create:function(b,c){var d=function(){var d=c.prop("poster");d?b.html('
',_create:function(b,c,d){var e,f=function(){clearTimeout(e),b.jmeFn("updateControlbar"),e=setTimeout(function(){b.jmeFn("updateControlbar")},9)};setTimeout(function(){c.bind("loadedmetadata volumechange play pause ended emptied",f),d.bind("updatetimeformat controlsadded controlschanged playerdimensionchange",f),a(window).bind("resize emchange",f)},1),f()}}),function(){var b={add:function(b,c,d){var e,f,g=a.data(b,"jmeuseractivity")||a.data(b,"jmeuseractivity",{idletime:2500,idle:!0,trigger:{}}),h=a(b),i=function(){g.idle||(g.idle=!0,g.trigger.userinactive&&h.trigger("userinactive"))},j=function(a){!a||"mousemove"===a.type&&a.pageX===e&&a.pageY===f||("mousemove"===a.type&&(e=a.pageX,f=a.pageY),g.idleTimer&&clearTimeout(g.idleTimer),g.idleTimer=setTimeout(i,g.idletime),g.idle&&(g.idle=!1,g.trigger.useractive&&h.trigger("useractive")))};g.idletime=(c||{}).idletime||g.idletime,c&&"idle"in c&&(g.idle=c.idle),g.trigger[d]=!0,g.bound||(h.bind("mouseleave.jmeuseractivity",i).bind("mousemove.jmeuseractivity focusin.jmeuseractivity mouseenter.jmeuseractivity keydown.jmeuseractivity keyup.jmeuseractivity mousedown.jmeuseractivity",j),g.bound=!0),g.idle||j({type:"initunidled"})},remove:function(b,c){var d=a.data(b,"jmeuseractivity")||a.data(b,"jmeuseractivity",{idletime:2500,idle:!0,trigger:{}});d.trigger[c]=!1,d.trigger.useractive||d.trigger.userinactive||(a(b).unbind(".jmeuseractivity"),d.bound=!1)}};a.each(["useractive","userinactive"],function(c,d){a.event.special[d]={setup:function(a){b.add(this,a,d)},teardown:function(){b.remove(this,d)}}})}()}(jQuery),function(a){function b(a,b){var c,d,e;return{get:function(){return e?void 0:a.apply(this,arguments)},set:function(){clearTimeout(c),clearTimeout(d);var a=this,f=arguments;e=!0,c=setTimeout(function(){b.apply(a,f),d=setTimeout(function(){e=!1},30)},0)}}}var c="pseudoClasses",d={play:1,playing:1},e={pause:1,ended:1},f=(!(Modernizr.boxSizing||Modernizr["display-table"]||Modernizr.video||a.support.getSetAttribute),function(){a.webshims.loader&&a.webshims.loader.loadList(["range-ui"])}),g=function(b){f(),a.webshims.ready("range-ui",b)},h='{%text%}
',j='
';a.jme.registerPlugin("play-pause",{pseudoClasses:{play:"state-paused",pause:"state-playing"},structure:h,text:"play / pause",_create:function(b,f){var g=a.jme.getButtonText(b,[this[c].play,this[c].pause]);f.bind("play playing ended pause updateJMEState",function(a){var b=a.type;b=d[b]?1:e[b]?0:f.jmeProp("isPlaying")?1:0,g(b)}).triggerHandler("updateJMEState"),b.bind(b.is("select")?"change":"click",function(a){f.jmeFn("togglePlay"),a.stopPropagation()})}}),a.jme.registerPlugin("mute-unmute",{pseudoClasses:{mute:"state-mute",unmute:"state-unmute"},structure:h,text:"mute / unmute",_create:function(b,d){var e=a.jme.getButtonText(b,[this[c].mute,this[c].unmute]);d.bind("volumechange updateJMEState",function(){e(d.prop("muted")?1:0)}).triggerHandler("updateJMEState"),b.bind(b.is("select")?"change":"click",function(a){d.prop("muted",!d.prop("muted")),a.stopPropagation()})}}),a.jme.registerPlugin("volume-slider",{structure:j,_create:function(a,c){f();var d=function(){var d,e;e=b(function(){var a=c.prop("volume");void 0!==a&&d.value(a)},function(){c.prop({muted:!1,volume:d.options.value})}),d=a.rangeUI({min:0,max:1,step:"any",input:function(){e.set()}}).data("rangeUi"),c.bind("volumechange",e.get)};g(d)}}),a.jme.registerPlugin("time-slider",{structure:j,pseudoClasses:{no:"no-duration"},options:{format:["mm","ss"]},_create:function(d,e,h){f();var i=this,j=function(){var f,g,j,k,l=a.jme.classNS+"has-duration",m=(a.jme.classNS+"no-duration",e.prop("duration"));f=b(function(){var a=e.prop("currentTime");if(!isNaN(a))try{j.value(a)}catch(b){}},function(){try{e.prop("currentTime",j.options.value).triggerHandler("timechanged",[j.options.value])}catch(a){}}),g=function(){m=e.prop("duration"),l=m&&isFinite(m)&&!isNaN(m),l?(j.disabled(!1),j.max(m),h.removeClass(i[c].no)):(j.disabled(!0),j.max(Number.MAX_VALUE),h.addClass(i[c].no))},j=d.rangeUI({min:0,value:e.prop("currentTime")||0,step:"any",input:function(){f.set()},textValue:function(a){return e.jmeFn("formatTime",a)}}).data("rangeUi"),k=a('
').prependTo(d)),g()};g(j)}}),a.jme.defineMethod("concerningRange",function(b,c){var d=this,e={start:0,end:0};if(b||(b="buffered"),b=a.prop(d,b),null==c&&(c=a.prop(d,"currentTime")),!(b&&"length"in b))return e;for(var f=0,g=b.length;g>f&&(e.start=b.start(f),e.end=b.end(f),!(e.start<=c&&e.end>=c));f++);return e}),a.jme.defineProp("progress",{get:function(b){var c=a.jme.data(b);if(!c.media)return 0;var d=c.media.jmeFn("concerningRange").end/c.media.prop("duration")*100;return d>99.4&&(d=100),d||0},readonly:!0}),a.jme.registerPlugin("buffer-progress",{_create:function(b,c,d,e){var f=a('
').appendTo(b),g=function(){var a=c.jmeProp("progress");e.progress!==a&&(e.progress=a,f.css("width",a+"%"))};c.bind({progress:g,emptied:function(){f.css("width",0),e.progress=0},playing:g}),g()}});var k={hh:6e4,mm:60,ss:1,ms:.001},l=function(b,c){var d;c||(c=["mm","ss"]),null==b&&(d=a.jme.data(this),b=a.prop(d.media,"duration")),b||(b=0);for(var e,f=[],g=0,h=c.length;h>g;g++)"ms"==c[g]&&g==h-1?e=Math.round(b/k[c[g]]/10):(e=parseInt(b/k[c[g]],10),b%=k[c[g]]),10>e&&(e="0"+e),f.push(e);return f.join(":")};a.jme.defineMethod("formatTime",l),a.jme.defineProp("format",{set:function(b,c){a.isArray(c)||(c=c.split(":"));var d=a.jme.data(b);return d.format=c,a(b).triggerHandler("updatetimeformat"),d.player.triggerHandler("updatetimeformat"),"noDataSet"}}),a.jme.registerPlugin("duration-display",{structure:i,options:{format:"mm:ss"},_create:function(a,b,c,d){"string"==typeof d.format&&(d.format=d.format.split(":"));var e=function(){a.html(l(b.prop("duration"),d.format))};b.bind("durationchange emptied",e),a.bind("updatetimeformat",e).jmeProp("format",d.format)}}),a.jme.defineProp("countdown",{set:function(b,c){var d=a.jme.data(b);return d.countdown=!!c,a(b).triggerHandler("updatetimeformat"),d.player.triggerHandler("updatetimeformat"),"noDataSet"}}),a.jme.registerPlugin("currenttime-display",{structure:i,options:{format:"mm:ss",countdown:!1},_create:function(a,b,c,d){"string"==typeof d.format&&(d.format=d.format.split(":"));var e=function(){var c=b.prop("currentTime");d.countdown&&(c=(b.prop("duration")||0)-c,.7>c&&(c=0)),a.html(l(c,d.format))};b.bind("timeupdate emptied durationchange",e),a.bind("updatetimeformat",e).jmeProp("format",d.format)}}),a.jme.registerPlugin("poster-display",{structure:"
",options:{},_create:function(b,c){var d=function(){var d=c.prop("poster");d?b.html('{%text%} {%text%} '+c+" ":"",''+a.label+c+"
').prependTo("body").data("jme",{controlbar:!0});"video"==d.e&&(d.a.preload="none"),a.jme||(d.a.controls="controls");var c=a(document.createElement(d.e)).attr(d.a).appendTo(b);"video"==d.e&&c.css({width:"100%",height:"100%"}),a.each(d.c,function(b,d){a(document.createElement(d.e)).attr(d.a).appendTo(c)}),a("body").updatePolyfill(),c.mediaLoad()}))}}!function(b){a.jme?b(a):a(window).on("jmepluginready",function(){b(a)})}(function(a){var d=function(){d.run||(a.jme.options.embeddedPlayer&&(b=a.jme.options.embeddedPlayer),b?b+=-1!=b.indexOf("?")?"&":"?":window.console&&console.log("you need to define a path to the embedded player $.jme.options.embeddedPlayer")),d.run=!0};a.jme.defineMethod("getIframe",function(b,c){b||(b=640),c||(c=360),/\d$/.test(""+b)&&(b+="px"),/\d$/.test(""+c)&&(c+="px");var d="width: "+b+"; height: "+c+"; overflow: hidden; border: none;";return''}),a.jme.defineProp("embedUrl",{get:function(e){d();var f=a.jme.data(e),g=(f.media.prop("src"),{a:{},c:[]});return f.media.each(function(){g.e=f.media.prop("nodeName").toLowerCase(),a.each(["poster","src","autoplay","loop","muted","title"],function(a,b){var c=f.media.attr(b);null!=c&&(g.a[b]=f.media.prop(b))}),a("track",f.media).each(function(){var b=a(this),c={e:"track",a:{}};g.c.push(c),a.each(["src","srclang","kind","label"],function(a,d){var e=b.attr(d);null!=e&&(c.a[d]=b.prop(d))})}),a("source",f.media).each(function(){var b=a(this),c={e:"source",a:{}};g.c.push(c),a.each(["src","media","type"],function(a,d){var e=b.attr(d);null!=e&&(c.a[d]=b.prop(d))})})}),b+"jmeembed="+encodeURIComponent(JSON.stringify(g)).replace(c,"+")},readonly:!0})})}(window.webshims&&webshims.$||jQuery);
--------------------------------------------------------------------------------
/demo/js/plugins/jme.fullscreen.min.js:
--------------------------------------------------------------------------------
1 | !function(a){var b=window.webshims&&webshims.$||jQuery;b.jme?a(b):b(window).on("jmepluginready",function(){a(b)})}(function(a){var b='{%text%} {%text%} '+n+" ":"",''+e.label+n+"
').prependTo('body').data('jme', {controlbar: true});
34 | if(cfg.e == 'video'){
35 | cfg.a.preload = 'none';
36 | }
37 | if(!$.jme){
38 | cfg.a.controls = 'controls';
39 | }
40 | var media = $(document.createElement(cfg.e)).attr(cfg.a).appendTo(player);
41 |
42 | if(cfg.e == 'video'){
43 | media.css({width: '100%', height: '100%'});
44 | }
45 | $.each(cfg.c, function(i, child){
46 | $(document.createElement(child.e)).attr(child.a).appendTo(media);
47 | });
48 | $('body').updatePolyfill();
49 | media.mediaLoad();
50 | });
51 | }
52 | }
53 | }
54 | (function (factory) {
55 | if($.jme){
56 | factory($);
57 | } else {
58 | $(window).on('jmepluginready', function(){
59 | factory($);
60 | });
61 | }
62 |
63 | }(function($){
64 | var createEmbedUrl = function(){
65 | if(!createEmbedUrl.run){
66 | if($.jme.options.embeddedPlayer){
67 | embedURL = $.jme.options.embeddedPlayer;
68 | }
69 | if(embedURL){
70 | embedURL += (embedURL.indexOf('?') != -1) ? '&' : '?';
71 |
72 | } else if(window.console) {
73 | console.log('you need to define a path to the embedded player $.jme.options.embeddedPlayer');
74 | }
75 | }
76 | createEmbedUrl.run = true;
77 | };
78 |
79 | $.jme.defineMethod('getIframe', function(width, height){
80 | if(!width){
81 | width = 640;
82 | }
83 | if(!height){
84 | height = 360;
85 | }
86 | if(/\d$/.test(''+width)){
87 | width += 'px';
88 | }
89 | if(/\d$/.test(''+height)){
90 | height += 'px';
91 | }
92 | var style = 'width: '+width +'; height: '+ height +'; overflow: hidden; border: none;';
93 | return '';
94 | });
95 |
96 | $.jme.defineProp('embedUrl', {
97 | get: function(elem){
98 | createEmbedUrl();
99 | var data = $.jme.data(elem);
100 | var src = data.media.prop('src');
101 | var obj = {a: {}, c:[]};
102 |
103 | data.media.each(function(){
104 | obj.e = data.media.prop('nodeName').toLowerCase();
105 |
106 | $.each(['poster', 'src', 'autoplay', 'loop', 'muted', 'title'], function(i, attr){
107 | var val = data.media.attr(attr);
108 | if(val != null){
109 | obj.a[attr] = data.media.prop(attr);
110 | }
111 | });
112 | $('track', data.media).each(function(){
113 | var track = $(this);
114 | var child = {e: 'track', a: {}};
115 | obj.c.push(child);
116 | $.each(['src', 'srclang', 'kind', 'label'], function(i, attr){
117 | var val = track.attr(attr);
118 | if(val != null){
119 | child.a[attr] = track.prop(attr);
120 | }
121 | });
122 | });
123 | $('source', data.media).each(function(){
124 | var source = $(this);
125 | var child = {e: 'source', a: {}};
126 | obj.c.push(child);
127 | $.each(['src', 'media', 'type'], function(i, attr){
128 | var val = source.attr(attr);
129 | if(val != null){
130 | child.a[attr] = source.prop(attr);
131 | }
132 | });
133 | });
134 | });
135 |
136 | return embedURL + 'jmeembed=' + encodeURIComponent(JSON.stringify(obj)).replace( r20, "+" );
137 | },
138 | readonly: true
139 | });
140 |
141 | }));
142 | })(window.webshims && webshims.$ || jQuery);
143 |
144 |
--------------------------------------------------------------------------------
/src/jme.fullscreen.js:
--------------------------------------------------------------------------------
1 | (function (factory) {
2 | var $ = window.webshims && webshims.$ || jQuery;
3 | if($.jme){
4 | factory($);
5 | } else {
6 | $(window).on('jmepluginready', function(){
7 | factory($);
8 | });
9 | }
10 |
11 | }(function($){
12 | var btnStructure = '{%text%} {%text%} '+ lang +' ' : '';
121 | return ''+ track.label + lang +'