├── License-Apache.rst
├── License-GNU.rst
├── README.md
├── build
├── rangeslider.min.css
└── rangeslider.min.js
├── demo.css
├── demo.html
├── lib
└── video-js
│ └── video.min.js
└── src
├── rangeslider.css
└── rangeslider.js
/License-Apache.rst:
--------------------------------------------------------------------------------
1 | Apache License
2 | Version 2.0, January 2004
3 | http://www.apache.org/licenses/
4 |
5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
6 |
7 | 1. Definitions.
8 |
9 | "License" shall mean the terms and conditions for use, reproduction,
10 | and distribution as defined by Sections 1 through 9 of this document.
11 |
12 | "Licensor" shall mean the copyright owner or entity authorized by
13 | the copyright owner that is granting the License.
14 |
15 | "Legal Entity" shall mean the union of the acting entity and all
16 | other entities that control, are controlled by, or are under common
17 | control with that entity. For the purposes of this definition,
18 | "control" means (i) the power, direct or indirect, to cause the
19 | direction or management of such entity, whether by contract or
20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the
21 | outstanding shares, or (iii) beneficial ownership of such entity.
22 |
23 | "You" (or "Your") shall mean an individual or Legal Entity
24 | exercising permissions granted by this License.
25 |
26 | "Source" form shall mean the preferred form for making modifications,
27 | including but not limited to software source code, documentation
28 | source, and configuration files.
29 |
30 | "Object" form shall mean any form resulting from mechanical
31 | transformation or translation of a Source form, including but
32 | not limited to compiled object code, generated documentation,
33 | and conversions to other media types.
34 |
35 | "Work" shall mean the work of authorship, whether in Source or
36 | Object form, made available under the License, as indicated by a
37 | copyright notice that is included in or attached to the work
38 | (an example is provided in the Appendix below).
39 |
40 | "Derivative Works" shall mean any work, whether in Source or Object
41 | form, that is based on (or derived from) the Work and for which the
42 | editorial revisions, annotations, elaborations, or other modifications
43 | represent, as a whole, an original work of authorship. For the purposes
44 | of this License, Derivative Works shall not include works that remain
45 | separable from, or merely link (or bind by name) to the interfaces of,
46 | the Work and Derivative Works thereof.
47 |
48 | "Contribution" shall mean any work of authorship, including
49 | the original version of the Work and any modifications or additions
50 | to that Work or Derivative Works thereof, that is intentionally
51 | submitted to Licensor for inclusion in the Work by the copyright owner
52 | or by an individual or Legal Entity authorized to submit on behalf of
53 | the copyright owner. For the purposes of this definition, "submitted"
54 | means any form of electronic, verbal, or written communication sent
55 | to the Licensor or its representatives, including but not limited to
56 | communication on electronic mailing lists, source code control systems,
57 | and issue tracking systems that are managed by, or on behalf of, the
58 | Licensor for the purpose of discussing and improving the Work, but
59 | excluding communication that is conspicuously marked or otherwise
60 | designated in writing by the copyright owner as "Not a Contribution."
61 |
62 | "Contributor" shall mean Licensor and any individual or Legal Entity
63 | on behalf of whom a Contribution has been received by Licensor and
64 | subsequently incorporated within the Work.
65 |
66 | 2. Grant of Copyright License. Subject to the terms and conditions of
67 | this License, each Contributor hereby grants to You a perpetual,
68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
69 | copyright license to reproduce, prepare Derivative Works of,
70 | publicly display, publicly perform, sublicense, and distribute the
71 | Work and such Derivative Works in Source or Object form.
72 |
73 | 3. Grant of Patent License. Subject to the terms and conditions of
74 | this License, each Contributor hereby grants to You a perpetual,
75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
76 | (except as stated in this section) patent license to make, have made,
77 | use, offer to sell, sell, import, and otherwise transfer the Work,
78 | where such license applies only to those patent claims licensable
79 | by such Contributor that are necessarily infringed by their
80 | Contribution(s) alone or by combination of their Contribution(s)
81 | with the Work to which such Contribution(s) was submitted. If You
82 | institute patent litigation against any entity (including a
83 | cross-claim or counterclaim in a lawsuit) alleging that the Work
84 | or a Contribution incorporated within the Work constitutes direct
85 | or contributory patent infringement, then any patent licenses
86 | granted to You under this License for that Work shall terminate
87 | as of the date such litigation is filed.
88 |
89 | 4. Redistribution. You may reproduce and distribute copies of the
90 | Work or Derivative Works thereof in any medium, with or without
91 | modifications, and in Source or Object form, provided that You
92 | meet the following conditions:
93 |
94 | (a) You must give any other recipients of the Work or
95 | Derivative Works a copy of this License; and
96 |
97 | (b) You must cause any modified files to carry prominent notices
98 | stating that You changed the files; and
99 |
100 | (c) You must retain, in the Source form of any Derivative Works
101 | that You distribute, all copyright, patent, trademark, and
102 | attribution notices from the Source form of the Work,
103 | excluding those notices that do not pertain to any part of
104 | the Derivative Works; and
105 |
106 | (d) If the Work includes a "NOTICE" text file as part of its
107 | distribution, then any Derivative Works that You distribute must
108 | include a readable copy of the attribution notices contained
109 | within such NOTICE file, excluding those notices that do not
110 | pertain to any part of the Derivative Works, in at least one
111 | of the following places: within a NOTICE text file distributed
112 | as part of the Derivative Works; within the Source form or
113 | documentation, if provided along with the Derivative Works; or,
114 | within a display generated by the Derivative Works, if and
115 | wherever such third-party notices normally appear. The contents
116 | of the NOTICE file are for informational purposes only and
117 | do not modify the License. You may add Your own attribution
118 | notices within Derivative Works that You distribute, alongside
119 | or as an addendum to the NOTICE text from the Work, provided
120 | that such additional attribution notices cannot be construed
121 | as modifying the License.
122 |
123 | You may add Your own copyright statement to Your modifications and
124 | may provide additional or different license terms and conditions
125 | for use, reproduction, or distribution of Your modifications, or
126 | for any such Derivative Works as a whole, provided Your use,
127 | reproduction, and distribution of the Work otherwise complies with
128 | the conditions stated in this License.
129 |
130 | 5. Submission of Contributions. Unless You explicitly state otherwise,
131 | any Contribution intentionally submitted for inclusion in the Work
132 | by You to the Licensor shall be under the terms and conditions of
133 | this License, without any additional terms or conditions.
134 | Notwithstanding the above, nothing herein shall supersede or modify
135 | the terms of any separate license agreement you may have executed
136 | with Licensor regarding such Contributions.
137 |
138 | 6. Trademarks. This License does not grant permission to use the trade
139 | names, trademarks, service marks, or product names of the Licensor,
140 | except as required for reasonable and customary use in describing the
141 | origin of the Work and reproducing the content of the NOTICE file.
142 |
143 | 7. Disclaimer of Warranty. Unless required by applicable law or
144 | agreed to in writing, Licensor provides the Work (and each
145 | Contributor provides its Contributions) on an "AS IS" BASIS,
146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 | implied, including, without limitation, any warranties or conditions
148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 | PARTICULAR PURPOSE. You are solely responsible for determining the
150 | appropriateness of using or redistributing the Work and assume any
151 | risks associated with Your exercise of permissions under this License.
152 |
153 | 8. Limitation of Liability. In no event and under no legal theory,
154 | whether in tort (including negligence), contract, or otherwise,
155 | unless required by applicable law (such as deliberate and grossly
156 | negligent acts) or agreed to in writing, shall any Contributor be
157 | liable to You for damages, including any direct, indirect, special,
158 | incidental, or consequential damages of any character arising as a
159 | result of this License or out of the use or inability to use the
160 | Work (including but not limited to damages for loss of goodwill,
161 | work stoppage, computer failure or malfunction, or any and all
162 | other commercial damages or losses), even if such Contributor
163 | has been advised of the possibility of such damages.
164 |
165 | 9. Accepting Warranty or Additional Liability. While redistributing
166 | the Work or Derivative Works thereof, You may choose to offer,
167 | and charge a fee for, acceptance of support, warranty, indemnity,
168 | or other liability obligations and/or rights consistent with this
169 | License. However, in accepting such obligations, You may act only
170 | on Your own behalf and on Your sole responsibility, not on behalf
171 | of any other Contributor, and only if You agree to indemnify,
172 | defend, and hold each Contributor harmless for any liability
173 | incurred by, or claims asserted against, such Contributor by reason
174 | of your accepting any such warranty or additional liability.
175 |
176 | END OF TERMS AND CONDITIONS
177 |
178 | APPENDIX: How to apply the Apache License to your work.
179 |
180 | To apply the Apache License to your work, attach the following
181 | boilerplate notice, with the fields enclosed by brackets "{}"
182 | replaced with your own identifying information. (Don't include
183 | the brackets!) The text should be enclosed in the appropriate
184 | comment syntax for the file format. We also recommend that a
185 | file or class name and description of purpose be included on the
186 | same "printed page" as the copyright notice for easier
187 | identification within third-party archives.
188 |
189 | Copyright {yyyy} {name of copyright owner}
190 |
191 | Licensed under the Apache License, Version 2.0 (the "License");
192 | you may not use this file except in compliance with the License.
193 | You may obtain a copy of the License at
194 |
195 | http://www.apache.org/licenses/LICENSE-2.0
196 |
197 | Unless required by applicable law or agreed to in writing, software
198 | distributed under the License is distributed on an "AS IS" BASIS,
199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 | See the License for the specific language governing permissions and
201 | limitations under the License.
202 |
203 |
--------------------------------------------------------------------------------
/License-GNU.rst:
--------------------------------------------------------------------------------
1 | GNU GENERAL PUBLIC LICENSE
2 |
3 | Version 2, June 1991
4 |
5 | Copyright (C) 1989, 1991 Free Software Foundation, Inc.
6 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA
7 |
8 | Everyone is permitted to copy and distribute verbatim copies
9 | of this license document, but changing it is not allowed.
10 | Preamble
11 |
12 | The licenses for most software are designed to take away your freedom to share and change it. By contrast, the GNU General Public License is intended to guarantee your freedom to share and change free software--to make sure the software is free for all its users. This General Public License applies to most of the Free Software Foundation's software and to any other program whose authors commit to using it. (Some other Free Software Foundation software is covered by the GNU Lesser General Public License instead.) You can apply it to your programs, too.
13 |
14 | When we speak of free software, we are referring to freedom, not price. Our General Public Licenses are designed to make sure that you have the freedom to distribute copies of free software (and charge for this service if you wish), that you receive source code or can get it if you want it, that you can change the software or use pieces of it in new free programs; and that you know you can do these things.
15 |
16 | To protect your rights, we need to make restrictions that forbid anyone to deny you these rights or to ask you to surrender the rights. These restrictions translate to certain responsibilities for you if you distribute copies of the software, or if you modify it.
17 |
18 | For example, if you distribute copies of such a program, whether gratis or for a fee, you must give the recipients all the rights that you have. You must make sure that they, too, receive or can get the source code. And you must show them these terms so they know their rights.
19 |
20 | We protect your rights with two steps: (1) copyright the software, and (2) offer you this license which gives you legal permission to copy, distribute and/or modify the software.
21 |
22 | Also, for each author's protection and ours, we want to make certain that everyone understands that there is no warranty for this free software. If the software is modified by someone else and passed on, we want its recipients to know that what they have is not the original, so that any problems introduced by others will not reflect on the original authors' reputations.
23 |
24 | Finally, any free program is threatened constantly by software patents. We wish to avoid the danger that redistributors of a free program will individually obtain patent licenses, in effect making the program proprietary. To prevent this, we have made it clear that any patent must be licensed for everyone's free use or not licensed at all.
25 |
26 | The precise terms and conditions for copying, distribution and modification follow.
27 |
28 | TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
29 |
30 | 0. This License applies to any program or other work which contains a notice placed by the copyright holder saying it may be distributed under the terms of this General Public License. The "Program", below, refers to any such program or work, and a "work based on the Program" means either the Program or any derivative work under copyright law: that is to say, a work containing the Program or a portion of it, either verbatim or with modifications and/or translated into another language. (Hereinafter, translation is included without limitation in the term "modification".) Each licensee is addressed as "you".
31 |
32 | Activities other than copying, distribution and modification are not covered by this License; they are outside its scope. The act of running the Program is not restricted, and the output from the Program is covered only if its contents constitute a work based on the Program (independent of having been made by running the Program). Whether that is true depends on what the Program does.
33 |
34 | 1. You may copy and distribute verbatim copies of the Program's source code as you receive it, in any medium, provided that you conspicuously and appropriately publish on each copy an appropriate copyright notice and disclaimer of warranty; keep intact all the notices that refer to this License and to the absence of any warranty; and give any other recipients of the Program a copy of this License along with the Program.
35 |
36 | You may charge a fee for the physical act of transferring a copy, and you may at your option offer warranty protection in exchange for a fee.
37 |
38 | 2. You may modify your copy or copies of the Program or any portion of it, thus forming a work based on the Program, and copy and distribute such modifications or work under the terms of Section 1 above, provided that you also meet all of these conditions:
39 |
40 | a) You must cause the modified files to carry prominent notices stating that you changed the files and the date of any change.
41 | b) You must cause any work that you distribute or publish, that in whole or in part contains or is derived from the Program or any part thereof, to be licensed as a whole at no charge to all third parties under the terms of this License.
42 | c) If the modified program normally reads commands interactively when run, you must cause it, when started running for such interactive use in the most ordinary way, to print or display an announcement including an appropriate copyright notice and a notice that there is no warranty (or else, saying that you provide a warranty) and that users may redistribute the program under these conditions, and telling the user how to view a copy of this License. (Exception: if the Program itself is interactive but does not normally print such an announcement, your work based on the Program is not required to print an announcement.)
43 | These requirements apply to the modified work as a whole. If identifiable sections of that work are not derived from the Program, and can be reasonably considered independent and separate works in themselves, then this License, and its terms, do not apply to those sections when you distribute them as separate works. But when you distribute the same sections as part of a whole which is a work based on the Program, the distribution of the whole must be on the terms of this License, whose permissions for other licensees extend to the entire whole, and thus to each and every part regardless of who wrote it.
44 |
45 | Thus, it is not the intent of this section to claim rights or contest your rights to work written entirely by you; rather, the intent is to exercise the right to control the distribution of derivative or collective works based on the Program.
46 |
47 | In addition, mere aggregation of another work not based on the Program with the Program (or with a work based on the Program) on a volume of a storage or distribution medium does not bring the other work under the scope of this License.
48 |
49 | 3. You may copy and distribute the Program (or a work based on it, under Section 2) in object code or executable form under the terms of Sections 1 and 2 above provided that you also do one of the following:
50 |
51 | a) Accompany it with the complete corresponding machine-readable source code, which must be distributed under the terms of Sections 1 and 2 above on a medium customarily used for software interchange; or,
52 | b) Accompany it with a written offer, valid for at least three years, to give any third party, for a charge no more than your cost of physically performing source distribution, a complete machine-readable copy of the corresponding source code, to be distributed under the terms of Sections 1 and 2 above on a medium customarily used for software interchange; or,
53 | c) Accompany it with the information you received as to the offer to distribute corresponding source code. (This alternative is allowed only for noncommercial distribution and only if you received the program in object code or executable form with such an offer, in accord with Subsection b above.)
54 | The source code for a work means the preferred form of the work for making modifications to it. For an executable work, complete source code means all the source code for all modules it contains, plus any associated interface definition files, plus the scripts used to control compilation and installation of the executable. However, as a special exception, the source code distributed need not include anything that is normally distributed (in either source or binary form) with the major components (compiler, kernel, and so on) of the operating system on which the executable runs, unless that component itself accompanies the executable.
55 |
56 | If distribution of executable or object code is made by offering access to copy from a designated place, then offering equivalent access to copy the source code from the same place counts as distribution of the source code, even though third parties are not compelled to copy the source along with the object code.
57 |
58 | 4. You may not copy, modify, sublicense, or distribute the Program except as expressly provided under this License. Any attempt otherwise to copy, modify, sublicense or distribute the Program is void, and will automatically terminate your rights under this License. However, parties who have received copies, or rights, from you under this License will not have their licenses terminated so long as such parties remain in full compliance.
59 |
60 | 5. You are not required to accept this License, since you have not signed it. However, nothing else grants you permission to modify or distribute the Program or its derivative works. These actions are prohibited by law if you do not accept this License. Therefore, by modifying or distributing the Program (or any work based on the Program), you indicate your acceptance of this License to do so, and all its terms and conditions for copying, distributing or modifying the Program or works based on it.
61 |
62 | 6. Each time you redistribute the Program (or any work based on the Program), the recipient automatically receives a license from the original licensor to copy, distribute or modify the Program subject to these terms and conditions. You may not impose any further restrictions on the recipients' exercise of the rights granted herein. You are not responsible for enforcing compliance by third parties to this License.
63 |
64 | 7. If, as a consequence of a court judgment or allegation of patent infringement or for any other reason (not limited to patent issues), conditions are imposed on you (whether by court order, agreement or otherwise) that contradict the conditions of this License, they do not excuse you from the conditions of this License. If you cannot distribute so as to satisfy simultaneously your obligations under this License and any other pertinent obligations, then as a consequence you may not distribute the Program at all. For example, if a patent license would not permit royalty-free redistribution of the Program by all those who receive copies directly or indirectly through you, then the only way you could satisfy both it and this License would be to refrain entirely from distribution of the Program.
65 |
66 | If any portion of this section is held invalid or unenforceable under any particular circumstance, the balance of the section is intended to apply and the section as a whole is intended to apply in other circumstances.
67 |
68 | It is not the purpose of this section to induce you to infringe any patents or other property right claims or to contest validity of any such claims; this section has the sole purpose of protecting the integrity of the free software distribution system, which is implemented by public license practices. Many people have made generous contributions to the wide range of software distributed through that system in reliance on consistent application of that system; it is up to the author/donor to decide if he or she is willing to distribute software through any other system and a licensee cannot impose that choice.
69 |
70 | This section is intended to make thoroughly clear what is believed to be a consequence of the rest of this License.
71 |
72 | 8. If the distribution and/or use of the Program is restricted in certain countries either by patents or by copyrighted interfaces, the original copyright holder who places the Program under this License may add an explicit geographical distribution limitation excluding those countries, so that distribution is permitted only in or among countries not thus excluded. In such case, this License incorporates the limitation as if written in the body of this License.
73 |
74 | 9. The Free Software Foundation may publish revised and/or new versions of the General Public License from time to time. Such new versions will be similar in spirit to the present version, but may differ in detail to address new problems or concerns.
75 |
76 | Each version is given a distinguishing version number. If the Program specifies a version number of this License which applies to it and "any later version", you have the option of following the terms and conditions either of that version or of any later version published by the Free Software Foundation. If the Program does not specify a version number of this License, you may choose any version ever published by the Free Software Foundation.
77 |
78 | 10. If you wish to incorporate parts of the Program into other free programs whose distribution conditions are different, write to the author to ask for permission. For software which is copyrighted by the Free Software Foundation, write to the Free Software Foundation; we sometimes make exceptions for this. Our decision will be guided by the two goals of preserving the free status of all derivatives of our free software and of promoting the sharing and reuse of software generally.
79 |
80 | NO WARRANTY
81 |
82 | 11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
83 |
84 | 12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
85 |
86 | END OF TERMS AND CONDITIONS
87 |
88 | How to Apply These Terms to Your New Programs
89 |
90 | If you develop a new program, and you want it to be of the greatest possible use to the public, the best way to achieve this is to make it free software which everyone can redistribute and change under these terms.
91 |
92 | To do so, attach the following notices to the program. It is safest to attach them to the start of each source file to most effectively convey the exclusion of warranty; and each file should have at least the "copyright" line and a pointer to where the full notice is found.
93 |
94 | one line to give the program's name and an idea of what it does.
95 | Copyright (C) yyyy name of author
96 |
97 | This program is free software; you can redistribute it and/or
98 | modify it under the terms of the GNU General Public License
99 | as published by the Free Software Foundation; either version 2
100 | of the License, or (at your option) any later version.
101 |
102 | This program is distributed in the hope that it will be useful,
103 | but WITHOUT ANY WARRANTY; without even the implied warranty of
104 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
105 | GNU General Public License for more details.
106 |
107 | You should have received a copy of the GNU General Public License
108 | along with this program; if not, write to the Free Software
109 | Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
110 | Also add information on how to contact you by electronic and paper mail.
111 |
112 | If the program is interactive, make it output a short notice like this when it starts in an interactive mode:
113 |
114 | Gnomovision version 69, Copyright (C) year name of author
115 | Gnomovision comes with ABSOLUTELY NO WARRANTY; for details
116 | type `show w'. This is free software, and you are welcome
117 | to redistribute it under certain conditions; type `show c'
118 | for details.
119 | The hypothetical commands `show w' and `show c' should show the appropriate parts of the General Public License. Of course, the commands you use may be called something other than `show w' and `show c'; they could even be mouse-clicks or menu items--whatever suits your program.
120 |
121 | You should also get your employer (if you work as a programmer) or your school, if any, to sign a "copyright disclaimer" for the program, if necessary. Here is a sample; alter the names:
122 |
123 | Yoyodyne, Inc., hereby disclaims all copyright
124 | interest in the program `Gnomovision'
125 | (which makes passes at compilers) written
126 | by James Hacker.
127 |
128 | signature of Ty Coon, 1 April 1989
129 | Ty Coon, President of Vice
130 | This General Public License does not permit incorporating your program into proprietary programs. If your program is a subroutine library, you may consider it more useful to permit linking proprietary applications with the library. If this is what you want to do, use the GNU Lesser General Public License instead of this License.
131 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | IMPORTANT!
2 | ==================
3 | This plugin will no longer be maintained. Welcome those who want to continue the project.
4 |
5 | Rangeslider-videojs
6 | ==================
7 | ##Ranger Slider Plugin for Video JS Player
8 |
9 | rangeslider.js is a plugin for Video JS player. The aim of this plugin is to create range slider to select a region of a video in video-js.
10 |
11 | ##Live-Demo
12 |
13 | There is a demo of the range slider plugin in the next webpage:
14 |
15 | http://danielcebrian.com/rangeslider/demo.html
16 |
17 | ##Installation
18 |
19 | Add rangeslider.min.js and rangeslider.min.css CDN distributed file to your head tag, just after
20 | videojs:
21 |
22 | ```html
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 | ...
34 | ```
35 |
36 | ##Usage
37 |
38 | Load a video in video-js, as you can see in the [tutorial of video-js player](https://github.com/videojs/video.js/blob/master/docs/setup.md)
39 |
40 | ```html
41 |
48 | ```
49 |
50 | In addition, to load and control the plugin from Javascript must add a few lines of javascript like:
51 |
52 | ```js
53 | var options = {},
54 | mplayer = videojs("vid1"),
55 | mplayer.rangeslider(options);
56 | ```
57 |
58 | The first one was to load the videojs player and the second one is to load the rangeslider plugin
59 | You can specify to the plugin to be loaded with the range slider open, the panel time, etc.. with the initial options. For example:
60 |
61 | locked = true/false;
62 | hidden = true/false;
63 | panel = true/false;
64 | controlTime = true/false;
65 |
66 | ```js
67 | var options = {locked:true,controlTime:false}, //This will lock the range slider and won't show the control time panel to set the position of the arrows
68 | mplayer=videojs("vid1"),
69 | mplayer.rangeslider(options);
70 | ```
71 |
72 | #API Methods
73 |
74 | Once the plugin is started, we can control the range slider with the following functions:
75 |
76 | ### showSlider() ###
77 |
78 | Show the Slider Bar Component
79 |
80 | ```js
81 | mplayer.showSlider();
82 | ```
83 |
84 | ### hideSlider() ###
85 |
86 | Hide the Slider Bar Component
87 |
88 | ```js
89 | mplayer.hideSlider();
90 | ```
91 |
92 | ### showSliderPanel() ###
93 |
94 | Show the Panel above the arrow with the current position
95 |
96 | ```js
97 | mplayer.showSliderPanel();
98 | ```
99 |
100 | ### hideSliderPanel() ###
101 |
102 | Hide the Panel above the arrow with the current position
103 |
104 | ```js
105 | mplayer.hideSliderPanel();
106 | ```
107 |
108 | ### showControlTime() ###
109 |
110 | Show the panel to edit the time for the start and end arrows
111 |
112 | ```js
113 | mplayer.showControlTime();
114 | ```
115 |
116 | ### hideControlTime() ###
117 |
118 | Hide the panel to edit the time for the start and end arrows
119 |
120 | ```js
121 | mplayer.hideControlTime();
122 | ```
123 |
124 | ### lockSlider() ###
125 |
126 | Lock the Slider bar and it will not be possible to change the arrow positions
127 |
128 | ```js
129 | mplayer.lockSlider();
130 | ```
131 |
132 | ### unlockSlider() ###
133 |
134 | Unlock the Slider bar and it will be possible to change the arrow positions
135 |
136 | ```js
137 | mplayer.unlockSlider();
138 | ```
139 |
140 | ### setValueSlider() ###
141 |
142 | Set a values in seconds for the position of the arrows.
143 |
144 | ```js
145 | mplayer.setValueSlider(start,end);
146 | ```
147 |
148 | ### playBetween() ###
149 |
150 | The video will be played in a selected section. It is necessary to enter the start and end second.
151 |
152 | ```js
153 | mplayer.playBetween(start, end);
154 | ```
155 |
156 | ### loopBetween() ###
157 |
158 | The video will be looped in a selected section. It is necessary to enter the start and end second.
159 |
160 | ```js
161 | mplayer.loopBetween(start, end);
162 | ```
163 |
164 | ### getValueSlider() ###
165 |
166 | Get the Values of the arrows in second.
167 |
168 | ```js
169 | mplayer.getValueSlider();
170 | ```
171 |
172 |
173 | ## EVENTS
174 |
175 |
176 | ### loadedRangeSlider `EVENT`
177 |
178 | > Fired when the plugin has been loaded
179 |
180 | ```js
181 | mplayer.on("loadedRangeSlider",function() {
182 | //init
183 | ...
184 | });
185 | ```
186 |
187 | ### sliderchange `EVENT`
188 | > Fired when the values of slider have changed
189 |
190 | ```js
191 | mplayer.on("sliderchange",function() {
192 | var values = mplayer.getValueSlider();
193 | ...
194 | });
195 | ```
196 |
--------------------------------------------------------------------------------
/build/rangeslider.min.css:
--------------------------------------------------------------------------------
1 | .vjs-default-skin .vjs-timebar-RS{color:red;top:-1em;height:100%;position:relative;background:rgba(100,100,100,.5)}.vjs-default-skin .vjs-rangeslider-holder{height:100%}.vjs-default-skin .vjs-selectionbar-RS{height:100%;float:left;width:100%;left:0;right:0;position:absolute;background-color:#ffe800;background:#ffe800;background:-moz-linear-gradient(top,#ffe800,#a69700);background:-webkit-gradient(linear,0% 0,0% 100%,from(#ffe800),to(#a69700));background:-webkit-linear-gradient(top,#ffe800,#a69700);background:-o-linear-gradient(top,#ffe800,#a69700);background:-ms-linear-gradient(top,#ffe800,#a69700);background:linear-gradient(top,#ffe800,#a69700);opacity:.8}.vjs-default-skin div.vjs-rangeslider-holder.locked>div.vjs-selectionbar-RS{background-color:#ff6565;background:#ff6565;background:-moz-linear-gradient(top,#ff6565,#300000);background:-webkit-gradient(linear,0% 0,0% 100%,from(#ff6565),to(#300000));background:-webkit-linear-gradient(top,#ff6565,#300000);background:-o-linear-gradient(top,#ff6565,#300000);background:-ms-linear-gradient(top,#ff6565,#300000);background:linear-gradient(top,#ff6565,#300000)}.vjs-default-skin div.vjs-rangeslider-handle{position:absolute;margin-top:0;cursor:pointer!important;background-color:transparent}.vjs-default-skin .vjs-selectionbar-left-RS{height:100%;left:0;z-index:10}.vjs-default-skin .vjs-selectionbar-right-RS{height:100%;left:100%;z-index:20}.vjs-default-skin div.vjs-selectionbar-left-RS,.vjs-default-skin div.vjs-selectionbar-right-RS{top:0;position:absolute;width:0}.vjs-default-skin div.vjs-selectionbar-arrow-RS{width:0;height:0;border-left:1em solid transparent;border-right:1em solid transparent;border-top:1em solid #fff273;margin-left:-1em;opacity:.8;position:absolute;top:-1em}.vjs-default-skin div.vjs-rangeslider-handle.active>div.vjs-selectionbar-arrow-RS{border-top-color:#5f5fb3}.vjs-default-skin div.vjs-rangeslider-holder.locked .vjs-rangeslider-handle>div.vjs-selectionbar-arrow-RS{border-top-color:#ff6565}.vjs-default-skin div.vjs-selectionbar-line-RS{width:1px;height:1em;background-color:#fff273;position:absolute;top:0}.vjs-default-skin div.vjs-rangeslider-handle.active>div.vjs-selectionbar-line-RS{background-color:#5f5fb3}.vjs-default-skin div.vjs-rangeslider-holder.locked .vjs-rangeslider-handle>div.vjs-selectionbar-line-RS{background-color:#ff6565}.vjs-default-skin .vjs-timepanel-RS{width:100%;height:1em;font-weight:bold;font-size:15px;top:-2em;position:absolute;visibility:visible;opacity:1;transition-delay:0s}.vjs-default-skin .vjs-timepanel-RS.disable{visibility:hidden;opacity:0;-webkit-transition:visibility 1s linear 1s,opacity 1s linear;-moz-transition:visibility 1s linear 1s,opacity 1s linear;-o-transition:visibility 1s linear 1s,opacity 1s linear;transition:visibility 1s linear 1s,opacity 1s linear}.vjs-default-skin .vjs-timepanel-left-RS,.vjs-default-skin .vjs-timepanel-right-RS{font-weight:normal;font-size:1em;color:#666;border:1px solid #666;background-color:white;border-radius:5px;position:absolute;height:116%;padding-right:.3em;padding-left:.3em}.vjs-default-skin .vjs-timepanel-left-RS{left:.5%}.vjs-default-skin .vjs-timepanel-right-RS{left:92%}.vjs-default-skin .vjs-controltimepanel-RS{width:18em;font-size:1em;line-height:3em}.vjs-default-skin .vjs-controltimepanel-RS input{width:1.5em;background:rgba(102,168,204,0.16);border:1px solid transparent;color:black;font-size:1em;margin-left:2px;text-align:center;color:white}.vjs-default-skin .vjs-controltimepanel-left-RS{width:50%;float:left}.vjs-default-skin .vjs-controltimepanel-right-RS{float:right;width:48%}.vjs-default-skin .vjs-controltimepanel-RS input{margin:0;padding:0;display:table-cell}.vjs-default-skin *,.vjs-default-skin *:before,.vjs-default-skin *:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0}
--------------------------------------------------------------------------------
/build/rangeslider.min.js:
--------------------------------------------------------------------------------
1 | (function(){function b(c){var d=this;d.rangeslider=new a(d,c);function e(h){var g=d.rangeslider;for(var f in g.components){g.components[f].init_()}if(g.options.hidden){g.hide()}if(g.options.locked){g.lock()}if(g.options.panel==false){g.hidePanel()}if(g.options.controlTime==false){g.hidecontrolTime()}g._reset();d.trigger("loadedRangeSlider")}if(d.techName=="Youtube"){d.one("error",function(f){switch(d.error){case 2:alert("The request contains an invalid parameter value. For example, this error occurs if you specify a video ID that does not have 11 characters, or if the video ID contains invalid characters, such as exclamation points or asterisks.");case 5:alert("The requested content cannot be played in an HTML5 player or another error related to the HTML5 player has occurred.");case 100:alert("The video requested was not found. This error occurs when a video has been removed (for any reason) or has been marked as private.");break;case 101:alert("The owner of the requested video does not allow it to be played in embedded players.");break;case 150:alert("The owner of the requested video does not allow it to be played in embedded players.");break;default:alert("Unknown Error");break}});d.on("firstplay",e)}else{d.one("playing",e)}console.log("Loaded Plugin RangeSlider")}videojs.plugin("rangeslider",b);function a(d,c){var d=d||this;this.player=d;this.components={};c=c||{};if(!c.hasOwnProperty("locked")){c.locked=false}if(!c.hasOwnProperty("hidden")){c.hidden=true}if(!c.hasOwnProperty("panel")){c.panel=true}if(!c.hasOwnProperty("controlTime")){c.controlTime=true}this.options=c;this.init()}a.prototype={init:function(){var c=this.player||{};this.updatePrecision=3;this.start=0;this.end=0;var e=c.controlBar;var d=e.progressControl.seekBar;this.components.RSTimeBar=d.RSTimeBar;this.components.ControlTimePanel=e.ControlTimePanel;this.rstb=this.components.RSTimeBar;this.box=this.components.SeekRSBar=this.rstb.SeekRSBar;this.bar=this.components.SelectionBar=this.box.SelectionBar;this.left=this.components.SelectionBarLeft=this.box.SelectionBarLeft;this.right=this.components.SelectionBarRight=this.box.SelectionBarRight;this.tp=this.components.TimePanel=this.box.TimePanel;this.tpl=this.components.TimePanelLeft=this.tp.TimePanelLeft;this.tpr=this.components.TimePanelRight=this.tp.TimePanelRight;this.ctp=this.components.ControlTimePanel;this.ctpl=this.components.ControlTimePanelLeft=this.ctp.ControlTimePanelLeft;this.ctpr=this.components.ControlTimePanelRight=this.ctp.ControlTimePanelRight},lock:function(){this.options.locked=true;this.ctp.enable(false);if(typeof this.box!="undefined"){videojs.addClass(this.box.el_,"locked")}},unlock:function(){this.options.locked=false;this.ctp.enable();if(typeof this.box!="undefined"){videojs.removeClass(this.box.el_,"locked")}},show:function(){this.options.hidden=false;if(typeof this.rstb!="undefined"){this.rstb.show();if(this.options.controlTime){this.showcontrolTime()}}},hide:function(){this.options.hidden=true;if(typeof this.rstb!="undefined"){this.rstb.hide();this.ctp.hide()}},showPanel:function(){this.options.panel=true;if(typeof this.tp!="undefined"){videojs.removeClass(this.tp.el_,"disable")}},hidePanel:function(){this.options.panel=false;if(typeof this.tp!="undefined"){videojs.addClass(this.tp.el_,"disable")}},showcontrolTime:function(){this.options.controlTime=true;if(typeof this.ctp!="undefined"){this.ctp.show()}},hidecontrolTime:function(){this.options.controlTime=false;if(typeof this.ctp!="undefined"){this.ctp.hide()}},setValue:function(c,h,f){var f=typeof f!="undefined"?f:true;var e=this._percent(h);var d=(c===0||c===1);var g=!this.locked;if(g&&d){this.box.setPosition(c,e,f)}},setValues:function(e,c,d){var d=typeof d!="undefined"?d:true;this._reset();this._setValuesLocked(e,c,d)},getValues:function(){var d={},e,c;e=this.start||this._getArrowValue(0);c=this.end||this._getArrowValue(1);return{start:e,end:c}},playBetween:function(e,c,d){d=typeof d=="undefined"?true:d;this.player.currentTime(e);this.player.play();if(d){this.show();this._reset()}else{this.hide()}this._setValuesLocked(e,c);this.bar.activatePlay(e,c)},loop:function(f,d,c){var e=this.player;if(e){e.on("pause",videojs.bind(this,function(){this.looping=false}));c=typeof c==="undefined"?true:c;if(c){this.show();this._reset()}else{this.hide()}this._setValuesLocked(f,d);this.timeStart=f;this.timeEnd=d;this.looping=true;this.player.currentTime(f);this.player.play();this.player.on("timeupdate",videojs.bind(this,this.bar.process_loop))}},_getArrowValue:function(d){var d=d||0;var e=this.player.duration();e=typeof e=="undefined"?0:e;var c=this[d===0?"left":"right"].el_.style.left.replace("%","");if(c==""){c=d===0?0:100}return videojs.round(this._seconds(c/100),this.updatePrecision-1)},_percent:function(d){var c=this.player.duration();if(isNaN(c)){return 0}return Math.min(1,Math.max(0,d/c))},_seconds:function(c){var d=this.player.duration();if(isNaN(d)){return 0}return Math.min(d,Math.max(0,c*d))},_reset:function(){var c=this.player.duration();this.tpl.el_.style.left="0%";this.tpr.el_.style.left="100%";this._setValuesLocked(0,c)},_setValuesLocked:function(f,c,e){var d=typeof e!="undefined";var e=typeof e!="undefined"?e:true;if(this.options.locked){this.unlock();this.setValue(0,f,e);this.setValue(1,c,e);this.lock()}else{this.setValue(0,f,e);this.setValue(1,c,e)}if(d){this._triggerSliderChange()}},_checkControlTime:function(j,f,x){var t=f[0],p=f[1],o=f[2],q=t.value,n=p.value,r=o.value,l,v,i;j=j||0;if(q!=x[0]){l=t;v=q;i=x[0]}else{if(n!=x[1]){l=p;v=n;i=x[1]}else{if(r!=x[2]){l=o;v=r;i=x[2]}else{return false}}}var c=this.player.duration()||0,g;var d=/^\d+$/;if(!d.test(v)||v>60){v=v==""?"":i}q=q==""?0:q;n=n==""?0:n;r=r==""?0:r;g=videojs.TextTrack.prototype.parseCueTime(q+":"+n+":"+r);if(g>c){l.value=i;l.style.border="1px solid red"}else{l.value=v;t.style.border=p.style.border=o.style.border="1px solid transparent";this.setValue(j,g,false);this._triggerSliderChange()}if(j===1){var u=this.ctpl.el_.children,e=videojs.TextTrack.prototype.parseCueTime(u[0].value+":"+u[1].value+":"+u[2].value);if(gw){l.style.border="1px solid red"}}},_triggerSliderChange:function(){this.player.trigger("sliderchange")}};videojs.Player.prototype.lockSlider=function(){return this.rangeslider.lock()};videojs.Player.prototype.unlockSlider=function(){return this.rangeslider.unlock()};videojs.Player.prototype.showSlider=function(){return this.rangeslider.show()};videojs.Player.prototype.hideSlider=function(){return this.rangeslider.hide()};videojs.Player.prototype.showSliderPanel=function(){return this.rangeslider.showPanel()};videojs.Player.prototype.hideSliderPanel=function(){return this.rangeslider.hidePanel()};videojs.Player.prototype.showControlTime=function(){return this.rangeslider.showcontrolTime()};videojs.Player.prototype.hideControlTime=function(){return this.rangeslider.hidecontrolTime()};videojs.Player.prototype.setValueSlider=function(d,c){return this.rangeslider.setValues(d,c)};videojs.Player.prototype.playBetween=function(d,c){return this.rangeslider.playBetween(d,c)};videojs.Player.prototype.loopBetween=function(d,c){return this.rangeslider.loop(d,c)};videojs.Player.prototype.getValueSlider=function(){return this.rangeslider.getValues()};videojs.SeekBar.prototype.options_.children.RSTimeBar={};videojs.ControlBar.prototype.options_.children.ControlTimePanel={};videojs.RSTimeBar=videojs.Component.extend({init:function(d,c){videojs.Component.call(this,d,c)}});videojs.RSTimeBar.prototype.init_=function(){this.rs=this.player_.rangeslider};videojs.RSTimeBar.prototype.options_={children:{SeekRSBar:{}}};videojs.RSTimeBar.prototype.createEl=function(){return videojs.Component.prototype.createEl.call(this,"div",{className:"vjs-timebar-RS",innerHTML:""})};videojs.SeekRSBar=videojs.Component.extend({init:function(d,c){videojs.Component.call(this,d,c);this.on("mousedown",this.onMouseDown)}});videojs.SeekRSBar.prototype.init_=function(){this.rs=this.player_.rangeslider};videojs.SeekRSBar.prototype.options_={children:{SelectionBar:{},SelectionBarLeft:{},SelectionBarRight:{},TimePanel:{},}};videojs.SeekRSBar.prototype.createEl=function(){return videojs.Component.prototype.createEl.call(this,"div",{className:"vjs-rangeslider-holder"})};videojs.SeekRSBar.prototype.onMouseDown=function(c){c.preventDefault();videojs.blockTextSelection();if(!this.rs.options.locked){videojs.on(document,"mousemove",videojs.bind(this,this.onMouseMove));videojs.on(document,"mouseup",videojs.bind(this,this.onMouseUp))}};videojs.SeekRSBar.prototype.onMouseUp=function(c){videojs.off(document,"mousemove",this.onMouseMove,false);videojs.off(document,"mouseup",this.onMouseUp,false)};videojs.SeekRSBar.prototype.onMouseMove=function(d){var e=this.calculateDistance(d);if(this.rs.left.pressed){this.setPosition(0,e)}else{if(this.rs.right.pressed){this.setPosition(1,e)}}var c=this.player_.controlBar.currentTimeDisplay;c.contentEl_.innerHTML='' + c.localize('Current Time') + ''+vjs.formatTime(this.rs._seconds(e),this.player_.duration());if(this.rs.left.pressed||this.rs.right.pressed){this.rs._triggerSliderChange()}};videojs.SeekRSBar.prototype.setPosition=function(k,f,e){var e=typeof e!="undefined"?e:true;var k=k||0;if(this.rs.options.locked){return false}if(isNaN(f)){return false}if(!(k===0||k===1)){return false}var d=this.rs.left.el_,g=this.rs.right.el_,u=this.rs[k===0?"left":"right"].el_,v=this.rs.tpr.el_,x=this.rs.tpl.el_,t=this.rs.bar,w=this.rs[k===0?"ctpl":"ctpr"].el_;if((k===0?t.updateLeft(f):t.updateRight(f))){u.style.left=(f*100)+"%";k===0?t.updateLeft(f):t.updateRight(f);this.rs[k===0?"start":"end"]=this.rs._seconds(f);if(k===0){if((f)>=0.9){d.style.zIndex=25}else{d.style.zIndex=10}}var p=videojs.formatTime(this.rs._seconds(f)),c=x.children[0].innerHTML.length;var i,j,o;if(c<=4){o=this.player_.isFullScreen?3.25:6.5}else{if(c<=5){o=this.player_.isFullScreen?4:8}else{o=this.player_.isFullScreen?5:10}}if(p.length<=4){i=this.player_.isFullScreen?97:93;j=this.player_.isFullScreen?0.1:0.5}else{if(p.length<=5){i=this.player_.isFullScreen?96:92;j=this.player_.isFullScreen?0.1:0.5}else{i=this.player_.isFullScreen?95:91;j=this.player_.isFullScreen?0.1:0.5}}if(k===0){x.style.left=Math.max(j,Math.min(i,(f*100-o/2)))+"%";if((v.style.left.replace("%","")-x.style.left.replace("%",""))<=o){x.style.left=Math.max(j,Math.min(i,v.style.left.replace("%","")-o))+"%"}x.children[0].innerHTML=p}else{v.style.left=Math.max(j,Math.min(i,(f*100-o/2)))+"%";if(((v.style.left.replace("%","")||100)-x.style.left.replace("%",""))<=o){v.style.left=Math.max(j,Math.min(i,x.style.left.replace("%","")-0+o))+"%"}v.children[0].innerHTML=p}if(e){var l=p.split(":"),r,q,n;if(l.length==2){r=0;q=l[0];n=l[1]}else{r=l[0];q=l[1];n=l[2]}w.children[0].value=r;w.children[1].value=q;w.children[2].value=n}}return true};videojs.SeekRSBar.prototype.calculateDistance=function(e){var c=this.getRSTBX();var d=this.getRSTBWidth();var f=this.getWidth();c=c+(f/2);d=d-f;return Math.max(0,Math.min(1,(e.pageX-c)/d))};videojs.SeekRSBar.prototype.getRSTBWidth=function(){return this.el_.offsetWidth};videojs.SeekRSBar.prototype.getRSTBX=function(){return videojs.findPosition(this.el_).left};videojs.SeekRSBar.prototype.getWidth=function(){return this.rs.left.el_.offsetWidth};videojs.SelectionBar=videojs.Component.extend({init:function(d,c){videojs.Component.call(this,d,c);this.on("mouseup",this.onMouseUp);this.fired=false}});videojs.SelectionBar.prototype.init_=function(){this.rs=this.player_.rangeslider};videojs.SelectionBar.prototype.createEl=function(){return videojs.Component.prototype.createEl.call(this,"div",{className:"vjs-selectionbar-RS"})};videojs.SelectionBar.prototype.onMouseUp=function(){var h=this.rs.left.el_.style.left.replace("%",""),d=this.rs.right.el_.style.left.replace("%",""),g=this.player_.duration(),c=this.rs.updatePrecision,e=videojs.round(h*g/100,c),f=videojs.round(d*g/100,c);this.player_.currentTime(e);this.player_.play();this.rs.bar.activatePlay(e,f)};videojs.SelectionBar.prototype.updateLeft=function(f){var e=this.rs.right.el_.style.left!=""?this.rs.right.el_.style.left:100;var c=parseFloat(e)/100;var d=videojs.round((c-f),this.rs.updatePrecision);if(f<=(c+0.00001)){this.rs.bar.el_.style.left=(f*100)+"%";this.rs.bar.el_.style.width=(d*100)+"%";return true}return false};videojs.SelectionBar.prototype.updateRight=function(d){var c=this.rs.left.el_.style.left!=""?this.rs.left.el_.style.left:0;var f=parseFloat(c)/100;var e=videojs.round((d-f),this.rs.updatePrecision);if((d+0.00001)>=f){this.rs.bar.el_.style.width=(e*100)+"%";this.rs.bar.el_.style.left=((d-e)*100)+"%";return true}return false};videojs.SelectionBar.prototype.activatePlay=function(d,c){this.timeStart=d;this.timeEnd=c;this.suspendPlay();this.player_.on("timeupdate",videojs.bind(this,this._processPlay))};videojs.SelectionBar.prototype.suspendPlay=function(){this.fired=false;this.player_.off("timeupdate",videojs.bind(this,this._processPlay))};videojs.SelectionBar.prototype._processPlay=function(){if(this.player_.currentTime()>=this.timeStart&&(this.timeEnd<0||this.player_.currentTime()0&&this.timeEnd'})};videojs.SelectionBarLeft.prototype.onMouseDown=function(c){c.preventDefault();videojs.blockTextSelection();if(!this.rs.options.locked){this.pressed=true;videojs.on(document,"mouseup",videojs.bind(this,this.onMouseUp));videojs.addClass(this.el_,"active")}};videojs.SelectionBarLeft.prototype.onMouseUp=function(c){videojs.off(document,"mouseup",this.onMouseUp,false);videojs.removeClass(this.el_,"active");if(!this.rs.options.locked){this.pressed=false}};videojs.SelectionBarRight=videojs.Component.extend({init:function(d,c){videojs.Component.call(this,d,c);this.on("mousedown",this.onMouseDown);this.pressed=false}});videojs.SelectionBarRight.prototype.init_=function(){this.rs=this.player_.rangeslider};videojs.SelectionBarRight.prototype.createEl=function(){return videojs.Component.prototype.createEl.call(this,"div",{className:"vjs-rangeslider-handle vjs-selectionbar-right-RS",innerHTML:''})};videojs.SelectionBarRight.prototype.onMouseDown=function(c){c.preventDefault();videojs.blockTextSelection();if(!this.rs.options.locked){this.pressed=true;videojs.on(document,"mouseup",videojs.bind(this,this.onMouseUp));videojs.addClass(this.el_,"active")}};videojs.SelectionBarRight.prototype.onMouseUp=function(c){videojs.off(document,"mouseup",this.onMouseUp,false);videojs.removeClass(this.el_,"active");if(!this.rs.options.locked){this.pressed=false}};videojs.TimePanel=videojs.Component.extend({init:function(d,c){videojs.Component.call(this,d,c)}});videojs.TimePanel.prototype.init_=function(){this.rs=this.player_.rangeslider};videojs.TimePanel.prototype.options_={children:{TimePanelLeft:{},TimePanelRight:{},}};videojs.TimePanel.prototype.createEl=function(){return videojs.Component.prototype.createEl.call(this,"div",{className:"vjs-timepanel-RS"})};videojs.TimePanelLeft=videojs.Component.extend({init:function(d,c){videojs.Component.call(this,d,c)}});videojs.TimePanelLeft.prototype.init_=function(){this.rs=this.player_.rangeslider};videojs.TimePanelLeft.prototype.createEl=function(){return videojs.Component.prototype.createEl.call(this,"div",{className:"vjs-timepanel-left-RS",innerHTML:'00:00'})};videojs.TimePanelRight=videojs.Component.extend({init:function(d,c){videojs.Component.call(this,d,c)}});videojs.TimePanelRight.prototype.init_=function(){this.rs=this.player_.rangeslider};videojs.TimePanelRight.prototype.createEl=function(){return videojs.Component.prototype.createEl.call(this,"div",{className:"vjs-timepanel-right-RS",innerHTML:'00:00'})};videojs.ControlTimePanel=videojs.Component.extend({init:function(d,c){videojs.Component.call(this,d,c)}});videojs.ControlTimePanel.prototype.init_=function(){this.rs=this.player_.rangeslider};videojs.ControlTimePanel.prototype.options_={children:{ControlTimePanelLeft:{},ControlTimePanelRight:{},}};videojs.ControlTimePanel.prototype.createEl=function(){return videojs.Component.prototype.createEl.call(this,"div",{className:"vjs-controltimepanel-RS vjs-control",})};videojs.ControlTimePanel.prototype.enable=function(c){var c=typeof c!="undefined"?c:true;this.rs.ctpl.el_.children[0].disabled=c?"":"disabled";this.rs.ctpl.el_.children[1].disabled=c?"":"disabled";this.rs.ctpl.el_.children[2].disabled=c?"":"disabled";this.rs.ctpr.el_.children[0].disabled=c?"":"disabled";this.rs.ctpr.el_.children[1].disabled=c?"":"disabled";this.rs.ctpr.el_.children[2].disabled=c?"":"disabled"};videojs.ControlTimePanelLeft=videojs.Component.extend({init:function(d,c){videojs.Component.call(this,d,c);this.on("keyup",this.onKeyUp);this.on("keydown",this.onKeyDown)}});videojs.ControlTimePanelLeft.prototype.init_=function(){this.rs=this.player_.rangeslider;this.timeOld={}};videojs.ControlTimePanelLeft.prototype.createEl=function(){return videojs.Component.prototype.createEl.call(this,"div",{className:"vjs-controltimepanel-left-RS",innerHTML:'Start: ::'})};videojs.ControlTimePanelLeft.prototype.onKeyDown=function(c){this.timeOld[0]=this.el_.children[0].value;this.timeOld[1]=this.el_.children[1].value;this.timeOld[2]=this.el_.children[2].value};videojs.ControlTimePanelLeft.prototype.onKeyUp=function(c){this.rs._checkControlTime(0,this.el_.children,this.timeOld)};videojs.ControlTimePanelRight=videojs.Component.extend({init:function(d,c){videojs.Component.call(this,d,c);this.on("keyup",this.onKeyUp);this.on("keydown",this.onKeyDown)}});videojs.ControlTimePanelRight.prototype.init_=function(){this.rs=this.player_.rangeslider;this.timeOld={}};videojs.ControlTimePanelRight.prototype.createEl=function(){return videojs.Component.prototype.createEl.call(this,"div",{className:"vjs-controltimepanel-right-RS",innerHTML:'End: ::'})};videojs.ControlTimePanelRight.prototype.onKeyDown=function(c){this.timeOld[0]=this.el_.children[0].value;this.timeOld[1]=this.el_.children[1].value;this.timeOld[2]=this.el_.children[2].value};videojs.ControlTimePanelRight.prototype.onKeyUp=function(c){this.rs._checkControlTime(1,this.el_.children,this.timeOld)}})();
2 |
--------------------------------------------------------------------------------
/demo.css:
--------------------------------------------------------------------------------
1 | .button{
2 | margin: 10px;
3 | border:1px solid #d7dada;-webkit-box-shadow: #000000 1px 1px 1px ;-moz-box-shadow: #000000 1px 1px 1px ; box-shadow: #000000 1px 1px 1px ; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:15px;font-family:arial, helvetica, sans-serif; padding: 7px 7px 7px 7px; text-decoration:none; display:inline-block;font-weight:bold; color: #666666;
4 | background-color: #f4f5f5; background-image: -webkit-gradient(linear, left top, left bottom, from(#f4f5f5), to(#dfdddd));
5 | background-image: -webkit-linear-gradient(top, #f4f5f5, #dfdddd);
6 | background-image: -moz-linear-gradient(top, #f4f5f5, #dfdddd);
7 | background-image: -ms-linear-gradient(top, #f4f5f5, #dfdddd);
8 | background-image: -o-linear-gradient(top, #f4f5f5, #dfdddd);
9 | background-image: linear-gradient(to bottom, #f4f5f5, #dfdddd);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#f4f5f5, endColorstr=#dfdddd);
10 | }
11 |
12 | .button:hover{
13 | border:1px solid #bfc4c4;
14 | background-color: #d9dddd; background-image: -webkit-gradient(linear, left top, left bottom, from(#d9dddd), to(#c6c3c3));
15 | background-image: -webkit-linear-gradient(top, #d9dddd, #c6c3c3);
16 | background-image: -moz-linear-gradient(top, #d9dddd, #c6c3c3);
17 | background-image: -ms-linear-gradient(top, #d9dddd, #c6c3c3);
18 | background-image: -o-linear-gradient(top, #d9dddd, #c6c3c3);
19 | background-image: linear-gradient(to bottom, #d9dddd, #c6c3c3);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#d9dddd, endColorstr=#c6c3c3);
20 | }
21 |
22 | #fieldSelection {
23 | text-align: left;
24 | padding-left: 20px;
25 | padding-right: 20px;
26 | line-height: 30px;
27 | padding-top: 10px;
28 | font-family: Arial,Helvetica,sans-serif;
29 | font-size: 14px;
30 | color: #333;
31 | background-color: #f0f3e7;
32 | -webkit-padding-start: 0.75em;
33 | -webkit-padding-end: 0.75em;
34 | -webkit-padding-after: 0.625em;
35 | border: 2px groove threedface;
36 | border-image-source: initial;
37 | border-image-slice: initial;
38 | border-image-width: initial;
39 | border-image-outset: initial;
40 | border-image-repeat: initial;
41 | min-width: -webkit-min-content;
42 | }
43 | #fieldSelection legend{
44 | font-weight: bold;
45 | font-size: 15px;
46 | color: #666666;
47 | border: 2px solid #666666;
48 | background-color: white;
49 | border-top-right-radius: 10px;
50 | border-radius: 9px;
51 | }
52 | #vid1 {
53 | display: block!important;
54 | margin-left: auto!important;
55 | margin-right: auto!important;
56 | border: none;
57 | margin-top: 0px;
58 | margin-bottom: 18px;
59 | }
60 | .title{
61 | text-align:center;
62 | width:100%;
63 | }
64 |
--------------------------------------------------------------------------------
/demo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | JS RangeSlider Test
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
Range Slider for video-js
22 |
23 |
31 |
32 |
86 |
87 |
88 |
Show/Hide RS
89 |
Lock/Unlock RS
90 |
show/hide Panel
91 |
show/hide ControlTime
92 |
93 |
94 |
95 |
96 |
Play Between
97 |
Loop Between
98 |
Get Arrow Values
99 | Start (seconds):
100 | End (seconds):
101 |
102 |
103 |
104 |
--------------------------------------------------------------------------------
/src/rangeslider.css:
--------------------------------------------------------------------------------
1 | /*Range Slider Bar Time*/
2 | .vjs-default-skin .vjs-timebar-RS{
3 | color: red;
4 | top: -1em;
5 | height: 100%;
6 | position: relative;
7 | background: rgba(100,100,100,.5);/*Quitar*/
8 | }
9 |
10 |
11 |
12 | /*Selection Range Slider Bar Selected*/
13 | .vjs-default-skin .vjs-rangeslider-holder{height: 100%;}
14 |
15 | .vjs-default-skin .vjs-selectionbar-RS{
16 | height: 100%;
17 | float: left;
18 | width: 100%;
19 | left: 0em;
20 | right: 0em;
21 | position:absolute;
22 | background-color: #FFE800;
23 | background: #FFE800;
24 | background: -moz-linear-gradient(top, #FFE800, #A69700);
25 | background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFE800), to(#A69700));
26 | background: -webkit-linear-gradient(top, #FFE800, #A69700);
27 | background: -o-linear-gradient(top, #FFE800, #A69700);
28 | background: -ms-linear-gradient(top, #FFE800, #A69700);
29 | background: linear-gradient(top, #FFE800, #A69700);
30 | opacity: 0.8;
31 | }
32 |
33 | .vjs-default-skin div.vjs-rangeslider-holder.locked > div.vjs-selectionbar-RS {
34 | background-color: #FF6565;
35 | background: #FF6565;
36 | background: -moz-linear-gradient(top, #FF6565, #300000);
37 | background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF6565), to(#300000));
38 | background: -webkit-linear-gradient(top, #FF6565, #300000);
39 | background: -o-linear-gradient(top, #FF6565, #300000);
40 | background: -ms-linear-gradient(top, #FF6565, #300000);
41 | background: linear-gradient(top, #FF6565, #300000);
42 | }
43 |
44 |
45 | /*Arrow and Handle*/
46 | .vjs-default-skin div.vjs-rangeslider-handle {
47 | position: absolute;
48 | margin-top: 0;
49 | cursor: pointer !important;
50 | background-color: transparent;
51 | }
52 |
53 | .vjs-default-skin .vjs-selectionbar-left-RS{height: 100%;left: 0;z-index:10}
54 | .vjs-default-skin .vjs-selectionbar-right-RS{height: 100%;left: 100%;z-index:20}
55 |
56 | .vjs-default-skin div.vjs-selectionbar-left-RS,
57 | .vjs-default-skin div.vjs-selectionbar-right-RS {
58 | top: 0em;
59 | position: absolute;
60 | width:0em;
61 | }
62 |
63 | .vjs-default-skin div.vjs-selectionbar-arrow-RS {
64 | width: 0;
65 | height: 0;
66 | border-left: 1em solid transparent;
67 | border-right: 1em solid transparent;
68 | border-top: 1em solid #FFF273;
69 | margin-left: -1em;
70 | opacity: 0.8;
71 |
72 | position: absolute;
73 | top: -1em;
74 | }
75 | .vjs-default-skin div.vjs-rangeslider-handle.active > div.vjs-selectionbar-arrow-RS {
76 | border-top-color: #5F5FB3;
77 | }
78 |
79 | .vjs-default-skin div.vjs-rangeslider-holder.locked .vjs-rangeslider-handle > div.vjs-selectionbar-arrow-RS {
80 | border-top-color: #FF6565;
81 | }
82 |
83 | .vjs-default-skin div.vjs-selectionbar-line-RS {
84 | width: 1px;
85 | height: 1em;
86 | background-color: #FFF273;
87 |
88 | position:absolute;
89 | top: 0em;
90 | }
91 | .vjs-default-skin div.vjs-rangeslider-handle.active > div.vjs-selectionbar-line-RS {
92 | background-color: #5F5FB3;
93 | }
94 |
95 | .vjs-default-skin div.vjs-rangeslider-holder.locked .vjs-rangeslider-handle > div.vjs-selectionbar-line-RS {
96 | background-color: #FF6565;
97 | }
98 |
99 |
100 | /* Time Panel */
101 | .vjs-default-skin .vjs-timepanel-RS{
102 | width: 100%;
103 | height: 1em;
104 | font-weight: bold;
105 | font-size: 15px;
106 | top: -2em;
107 | position: absolute;
108 | visibility:visible;
109 | opacity:1;
110 | transition-delay:0s;
111 | }
112 | .vjs-default-skin .vjs-timepanel-RS.disable{
113 | visibility:hidden;
114 | opacity:0;
115 | -webkit-transition: visibility 1s linear 1s,opacity 1s linear;
116 | -moz-transition: visibility 1s linear 1s,opacity 1s linear;
117 | -o-transition: visibility 1s linear 1s,opacity 1s linear;
118 | transition:visibility 1s linear 1s,opacity 1s linear;
119 | }
120 |
121 | .vjs-default-skin .vjs-timepanel-left-RS,
122 | .vjs-default-skin .vjs-timepanel-right-RS{
123 | font-weight: normal;
124 | font-size: 1em;
125 | color: #666666;
126 | border: 1px solid #666666;
127 | background-color: white;
128 | border-radius: 5px;
129 | position: absolute;
130 | height:116%;
131 | padding-right: 0.3em;
132 | padding-left: 0.3em;
133 | }
134 | .vjs-default-skin .vjs-timepanel-left-RS{
135 | left:0.5%
136 | }
137 | .vjs-default-skin .vjs-timepanel-right-RS{
138 | left:92%
139 | }
140 |
141 |
142 |
143 |
144 | /* Control Time Panel */
145 | .vjs-default-skin .vjs-controltimepanel-RS{
146 | width: 18em;
147 | font-size: 1em;
148 | line-height: 3em;
149 | }
150 |
151 | .vjs-default-skin .vjs-controltimepanel-RS input{
152 | width: 1.5em;
153 | background: rgba(102, 168, 204, 0.16);
154 | border: 1px solid transparent;
155 | color: black;
156 | font-size: 1em;
157 | margin-left: 2px;
158 | text-align: center;
159 | color: white;
160 | }
161 |
162 | .vjs-default-skin .vjs-controltimepanel-left-RS{
163 | width: 50%;
164 | float: left;
165 | }
166 | .vjs-default-skin .vjs-controltimepanel-right-RS{
167 | float:right;
168 | width: 48%;
169 | }
170 | .vjs-default-skin .vjs-controltimepanel-RS input{
171 | margin: 0;
172 | padding: 0;
173 | display: table-cell;
174 | }
175 |
176 |
177 | /* ---------------- Video-js plugin ---------------- */
178 |
179 | .vjs-default-skin *, .vjs-default-skin *:before, .vjs-default-skin *:after {
180 | -moz-box-sizing: border-box;
181 | -webkit-box-sizing: border-box;
182 | box-sizing: border-box;
183 | margin: 0;
184 | padding: 0;
185 | }
186 |
187 |
--------------------------------------------------------------------------------
/src/rangeslider.js:
--------------------------------------------------------------------------------
1 | /*
2 | RangeSlider v1.1 (https://github.com/danielcebrian/rangeslider-videojs)
3 | Copyright (C) 2014 Daniel Cebrián Robles
4 | License GNU: https://github.com/danielcebrian/rangeslider-videojs/blob/master/License-GNU.rst
5 | License Apache: https://github.com/danielcebrian/rangeslider-videojs/blob/master/License-Apache.rst
6 |
7 | - GNU
8 |
9 | This program is free software; you can redistribute it and/or
10 | modify it under the terms of the GNU General Public License
11 | as published by the Free Software Foundation; either version 2
12 | of the License, or (at your option) any later version.
13 |
14 | This program is distributed in the hope that it will be useful,
15 | but WITHOUT ANY WARRANTY; without even the implied warranty of
16 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
17 | GNU General Public License for more details.
18 |
19 | You should have received a copy of the GNU General Public License
20 | along with this program; if not, write to the Free Software
21 | Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
22 |
23 | - APACHE
24 |
25 | Licensed under the Apache License, Version 2.0 (the "License");
26 | you may not use this file except in compliance with the License.
27 | You may obtain a copy of the License at
28 |
29 | http://www.apache.org/licenses/LICENSE-2.0
30 |
31 | Unless required by applicable law or agreed to in writing, software
32 | distributed under the License is distributed on an "AS IS" BASIS,
33 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
34 | See the License for the specific language governing permissions and
35 | limitations under the License.
36 | */
37 | //----------------Load Plugin----------------//
38 | (function () {
39 | //-- Load RangeSlider plugin in videojs
40 | function RangeSlider_(options) {
41 | var player = this;
42 |
43 | player.rangeslider = new RangeSlider(player, options);
44 |
45 | //When the DOM and the video media is loaded
46 | function initialVideoFinished(event) {
47 | var plugin = player.rangeslider;
48 | //All components will be initialize after they have been loaded by videojs
49 | for (var index in plugin.components) {
50 | plugin.components[index].init_();
51 | }
52 |
53 | if (plugin.options.hidden)
54 | plugin.hide(); //Hide the Range Slider
55 |
56 | if (plugin.options.locked)
57 | plugin.lock(); //Lock the Range Slider
58 |
59 | if (plugin.options.panel == false)
60 | plugin.hidePanel(); //Hide the second Panel
61 |
62 | if (plugin.options.controlTime == false)
63 | plugin.hidecontrolTime(); //Hide the control time panel
64 |
65 | plugin._reset();
66 | player.trigger('loadedRangeSlider'); //Let know if the Range Slider DOM is ready
67 | }
68 | if (player.techName == 'Youtube') {
69 | //Detect youtube problems
70 | player.one('error', function (e) {
71 | switch (player.error) {
72 | case 2:
73 | alert("The request contains an invalid parameter value. For example, this error occurs if you specify a video ID that does not have 11 characters, or if the video ID contains invalid characters, such as exclamation points or asterisks.");
74 | case 5:
75 | alert("The requested content cannot be played in an HTML5 player or another error related to the HTML5 player has occurred.");
76 | case 100:
77 | alert("The video requested was not found. This error occurs when a video has been removed (for any reason) or has been marked as private.");
78 | break;
79 | case 101:
80 | alert("The owner of the requested video does not allow it to be played in embedded players.");
81 | break;
82 | case 150:
83 | alert("The owner of the requested video does not allow it to be played in embedded players.");
84 | break;
85 | default:
86 | alert("Unknown Error");
87 | break;
88 | }
89 | });
90 | player.on('firstplay', initialVideoFinished);
91 | } else {
92 | player.one('playing', initialVideoFinished);
93 | }
94 |
95 |
96 | console.log("Loaded Plugin RangeSlider");
97 | }
98 | videojs.plugin('rangeslider', RangeSlider_);
99 |
100 |
101 |
102 | //-- Plugin
103 | function RangeSlider(player, options) {
104 | var player = player || this;
105 |
106 | this.player = player;
107 |
108 | this.components = {}; // holds any custom components we add to the player
109 |
110 | options = options || {}; // plugin options
111 |
112 | if (!options.hasOwnProperty('locked'))
113 | options.locked = false; // lock slider handles
114 |
115 | if (!options.hasOwnProperty('hidden'))
116 | options.hidden = true; // hide slider handles
117 |
118 | if (!options.hasOwnProperty('panel'))
119 | options.panel = true; // Show Second Panel
120 |
121 | if (!options.hasOwnProperty('controlTime'))
122 | options.controlTime = true; // Show Control Time to set the arrows in the edition
123 |
124 | this.options = options;
125 |
126 | this.init();
127 | }
128 |
129 | //-- Methods
130 | RangeSlider.prototype = {
131 | /*Constructor*/
132 | init: function () {
133 | var player = this.player || {};
134 |
135 | this.updatePrecision = 3;
136 |
137 | //position in second of the arrows
138 | this.start = 0;
139 | this.end = 0;
140 |
141 | //components of the plugin
142 | var controlBar = player.controlBar;
143 | var seekBar = controlBar.progressControl.seekBar;
144 | this.components.RSTimeBar = seekBar.RSTimeBar;
145 | this.components.ControlTimePanel = controlBar.ControlTimePanel;
146 |
147 | //Save local component
148 | this.rstb = this.components.RSTimeBar;
149 | this.box = this.components.SeekRSBar = this.rstb.SeekRSBar;
150 | this.bar = this.components.SelectionBar = this.box.SelectionBar;
151 | this.left = this.components.SelectionBarLeft = this.box.SelectionBarLeft;
152 | this.right = this.components.SelectionBarRight = this.box.SelectionBarRight;
153 | this.tp = this.components.TimePanel = this.box.TimePanel;
154 | this.tpl = this.components.TimePanelLeft = this.tp.TimePanelLeft;
155 | this.tpr = this.components.TimePanelRight = this.tp.TimePanelRight;
156 | this.ctp = this.components.ControlTimePanel;
157 | this.ctpl = this.components.ControlTimePanelLeft = this.ctp.ControlTimePanelLeft;
158 | this.ctpr = this.components.ControlTimePanelRight = this.ctp.ControlTimePanelRight;
159 |
160 | },
161 | lock: function () {
162 | this.options.locked = true;
163 | this.ctp.enable(false);
164 | if (typeof this.box != 'undefined')
165 | videojs.addClass(this.box.el_, 'locked');
166 | },
167 | unlock: function () {
168 | this.options.locked = false;
169 | this.ctp.enable();
170 | if (typeof this.box != 'undefined')
171 | videojs.removeClass(this.box.el_, 'locked');
172 | },
173 | show: function () {
174 | this.options.hidden = false;
175 | if (typeof this.rstb != 'undefined') {
176 | this.rstb.show();
177 | if (this.options.controlTime)
178 | this.showcontrolTime();
179 | }
180 | },
181 | hide: function () {
182 | this.options.hidden = true;
183 | if (typeof this.rstb != 'undefined') {
184 | this.rstb.hide();
185 | this.ctp.hide();
186 | }
187 | },
188 | showPanel: function () {
189 | this.options.panel = true;
190 | if (typeof this.tp != 'undefined')
191 | videojs.removeClass(this.tp.el_, 'disable');
192 | },
193 | hidePanel: function () {
194 | this.options.panel = false;
195 | if (typeof this.tp != 'undefined')
196 | videojs.addClass(this.tp.el_, 'disable');
197 | },
198 | showcontrolTime: function () {
199 | this.options.controlTime = true;
200 | if (typeof this.ctp != 'undefined')
201 | this.ctp.show();
202 | },
203 | hidecontrolTime: function () {
204 | this.options.controlTime = false;
205 | if (typeof this.ctp != 'undefined')
206 | this.ctp.hide();
207 | },
208 | setValue: function (index, seconds, writeControlTime) {
209 | //index = 0 for the left Arrow and 1 for the right Arrow. Value in seconds
210 | var writeControlTime = typeof writeControlTime != 'undefined' ? writeControlTime : true;
211 |
212 | var percent = this._percent(seconds);
213 | var isValidIndex = (index === 0 || index === 1);
214 | var isChangeable = !this.locked;
215 | if (isChangeable && isValidIndex)
216 | this.box.setPosition(index, percent, writeControlTime);
217 | },
218 | setValues: function (start, end, writeControlTime) {
219 | //index = 0 for the left Arrow and 1 for the right Arrow. Value in seconds
220 | var writeControlTime = typeof writeControlTime != 'undefined' ? writeControlTime : true;
221 |
222 | this._reset();
223 |
224 | this._setValuesLocked(start, end, writeControlTime);
225 | },
226 | getValues: function () { //get values in seconds
227 | var values = {}, start, end;
228 | start = this.start || this._getArrowValue(0);
229 | end = this.end || this._getArrowValue(1);
230 | return {start: start, end: end};
231 | },
232 | playBetween: function (start, end, showRS) {
233 | showRS = typeof showRS == 'undefined' ? true : showRS;
234 | this.player.currentTime(start);
235 | this.player.play();
236 | if (showRS) {
237 | this.show();
238 | this._reset();
239 | } else {
240 | this.hide();
241 | }
242 | this._setValuesLocked(start, end);
243 |
244 | this.bar.activatePlay(start, end);
245 | },
246 | loop: function (start, end, show) {
247 | var player = this.player;
248 |
249 | if (player) {
250 | player.on("pause", videojs.bind(this, function () {
251 | this.looping = false;
252 | }));
253 |
254 | show = typeof show === 'undefined' ? true : show;
255 |
256 | if (show) {
257 | this.show();
258 | this._reset();
259 | }
260 | else {
261 | this.hide();
262 | }
263 | this._setValuesLocked(start, end);
264 |
265 | this.timeStart = start;
266 | this.timeEnd = end;
267 | this.looping = true;
268 |
269 | this.player.currentTime(start);
270 | this.player.play();
271 |
272 | this.player.on("timeupdate", videojs.bind(this, this.bar.process_loop));
273 | }
274 | },
275 | _getArrowValue: function (index) {
276 | var index = index || 0;
277 | var duration = this.player.duration();
278 |
279 | duration = typeof duration == 'undefined' ? 0 : duration;
280 |
281 | var percentage = this[index === 0 ? "left" : "right"].el_.style.left.replace("%", "");
282 | if (percentage == "")
283 | percentage = index === 0 ? 0 : 100;
284 |
285 | return videojs.round(this._seconds(percentage / 100), this.updatePrecision - 1);
286 | },
287 | _percent: function (seconds) {
288 | var duration = this.player.duration();
289 | if (isNaN(duration)) {
290 | return 0;
291 | }
292 | return Math.min(1, Math.max(0, seconds / duration));
293 | },
294 | _seconds: function (percent) {
295 | var duration = this.player.duration();
296 | if (isNaN(duration)) {
297 | return 0;
298 | }
299 | return Math.min(duration, Math.max(0, percent * duration));
300 | },
301 | _reset: function () {
302 | var duration = this.player.duration();
303 | this.tpl.el_.style.left = '0%';
304 | this.tpr.el_.style.left = '100%';
305 | this._setValuesLocked(0, duration);
306 | },
307 | _setValuesLocked: function (start, end, writeControlTime) {
308 | var triggerSliderChange = typeof writeControlTime != 'undefined';
309 | var writeControlTime = typeof writeControlTime != 'undefined' ? writeControlTime : true;
310 | if (this.options.locked) {
311 | this.unlock();//It is unlocked to change the bar position. In the end it will return the value.
312 | this.setValue(0, start, writeControlTime);
313 | this.setValue(1, end, writeControlTime);
314 | this.lock();
315 | } else {
316 | this.setValue(0, start, writeControlTime);
317 | this.setValue(1, end, writeControlTime);
318 | }
319 |
320 | // Trigger slider change
321 | if (triggerSliderChange) {
322 | this._triggerSliderChange();
323 | }
324 | },
325 | _checkControlTime: function (index, TextInput, timeOld) {
326 | var h = TextInput[0],
327 | m = TextInput[1],
328 | s = TextInput[2],
329 | newHour = h.value,
330 | newMin = m.value,
331 | newSec = s.value,
332 | obj, objNew, objOld;
333 | index = index || 0;
334 |
335 | if (newHour != timeOld[0]) {
336 | obj = h;
337 | objNew = newHour;
338 | objOld = timeOld[0];
339 | } else if (newMin != timeOld[1]) {
340 | obj = m;
341 | objNew = newMin;
342 | objOld = timeOld[1];
343 | } else if (newSec != timeOld[2]) {
344 | obj = s;
345 | objNew = newSec;
346 | objOld = timeOld[2];
347 | } else {
348 | return false;
349 | }
350 |
351 | var duration = this.player.duration() || 0,
352 | durationSel;
353 |
354 | var intRegex = /^\d+$/;//check if the objNew is an integer
355 | if (!intRegex.test(objNew) || objNew > 60) {
356 | objNew = objNew == "" ? "" : objOld;
357 | }
358 |
359 | newHour = newHour == "" ? 0 : newHour;
360 | newMin = newMin == "" ? 0 : newMin;
361 | newSec = newSec == "" ? 0 : newSec;
362 |
363 | durationSel = videojs.TextTrack.prototype.parseCueTime(newHour + ":" + newMin + ":" + newSec);
364 | if (durationSel > duration) {
365 | obj.value = objOld;
366 | obj.style.border = "1px solid red";
367 | } else {
368 | obj.value = objNew;
369 | h.style.border = m.style.border = s.style.border = "1px solid transparent";
370 | this.setValue(index, durationSel, false);
371 |
372 | // Trigger slider change
373 | this._triggerSliderChange();
374 | }
375 | if (index === 1) {
376 | var oldTimeLeft = this.ctpl.el_.children,
377 | durationSelLeft = videojs.TextTrack.prototype.parseCueTime(oldTimeLeft[0].value + ":" + oldTimeLeft[1].value + ":" + oldTimeLeft[2].value);
378 | if (durationSel < durationSelLeft) {
379 | obj.style.border = "1px solid red";
380 | }
381 | } else {
382 |
383 | var oldTimeRight = this.ctpr.el_.children,
384 | durationSelRight = videojs.TextTrack.prototype.parseCueTime(oldTimeRight[0].value + ":" + oldTimeRight[1].value + ":" + oldTimeRight[2].value);
385 | if (durationSel > durationSelRight) {
386 | obj.style.border = "1px solid red";
387 | }
388 | }
389 | },
390 | _triggerSliderChange: function () {
391 | this.player.trigger("sliderchange");
392 | }
393 | };
394 |
395 |
396 | //----------------Public Functions----------------//
397 |
398 | //-- Public Functions added to video-js
399 |
400 | //Lock the Slider bar and it will not be possible to change the arrow positions
401 | videojs.Player.prototype.lockSlider = function () {
402 | return this.rangeslider.lock();
403 | };
404 |
405 | //Unlock the Slider bar and it will be possible to change the arrow positions
406 | videojs.Player.prototype.unlockSlider = function () {
407 | return this.rangeslider.unlock();
408 | };
409 |
410 | //Show the Slider Bar Component
411 | videojs.Player.prototype.showSlider = function () {
412 | return this.rangeslider.show();
413 | };
414 |
415 | //Hide the Slider Bar Component
416 | videojs.Player.prototype.hideSlider = function () {
417 | return this.rangeslider.hide();
418 | };
419 |
420 | //Show the Panel with the seconds of the selection
421 | videojs.Player.prototype.showSliderPanel = function () {
422 | return this.rangeslider.showPanel();
423 | };
424 |
425 | //Hide the Panel with the seconds of the selection
426 | videojs.Player.prototype.hideSliderPanel = function () {
427 | return this.rangeslider.hidePanel();
428 | };
429 |
430 |
431 | //Show the control Time to edit the position of the arrows
432 | videojs.Player.prototype.showControlTime = function () {
433 | return this.rangeslider.showcontrolTime();
434 | };
435 |
436 | //Hide the control Time to edit the position of the arrows
437 | videojs.Player.prototype.hideControlTime = function () {
438 | return this.rangeslider.hidecontrolTime();
439 | };
440 |
441 | //Set a Value in second for both arrows
442 | videojs.Player.prototype.setValueSlider = function (start, end) {
443 | return this.rangeslider.setValues(start, end);
444 | };
445 |
446 | //The video will be played in a selected section
447 | videojs.Player.prototype.playBetween = function (start, end) {
448 | return this.rangeslider.playBetween(start, end);
449 | };
450 |
451 | //The video will loop between to values
452 | videojs.Player.prototype.loopBetween = function (start, end) {
453 | return this.rangeslider.loop(start, end);
454 | };
455 |
456 | //Set a Value in second for the arrows
457 | videojs.Player.prototype.getValueSlider = function () {
458 | return this.rangeslider.getValues();
459 | };
460 |
461 |
462 |
463 | //----------------Create new Components----------------//
464 |
465 | //--Charge the new Component into videojs
466 | videojs.SeekBar.prototype.options_.children.RSTimeBar = {}; //Range Slider Time Bar
467 | videojs.ControlBar.prototype.options_.children.ControlTimePanel = {}; //Panel with the time of the range slider
468 |
469 |
470 |
471 | //-- Design the new components
472 |
473 | /**
474 | * Range Slider Time Bar
475 | * @param {videojs.Player|Object} player
476 | * @param {Object=} options
477 | * @constructor
478 | */
479 | videojs.RSTimeBar = videojs.Component.extend({
480 | /** @constructor */
481 | init: function (player, options) {
482 | videojs.Component.call(this, player, options);
483 | }
484 | });
485 |
486 | videojs.RSTimeBar.prototype.init_ = function () {
487 | this.rs = this.player_.rangeslider;
488 | };
489 |
490 | videojs.RSTimeBar.prototype.options_ = {
491 | children: {
492 | 'SeekRSBar': {}
493 | }
494 | };
495 |
496 | videojs.RSTimeBar.prototype.createEl = function () {
497 | return videojs.Component.prototype.createEl.call(this, 'div', {
498 | className: 'vjs-timebar-RS',
499 | innerHTML: ''
500 | });
501 | };
502 |
503 |
504 |
505 | /**
506 | * Seek Range Slider Bar and holder for the selection bars
507 | * @param {videojs.Player|Object} player
508 | * @param {Object=} options
509 | * @constructor
510 | */
511 | videojs.SeekRSBar = videojs.Component.extend({
512 | /** @constructor */
513 | init: function (player, options) {
514 | videojs.Component.call(this, player, options);
515 | this.on('mousedown', this.onMouseDown);
516 | this.on('touchstart', this.onMouseDown);
517 | }
518 | });
519 |
520 | videojs.SeekRSBar.prototype.init_ = function () {
521 | this.rs = this.player_.rangeslider;
522 | };
523 |
524 | videojs.SeekRSBar.prototype.options_ = {
525 | children: {
526 | 'SelectionBar': {},
527 | 'SelectionBarLeft': {},
528 | 'SelectionBarRight': {},
529 | 'TimePanel': {},
530 | }
531 | };
532 |
533 | videojs.SeekRSBar.prototype.createEl = function () {
534 | return videojs.Component.prototype.createEl.call(this, 'div', {
535 | className: 'vjs-rangeslider-holder'
536 | });
537 | };
538 |
539 |
540 | videojs.SeekRSBar.prototype.onMouseDown = function (event) {
541 | event.preventDefault();
542 | videojs.blockTextSelection();
543 |
544 | if (!this.rs.options.locked) {
545 | videojs.on(document, "mousemove", videojs.bind(this, this.onMouseMove));
546 | videojs.on(document, "mouseup", videojs.bind(this, this.onMouseUp));
547 | videojs.on(document, "touchmove", videojs.bind(this, this.onMouseMove));
548 | videojs.on(document, "touchend", videojs.bind(this, this.onMouseUp));
549 | }
550 | };
551 |
552 | videojs.SeekRSBar.prototype.onMouseUp = function (event) {
553 | videojs.off(document, "mousemove", this.onMouseMove, false);
554 | videojs.off(document, "mouseup", this.onMouseUp, false);
555 | videojs.off(document, "touchmove", this.onMouseMove, false);
556 | videojs.off(document, "touchend", this.onMouseUp, false);
557 | };
558 |
559 | videojs.SeekRSBar.prototype.onMouseMove = function (event) {
560 | var left = this.calculateDistance(event);
561 |
562 | if (this.rs.left.pressed)
563 | this.setPosition(0, left);
564 | else if (this.rs.right.pressed)
565 | this.setPosition(1, left);
566 |
567 | this.player_.currentTime(this.rs._seconds(left));
568 |
569 | // Trigger slider change
570 | if (this.rs.left.pressed || this.rs.right.pressed) {
571 | this.rs._triggerSliderChange();
572 | }
573 | };
574 |
575 | videojs.SeekRSBar.prototype.setPosition = function (index, left, writeControlTime) {
576 | var writeControlTime = typeof writeControlTime != 'undefined' ? writeControlTime : true;
577 | //index = 0 for left side, index = 1 for right side
578 | var index = index || 0;
579 |
580 | // Position shouldn't change when handle is locked
581 | if (this.rs.options.locked)
582 | return false;
583 |
584 | // Check for invalid position
585 | if (isNaN(left))
586 | return false;
587 |
588 | // Check index between 0 and 1
589 | if (!(index === 0 || index === 1))
590 | return false;
591 |
592 | // Alias
593 | var ObjLeft = this.rs.left.el_,
594 | ObjRight = this.rs.right.el_,
595 | Obj = this.rs[index === 0 ? 'left' : 'right'].el_,
596 | tpr = this.rs.tpr.el_,
597 | tpl = this.rs.tpl.el_,
598 | bar = this.rs.bar,
599 | ctp = this.rs[index === 0 ? 'ctpl' : 'ctpr'].el_;
600 |
601 | //Check if left arrow is passing the right arrow
602 | if ((index === 0 ? bar.updateLeft(left) : bar.updateRight(left))) {
603 | Obj.style.left = (left * 100) + '%';
604 | index === 0 ? bar.updateLeft(left) : bar.updateRight(left);
605 |
606 | this.rs[index === 0 ? 'start' : 'end'] = this.rs._seconds(left);
607 |
608 | //Fix the problem when you press the button and the two arrow are underhand
609 | //left.zIndex = 10 and right.zIndex=20. This is always less in this case:
610 | if (index === 0) {
611 | if ((left) >= 0.9)
612 | ObjLeft.style.zIndex = 25;
613 | else
614 | ObjLeft.style.zIndex = 10;
615 | }
616 |
617 | //-- Panel
618 | var TimeText = videojs.formatTime(this.rs._seconds(left)),
619 | tplTextLegth = tpl.children[0].innerHTML.length;
620 | var MaxP, MinP, MaxDisP;
621 | if (tplTextLegth <= 4) //0:00
622 | MaxDisP = this.player_.isFullScreen ? 3.25 : 6.5;
623 | else if (tplTextLegth <= 5)//00:00
624 | MaxDisP = this.player_.isFullScreen ? 4 : 8;
625 | else//0:00:00
626 | MaxDisP = this.player_.isFullScreen ? 5 : 10;
627 | if (TimeText.length <= 4) { //0:00
628 | MaxP = this.player_.isFullScreen ? 97 : 93;
629 | MinP = this.player_.isFullScreen ? 0.1 : 0.5;
630 | } else if (TimeText.length <= 5) {//00:00
631 | MaxP = this.player_.isFullScreen ? 96 : 92;
632 | MinP = this.player_.isFullScreen ? 0.1 : 0.5;
633 | } else {//0:00:00
634 | MaxP = this.player_.isFullScreen ? 95 : 91;
635 | MinP = this.player_.isFullScreen ? 0.1 : 0.5;
636 | }
637 |
638 | if (index === 0) {
639 | tpl.style.left = Math.max(MinP, Math.min(MaxP, (left * 100 - MaxDisP / 2))) + '%';
640 |
641 | if ((tpr.style.left.replace("%", "") - tpl.style.left.replace("%", "")) <= MaxDisP)
642 | tpl.style.left = Math.max(MinP, Math.min(MaxP, tpr.style.left.replace("%", "") - MaxDisP)) + '%';
643 | tpl.children[0].innerHTML = TimeText;
644 | } else {
645 | tpr.style.left = Math.max(MinP, Math.min(MaxP, (left * 100 - MaxDisP / 2))) + '%';
646 |
647 | if (((tpr.style.left.replace("%", "") || 100) - tpl.style.left.replace("%", "")) <= MaxDisP)
648 | tpr.style.left = Math.max(MinP, Math.min(MaxP, tpl.style.left.replace("%", "") - 0 + MaxDisP)) + '%';
649 | tpr.children[0].innerHTML = TimeText;
650 | }
651 | //-- Control Time
652 | if (writeControlTime) {
653 | var time = TimeText.split(":"),
654 | h, m, s;
655 | if (time.length == 2) {
656 | h = 00;
657 | m = time[0];
658 | s = time[1];
659 | } else {
660 | h = time[0];
661 | m = time[1];
662 | s = time[2];
663 | }
664 | ctp.children[0].value = h;
665 | ctp.children[1].value = m;
666 | ctp.children[2].value = s;
667 | }
668 | }
669 | return true;
670 | };
671 |
672 | videojs.SeekRSBar.prototype.calculateDistance = function (event) {
673 | var rstbX = this.getRSTBX();
674 | var rstbW = this.getRSTBWidth();
675 | var handleW = this.getWidth();
676 |
677 | // Adjusted X and Width, so handle doesn't go outside the bar
678 | rstbX = rstbX + (handleW / 2);
679 | rstbW = rstbW - handleW;
680 |
681 | // Percent that the click is through the adjusted area
682 | //during touch event.pageX is not present
683 | if(event.pageX){
684 | return Math.max(0, Math.min(1, (event.pageX - rstbX) / rstbW));
685 | }
686 | else{
687 | //this is a touch event
688 | return Math.max(0, Math.min(1, (event.touches[0].pageX - rstbX) / rstbW));
689 | }
690 | };
691 |
692 | videojs.SeekRSBar.prototype.getRSTBWidth = function () {
693 | return this.el_.offsetWidth;
694 | };
695 | videojs.SeekRSBar.prototype.getRSTBX = function () {
696 | return videojs.findPosition(this.el_).left;
697 | };
698 | videojs.SeekRSBar.prototype.getWidth = function () {
699 | return this.rs.left.el_.offsetWidth;//does not matter left or right
700 | };
701 |
702 |
703 |
704 | /**
705 | * This is the bar with the selection of the RangeSlider
706 | * @param {videojs.Player|Object} player
707 | * @param {Object=} options
708 | * @constructor
709 | */
710 | videojs.SelectionBar = videojs.Component.extend({
711 | /** @constructor */
712 | init: function (player, options) {
713 | videojs.Component.call(this, player, options);
714 | this.on('mouseup', this.onMouseUp);
715 | this.on('touchend', this.onMouseUp);
716 | this.fired = false;
717 | }
718 | });
719 |
720 | videojs.SelectionBar.prototype.init_ = function () {
721 | this.rs = this.player_.rangeslider;
722 | };
723 |
724 | videojs.SelectionBar.prototype.createEl = function () {
725 | return videojs.Component.prototype.createEl.call(this, 'div', {
726 | className: 'vjs-selectionbar-RS'
727 | });
728 | };
729 |
730 | videojs.SelectionBar.prototype.onMouseUp = function () {
731 | var start = this.rs.left.el_.style.left.replace("%", ""),
732 | end = this.rs.right.el_.style.left.replace("%", ""),
733 | duration = this.player_.duration(),
734 | precision = this.rs.updatePrecision,
735 | segStart = videojs.round(start * duration / 100, precision),
736 | segEnd = videojs.round(end * duration / 100, precision);
737 | this.player_.currentTime(segStart);
738 | this.player_.play();
739 | this.rs.bar.activatePlay(segStart, segEnd);
740 | };
741 |
742 | videojs.SelectionBar.prototype.updateLeft = function (left) {
743 | var rightVal = this.rs.right.el_.style.left != '' ? this.rs.right.el_.style.left : 100;
744 | var right = parseFloat(rightVal) / 100;
745 |
746 | var width = videojs.round((right - left), this.rs.updatePrecision); //round necessary for not get 0.6e-7 for example that it's not able for the html css width
747 |
748 | //(right+0.00001) is to fix the precision of the css in html
749 | if (left <= (right + 0.00001)) {
750 | this.rs.bar.el_.style.left = (left * 100) + '%';
751 | this.rs.bar.el_.style.width = (width * 100) + '%';
752 | return true;
753 | }
754 | return false;
755 | };
756 |
757 | videojs.SelectionBar.prototype.updateRight = function (right) {
758 | var leftVal = this.rs.left.el_.style.left != '' ? this.rs.left.el_.style.left : 0;
759 | var left = parseFloat(leftVal) / 100;
760 |
761 | var width = videojs.round((right - left), this.rs.updatePrecision);//round necessary for not get 0.6e-7 for example that it's not able for the html css width
762 |
763 | //(right+0.00001) is to fix the precision of the css in html
764 | if ((right + 0.00001) >= left) {
765 | this.rs.bar.el_.style.width = (width * 100) + '%';
766 | this.rs.bar.el_.style.left = ((right - width) * 100) + '%';
767 | return true;
768 | }
769 | return false;
770 | };
771 |
772 | videojs.SelectionBar.prototype.activatePlay = function (start, end) {
773 | this.timeStart = start;
774 | this.timeEnd = end;
775 |
776 | this.suspendPlay();
777 |
778 | this.player_.on("timeupdate", videojs.bind(this, this._processPlay));
779 | };
780 |
781 | videojs.SelectionBar.prototype.suspendPlay = function () {
782 | this.fired = false;
783 | this.player_.off("timeupdate", videojs.bind(this, this._processPlay));
784 | };
785 |
786 | videojs.SelectionBar.prototype._processPlay = function () {
787 | //Check if current time is between start and end
788 | if (this.player_.currentTime() >= this.timeStart && (this.timeEnd < 0 || this.player_.currentTime() < this.timeEnd)) {
789 | if (this.fired) { //Do nothing if start has already been called
790 | return;
791 | }
792 | this.fired = true; //Set fired flag to true
793 | } else {
794 | if (!this.fired) { //Do nothing if end has already been called
795 | return;
796 | }
797 | this.fired = false; //Set fired flat to false
798 | this.player_.pause(); //Call end function
799 | this.player_.currentTime(this.timeEnd);
800 | this.suspendPlay();
801 | }
802 | };
803 |
804 | videojs.SelectionBar.prototype.process_loop = function () {
805 | var player = this.player;
806 |
807 | if (player && this.looping) {
808 | var current_time = player.currentTime();
809 |
810 | if (current_time < this.timeStart || this.timeEnd > 0 && this.timeEnd < current_time) {
811 | player.currentTime(this.timeStart);
812 | }
813 | }
814 | };
815 |
816 | /**
817 | * This is the left arrow to select the RangeSlider
818 | * @param {videojs.Player|Object} player
819 | * @param {Object=} options
820 | * @constructor
821 | */
822 | videojs.SelectionBarLeft = videojs.Component.extend({
823 | /** @constructor */
824 | init: function (player, options) {
825 | videojs.Component.call(this, player, options);
826 | this.on('mousedown', this.onMouseDown);
827 | this.on('touchstart', this.onMouseDown);
828 | this.pressed = false;
829 | }
830 | });
831 |
832 | videojs.SelectionBarLeft.prototype.init_ = function () {
833 | this.rs = this.player_.rangeslider;
834 | };
835 |
836 | videojs.SelectionBarLeft.prototype.createEl = function () {
837 | return videojs.Component.prototype.createEl.call(this, 'div', {
838 | className: 'vjs-rangeslider-handle vjs-selectionbar-left-RS',
839 | innerHTML: ''
840 | });
841 | };
842 |
843 | videojs.SelectionBarLeft.prototype.onMouseDown = function (event) {
844 | event.preventDefault();
845 | videojs.blockTextSelection();
846 | if (!this.rs.options.locked) {
847 | this.pressed = true;
848 | videojs.on(document, "mouseup", videojs.bind(this, this.onMouseUp));
849 | videojs.on(document, "touchend", videojs.bind(this, this.onMouseUp));
850 | videojs.addClass(this.el_, 'active');
851 | }
852 | };
853 |
854 | videojs.SelectionBarLeft.prototype.onMouseUp = function (event) {
855 | videojs.off(document, "mouseup", this.onMouseUp, false);
856 | videojs.off(document, "touchend", this.onMouseUp, false);
857 | videojs.removeClass(this.el_, 'active');
858 | if (!this.rs.options.locked) {
859 | this.pressed = false;
860 | }
861 | };
862 |
863 |
864 |
865 | /**
866 | * This is the right arrow to select the RangeSlider
867 | * @param {videojs.Player|Object} player
868 | * @param {Object=} options
869 | * @constructor
870 | */
871 | videojs.SelectionBarRight = videojs.Component.extend({
872 | /** @constructor */
873 | init: function (player, options) {
874 | videojs.Component.call(this, player, options);
875 | this.on('mousedown', this.onMouseDown);
876 | this.on('touchstart', this.onMouseDown);
877 | this.pressed = false;
878 | }
879 | });
880 |
881 | videojs.SelectionBarRight.prototype.init_ = function () {
882 | this.rs = this.player_.rangeslider;
883 | };
884 |
885 | videojs.SelectionBarRight.prototype.createEl = function () {
886 | return videojs.Component.prototype.createEl.call(this, 'div', {
887 | className: 'vjs-rangeslider-handle vjs-selectionbar-right-RS',
888 | innerHTML: ''
889 | });
890 | };
891 |
892 |
893 | videojs.SelectionBarRight.prototype.onMouseDown = function (event) {
894 | event.preventDefault();
895 | videojs.blockTextSelection();
896 | if (!this.rs.options.locked) {
897 | this.pressed = true;
898 | videojs.on(document, "mouseup", videojs.bind(this, this.onMouseUp));
899 | videojs.on(document, "touchend", videojs.bind(this, this.onMouseUp));
900 | videojs.addClass(this.el_, 'active');
901 | }
902 | };
903 |
904 | videojs.SelectionBarRight.prototype.onMouseUp = function (event) {
905 | videojs.off(document, "mouseup", this.onMouseUp, false);
906 | videojs.off(document, "touchend", this.onMouseUp, false);
907 | videojs.removeClass(this.el_, 'active');
908 | if (!this.rs.options.locked) {
909 | this.pressed = false;
910 | }
911 | };
912 |
913 |
914 | /**
915 | * This is the time panel
916 | * @param {videojs.Player|Object} player
917 | * @param {Object=} options
918 | * @constructor
919 | */
920 | videojs.TimePanel = videojs.Component.extend({
921 | /** @constructor */
922 | init: function (player, options) {
923 | videojs.Component.call(this, player, options);
924 | }
925 | });
926 |
927 | videojs.TimePanel.prototype.init_ = function () {
928 | this.rs = this.player_.rangeslider;
929 | };
930 |
931 | videojs.TimePanel.prototype.options_ = {
932 | children: {
933 | 'TimePanelLeft': {},
934 | 'TimePanelRight': {},
935 | }
936 | };
937 |
938 | videojs.TimePanel.prototype.createEl = function () {
939 | return videojs.Component.prototype.createEl.call(this, 'div', {
940 | className: 'vjs-timepanel-RS'
941 | });
942 | };
943 |
944 |
945 | /**
946 | * This is the left time panel
947 | * @param {videojs.Player|Object} player
948 | * @param {Object=} options
949 | * @constructor
950 | */
951 | videojs.TimePanelLeft = videojs.Component.extend({
952 | /** @constructor */
953 | init: function (player, options) {
954 | videojs.Component.call(this, player, options);
955 | }
956 | });
957 |
958 | videojs.TimePanelLeft.prototype.init_ = function () {
959 | this.rs = this.player_.rangeslider;
960 | };
961 |
962 | videojs.TimePanelLeft.prototype.createEl = function () {
963 | return videojs.Component.prototype.createEl.call(this, 'div', {
964 | className: 'vjs-timepanel-left-RS',
965 | innerHTML: '00:00'
966 | });
967 | };
968 |
969 |
970 | /**
971 | * This is the right time panel
972 | * @param {videojs.Player|Object} player
973 | * @param {Object=} options
974 | * @constructor
975 | */
976 | videojs.TimePanelRight = videojs.Component.extend({
977 | /** @constructor */
978 | init: function (player, options) {
979 | videojs.Component.call(this, player, options);
980 | }
981 | });
982 |
983 | videojs.TimePanelRight.prototype.init_ = function () {
984 | this.rs = this.player_.rangeslider;
985 | };
986 |
987 | videojs.TimePanelRight.prototype.createEl = function () {
988 | return videojs.Component.prototype.createEl.call(this, 'div', {
989 | className: 'vjs-timepanel-right-RS',
990 | innerHTML: '00:00'
991 | });
992 | };
993 |
994 |
995 | /**
996 | * This is the control time panel
997 | * @param {videojs.Player|Object} player
998 | * @param {Object=} options
999 | * @constructor
1000 | */
1001 | videojs.ControlTimePanel = videojs.Component.extend({
1002 | /** @constructor */
1003 | init: function (player, options) {
1004 | videojs.Component.call(this, player, options);
1005 | }
1006 | });
1007 |
1008 | videojs.ControlTimePanel.prototype.init_ = function () {
1009 | this.rs = this.player_.rangeslider;
1010 | };
1011 |
1012 |
1013 | videojs.ControlTimePanel.prototype.options_ = {
1014 | children: {
1015 | 'ControlTimePanelLeft': {},
1016 | 'ControlTimePanelRight': {},
1017 | }
1018 | };
1019 |
1020 | videojs.ControlTimePanel.prototype.createEl = function () {
1021 | return videojs.Component.prototype.createEl.call(this, 'div', {
1022 | className: 'vjs-controltimepanel-RS vjs-control',
1023 | });
1024 | };
1025 |
1026 | videojs.ControlTimePanel.prototype.enable = function (enable) {
1027 | var enable = typeof enable != 'undefined' ? enable : true;
1028 | this.rs.ctpl.el_.children[0].disabled = enable ? "" : "disabled";
1029 | this.rs.ctpl.el_.children[1].disabled = enable ? "" : "disabled";
1030 | this.rs.ctpl.el_.children[2].disabled = enable ? "" : "disabled";
1031 | this.rs.ctpr.el_.children[0].disabled = enable ? "" : "disabled";
1032 | this.rs.ctpr.el_.children[1].disabled = enable ? "" : "disabled";
1033 | this.rs.ctpr.el_.children[2].disabled = enable ? "" : "disabled";
1034 | };
1035 |
1036 |
1037 | /**
1038 | * This is the control left time panel
1039 | * @param {videojs.Player|Object} player
1040 | * @param {Object=} options
1041 | * @constructor
1042 | */
1043 | videojs.ControlTimePanelLeft = videojs.Component.extend({
1044 | /** @constructor */
1045 | init: function (player, options) {
1046 | videojs.Component.call(this, player, options);
1047 | this.on('keyup', this.onKeyUp);
1048 | this.on('keydown', this.onKeyDown);
1049 | }
1050 | });
1051 |
1052 | videojs.ControlTimePanelLeft.prototype.init_ = function () {
1053 | this.rs = this.player_.rangeslider;
1054 | this.timeOld = {};
1055 | };
1056 |
1057 | videojs.ControlTimePanelLeft.prototype.createEl = function () {
1058 | return videojs.Component.prototype.createEl.call(this, 'div', {
1059 | className: 'vjs-controltimepanel-left-RS',
1060 | innerHTML: 'Start: ::'
1061 | });
1062 | };
1063 |
1064 | videojs.ControlTimePanelLeft.prototype.onKeyDown = function (event) {
1065 | this.timeOld[0] = this.el_.children[0].value;
1066 | this.timeOld[1] = this.el_.children[1].value;
1067 | this.timeOld[2] = this.el_.children[2].value;
1068 | };
1069 |
1070 | videojs.ControlTimePanelLeft.prototype.onKeyUp = function (event) {
1071 | this.rs._checkControlTime(0, this.el_.children, this.timeOld);
1072 | };
1073 |
1074 |
1075 |
1076 | /**
1077 | * This is the control right time panel
1078 | * @param {videojs.Player|Object} player
1079 | * @param {Object=} options
1080 | * @constructor
1081 | */
1082 | videojs.ControlTimePanelRight = videojs.Component.extend({
1083 | /** @constructor */
1084 | init: function (player, options) {
1085 | videojs.Component.call(this, player, options);
1086 | this.on('keyup', this.onKeyUp);
1087 | this.on('keydown', this.onKeyDown);
1088 | }
1089 | });
1090 |
1091 | videojs.ControlTimePanelRight.prototype.init_ = function () {
1092 | this.rs = this.player_.rangeslider;
1093 | this.timeOld = {};
1094 | };
1095 |
1096 | videojs.ControlTimePanelRight.prototype.createEl = function () {
1097 | return videojs.Component.prototype.createEl.call(this, 'div', {
1098 | className: 'vjs-controltimepanel-right-RS',
1099 | innerHTML: 'End: ::'
1100 | });
1101 | };
1102 |
1103 | videojs.ControlTimePanelRight.prototype.onKeyDown = function (event) {
1104 | this.timeOld[0] = this.el_.children[0].value;
1105 | this.timeOld[1] = this.el_.children[1].value;
1106 | this.timeOld[2] = this.el_.children[2].value;
1107 | };
1108 |
1109 | videojs.ControlTimePanelRight.prototype.onKeyUp = function (event) {
1110 | this.rs._checkControlTime(1, this.el_.children, this.timeOld);
1111 | };
1112 | })();
1113 |
--------------------------------------------------------------------------------