├── 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 | Actions 88 |
Show/Hide RS
89 |
Lock/Unlock RS
90 |
show/hide Panel
91 |
show/hide ControlTime
92 |
93 | 94 |
95 | Select a section of the video 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 | --------------------------------------------------------------------------------