├── LICENSE ├── README.md ├── jquery.videocontrols.css ├── jquery.videocontrols.js ├── videocontrols444444.png └── videocontrols777777.png /LICENSE: -------------------------------------------------------------------------------- 1 | GNU GENERAL PUBLIC LICENSE 2 | Version 2, June 1991 3 | 4 | Copyright (C) 1989, 1991 Free Software Foundation, Inc., 5 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA 6 | Everyone is permitted to copy and distribute verbatim copies 7 | of this license document, but changing it is not allowed. 8 | 9 | Preamble 10 | 11 | The licenses for most software are designed to take away your 12 | freedom to share and change it. By contrast, the GNU General Public 13 | License is intended to guarantee your freedom to share and change free 14 | software--to make sure the software is free for all its users. This 15 | General Public License applies to most of the Free Software 16 | Foundation's software and to any other program whose authors commit to 17 | using it. (Some other Free Software Foundation software is covered by 18 | the GNU Lesser General Public License instead.) You can apply it to 19 | your programs, too. 20 | 21 | When we speak of free software, we are referring to freedom, not 22 | price. Our General Public Licenses are designed to make sure that you 23 | have the freedom to distribute copies of free software (and charge for 24 | this service if you wish), that you receive source code or can get it 25 | if you want it, that you can change the software or use pieces of it 26 | in new free programs; and that you know you can do these things. 27 | 28 | To protect your rights, we need to make restrictions that forbid 29 | anyone to deny you these rights or to ask you to surrender the rights. 30 | These restrictions translate to certain responsibilities for you if you 31 | distribute copies of the software, or if you modify it. 32 | 33 | For example, if you distribute copies of such a program, whether 34 | gratis or for a fee, you must give the recipients all the rights that 35 | you have. You must make sure that they, too, receive or can get the 36 | source code. And you must show them these terms so they know their 37 | rights. 38 | 39 | We protect your rights with two steps: (1) copyright the software, and 40 | (2) offer you this license which gives you legal permission to copy, 41 | distribute and/or modify the software. 42 | 43 | Also, for each author's protection and ours, we want to make certain 44 | that everyone understands that there is no warranty for this free 45 | software. If the software is modified by someone else and passed on, we 46 | want its recipients to know that what they have is not the original, so 47 | that any problems introduced by others will not reflect on the original 48 | authors' reputations. 49 | 50 | Finally, any free program is threatened constantly by software 51 | patents. We wish to avoid the danger that redistributors of a free 52 | program will individually obtain patent licenses, in effect making the 53 | program proprietary. To prevent this, we have made it clear that any 54 | patent must be licensed for everyone's free use or not licensed at all. 55 | 56 | The precise terms and conditions for copying, distribution and 57 | modification follow. 58 | 59 | GNU GENERAL PUBLIC LICENSE 60 | TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 61 | 62 | 0. This License applies to any program or other work which contains 63 | a notice placed by the copyright holder saying it may be distributed 64 | under the terms of this General Public License. The "Program", below, 65 | refers to any such program or work, and a "work based on the Program" 66 | means either the Program or any derivative work under copyright law: 67 | that is to say, a work containing the Program or a portion of it, 68 | either verbatim or with modifications and/or translated into another 69 | language. (Hereinafter, translation is included without limitation in 70 | the term "modification".) Each licensee is addressed as "you". 71 | 72 | Activities other than copying, distribution and modification are not 73 | covered by this License; they are outside its scope. The act of 74 | running the Program is not restricted, and the output from the Program 75 | is covered only if its contents constitute a work based on the 76 | Program (independent of having been made by running the Program). 77 | Whether that is true depends on what the Program does. 78 | 79 | 1. You may copy and distribute verbatim copies of the Program's 80 | source code as you receive it, in any medium, provided that you 81 | conspicuously and appropriately publish on each copy an appropriate 82 | copyright notice and disclaimer of warranty; keep intact all the 83 | notices that refer to this License and to the absence of any warranty; 84 | and give any other recipients of the Program a copy of this License 85 | along with the Program. 86 | 87 | You may charge a fee for the physical act of transferring a copy, and 88 | you may at your option offer warranty protection in exchange for a fee. 89 | 90 | 2. You may modify your copy or copies of the Program or any portion 91 | of it, thus forming a work based on the Program, and copy and 92 | distribute such modifications or work under the terms of Section 1 93 | above, provided that you also meet all of these conditions: 94 | 95 | a) You must cause the modified files to carry prominent notices 96 | stating that you changed the files and the date of any change. 97 | 98 | b) You must cause any work that you distribute or publish, that in 99 | whole or in part contains or is derived from the Program or any 100 | part thereof, to be licensed as a whole at no charge to all third 101 | parties under the terms of this License. 102 | 103 | c) If the modified program normally reads commands interactively 104 | when run, you must cause it, when started running for such 105 | interactive use in the most ordinary way, to print or display an 106 | announcement including an appropriate copyright notice and a 107 | notice that there is no warranty (or else, saying that you provide 108 | a warranty) and that users may redistribute the program under 109 | these conditions, and telling the user how to view a copy of this 110 | License. (Exception: if the Program itself is interactive but 111 | does not normally print such an announcement, your work based on 112 | the Program is not required to print an announcement.) 113 | 114 | These requirements apply to the modified work as a whole. If 115 | identifiable sections of that work are not derived from the Program, 116 | and can be reasonably considered independent and separate works in 117 | themselves, then this License, and its terms, do not apply to those 118 | sections when you distribute them as separate works. But when you 119 | distribute the same sections as part of a whole which is a work based 120 | on the Program, the distribution of the whole must be on the terms of 121 | this License, whose permissions for other licensees extend to the 122 | entire whole, and thus to each and every part regardless of who wrote it. 123 | 124 | Thus, it is not the intent of this section to claim rights or contest 125 | your rights to work written entirely by you; rather, the intent is to 126 | exercise the right to control the distribution of derivative or 127 | collective works based on the Program. 128 | 129 | In addition, mere aggregation of another work not based on the Program 130 | with the Program (or with a work based on the Program) on a volume of 131 | a storage or distribution medium does not bring the other work under 132 | the scope of this License. 133 | 134 | 3. You may copy and distribute the Program (or a work based on it, 135 | under Section 2) in object code or executable form under the terms of 136 | Sections 1 and 2 above provided that you also do one of the following: 137 | 138 | a) Accompany it with the complete corresponding machine-readable 139 | source code, which must be distributed under the terms of Sections 140 | 1 and 2 above on a medium customarily used for software interchange; or, 141 | 142 | b) Accompany it with a written offer, valid for at least three 143 | years, to give any third party, for a charge no more than your 144 | cost of physically performing source distribution, a complete 145 | machine-readable copy of the corresponding source code, to be 146 | distributed under the terms of Sections 1 and 2 above on a medium 147 | customarily used for software interchange; or, 148 | 149 | c) Accompany it with the information you received as to the offer 150 | to distribute corresponding source code. (This alternative is 151 | allowed only for noncommercial distribution and only if you 152 | received the program in object code or executable form with such 153 | an offer, in accord with Subsection b above.) 154 | 155 | The source code for a work means the preferred form of the work for 156 | making modifications to it. For an executable work, complete source 157 | code means all the source code for all modules it contains, plus any 158 | associated interface definition files, plus the scripts used to 159 | control compilation and installation of the executable. However, as a 160 | special exception, the source code distributed need not include 161 | anything that is normally distributed (in either source or binary 162 | form) with the major components (compiler, kernel, and so on) of the 163 | operating system on which the executable runs, unless that component 164 | itself accompanies the executable. 165 | 166 | If distribution of executable or object code is made by offering 167 | access to copy from a designated place, then offering equivalent 168 | access to copy the source code from the same place counts as 169 | distribution of the source code, even though third parties are not 170 | compelled to copy the source along with the object code. 171 | 172 | 4. You may not copy, modify, sublicense, or distribute the Program 173 | except as expressly provided under this License. Any attempt 174 | otherwise to copy, modify, sublicense or distribute the Program is 175 | void, and will automatically terminate your rights under this License. 176 | However, parties who have received copies, or rights, from you under 177 | this License will not have their licenses terminated so long as such 178 | parties remain in full compliance. 179 | 180 | 5. You are not required to accept this License, since you have not 181 | signed it. However, nothing else grants you permission to modify or 182 | distribute the Program or its derivative works. These actions are 183 | prohibited by law if you do not accept this License. Therefore, by 184 | modifying or distributing the Program (or any work based on the 185 | Program), you indicate your acceptance of this License to do so, and 186 | all its terms and conditions for copying, distributing or modifying 187 | the Program or works based on it. 188 | 189 | 6. Each time you redistribute the Program (or any work based on the 190 | Program), the recipient automatically receives a license from the 191 | original licensor to copy, distribute or modify the Program subject to 192 | these terms and conditions. You may not impose any further 193 | restrictions on the recipients' exercise of the rights granted herein. 194 | You are not responsible for enforcing compliance by third parties to 195 | this License. 196 | 197 | 7. If, as a consequence of a court judgment or allegation of patent 198 | infringement or for any other reason (not limited to patent issues), 199 | conditions are imposed on you (whether by court order, agreement or 200 | otherwise) that contradict the conditions of this License, they do not 201 | excuse you from the conditions of this License. If you cannot 202 | distribute so as to satisfy simultaneously your obligations under this 203 | License and any other pertinent obligations, then as a consequence you 204 | may not distribute the Program at all. For example, if a patent 205 | license would not permit royalty-free redistribution of the Program by 206 | all those who receive copies directly or indirectly through you, then 207 | the only way you could satisfy both it and this License would be to 208 | refrain entirely from distribution of the Program. 209 | 210 | If any portion of this section is held invalid or unenforceable under 211 | any particular circumstance, the balance of the section is intended to 212 | apply and the section as a whole is intended to apply in other 213 | circumstances. 214 | 215 | It is not the purpose of this section to induce you to infringe any 216 | patents or other property right claims or to contest validity of any 217 | such claims; this section has the sole purpose of protecting the 218 | integrity of the free software distribution system, which is 219 | implemented by public license practices. Many people have made 220 | generous contributions to the wide range of software distributed 221 | through that system in reliance on consistent application of that 222 | system; it is up to the author/donor to decide if he or she is willing 223 | to distribute software through any other system and a licensee cannot 224 | impose that choice. 225 | 226 | This section is intended to make thoroughly clear what is believed to 227 | be a consequence of the rest of this License. 228 | 229 | 8. If the distribution and/or use of the Program is restricted in 230 | certain countries either by patents or by copyrighted interfaces, the 231 | original copyright holder who places the Program under this License 232 | may add an explicit geographical distribution limitation excluding 233 | those countries, so that distribution is permitted only in or among 234 | countries not thus excluded. In such case, this License incorporates 235 | the limitation as if written in the body of this License. 236 | 237 | 9. The Free Software Foundation may publish revised and/or new versions 238 | of the General Public License from time to time. Such new versions will 239 | be similar in spirit to the present version, but may differ in detail to 240 | address new problems or concerns. 241 | 242 | Each version is given a distinguishing version number. If the Program 243 | specifies a version number of this License which applies to it and "any 244 | later version", you have the option of following the terms and conditions 245 | either of that version or of any later version published by the Free 246 | Software Foundation. If the Program does not specify a version number of 247 | this License, you may choose any version ever published by the Free Software 248 | Foundation. 249 | 250 | 10. If you wish to incorporate parts of the Program into other free 251 | programs whose distribution conditions are different, write to the author 252 | to ask for permission. For software which is copyrighted by the Free 253 | Software Foundation, write to the Free Software Foundation; we sometimes 254 | make exceptions for this. Our decision will be guided by the two goals 255 | of preserving the free status of all derivatives of our free software and 256 | of promoting the sharing and reuse of software generally. 257 | 258 | NO WARRANTY 259 | 260 | 11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY 261 | FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN 262 | OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES 263 | PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED 264 | OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF 265 | MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS 266 | TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE 267 | PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, 268 | REPAIR OR CORRECTION. 269 | 270 | 12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING 271 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR 272 | REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, 273 | INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING 274 | OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED 275 | TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY 276 | YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER 277 | PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE 278 | POSSIBILITY OF SUCH DAMAGES. 279 | 280 | END OF TERMS AND CONDITIONS 281 | 282 | How to Apply These Terms to Your New Programs 283 | 284 | If you develop a new program, and you want it to be of the greatest 285 | possible use to the public, the best way to achieve this is to make it 286 | free software which everyone can redistribute and change under these terms. 287 | 288 | To do so, attach the following notices to the program. It is safest 289 | to attach them to the start of each source file to most effectively 290 | convey the exclusion of warranty; and each file should have at least 291 | the "copyright" line and a pointer to where the full notice is found. 292 | 293 | {description} 294 | Copyright (C) {year} {fullname} 295 | 296 | This program is free software; you can redistribute it and/or modify 297 | it under the terms of the GNU General Public License as published by 298 | the Free Software Foundation; either version 2 of the License, or 299 | (at your option) any later version. 300 | 301 | This program is distributed in the hope that it will be useful, 302 | but WITHOUT ANY WARRANTY; without even the implied warranty of 303 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 304 | GNU General Public License for more details. 305 | 306 | You should have received a copy of the GNU General Public License along 307 | with this program; if not, write to the Free Software Foundation, Inc., 308 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA. 309 | 310 | Also add information on how to contact you by electronic and paper mail. 311 | 312 | If the program is interactive, make it output a short notice like this 313 | when it starts in an interactive mode: 314 | 315 | Gnomovision version 69, Copyright (C) year name of author 316 | Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'. 317 | This is free software, and you are welcome to redistribute it 318 | under certain conditions; type `show c' for details. 319 | 320 | The hypothetical commands `show w' and `show c' should show the appropriate 321 | parts of the General Public License. Of course, the commands you use may 322 | be called something other than `show w' and `show c'; they could even be 323 | mouse-clicks or menu items--whatever suits your program. 324 | 325 | You should also get your employer (if you work as a programmer) or your 326 | school, if any, to sign a "copyright disclaimer" for the program, if 327 | necessary. Here is a sample; alter the names: 328 | 329 | Yoyodyne, Inc., hereby disclaims all copyright interest in the program 330 | `Gnomovision' (which makes passes at compilers) written by James Hacker. 331 | 332 | {signature of Ty Coon}, 1 April 1989 333 | Ty Coon, President of Vice 334 | 335 | This General Public License does not permit incorporating your program into 336 | proprietary programs. If your program is a subroutine library, you may 337 | consider it more useful to permit linking proprietary applications with the 338 | library. If this is what you want to do, use the GNU Lesser General 339 | Public License instead of this License. 340 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | HTML5 Video Player like YouTube in jQuery plugin 2 | ===== 3 | 4 | *VideoControls* is a open source free plugin made in jQuery for display a YouTube-Like control bar. Based on the new HTML5 tag <video>, *VideoControls* is cross platform, simple and free to use. 5 | 6 | 7 | Read more : [HTML5 Video Player like YouTube in jQuery plugin](http://blog.pornzrus.com/2014-01-25-HTML5-Video-Player-like-YouTube-in-jQuery-plugin) 8 | -------------------------------------------------------------------------------- /jquery.videocontrols.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * VideoControls v1.6.2 3 | * 4 | * Copyright 2015 pornR us 5 | * Released under the GPLv2 license 6 | * http://blog.pornzrus.com/2014-01-25-HTML5-Video-Player-like-YouTube-in-jQuery-plugin 7 | */ 8 | 9 | [class*="vc-icon-"] 10 | { 11 | display: inline-block; 12 | width: 20px; 13 | height: 20px; 14 | background-image: url(videocontrols444444.png); 15 | background-repeat: no-repeat; 16 | } 17 | 18 | [class*="vc-icon-"]:hover 19 | { 20 | background-image: url(videocontrols777777.png); 21 | } 22 | 23 | .vc-icon-play 24 | { 25 | background-position: 0 0; 26 | } 27 | 28 | .vc-icon-pause 29 | { 30 | background-position: -30px 0; 31 | } 32 | 33 | .vc-icon-stop 34 | { 35 | background-position: -60px 0; 36 | } 37 | 38 | .vc-icon-volume 39 | { 40 | margin : 0 0 0 10px !important; 41 | } 42 | 43 | .vc-icon-volume-high 44 | { 45 | background-position: -90px 0; 46 | } 47 | 48 | .vc-icon-volume-medium 49 | { 50 | background-position: -121px 0; 51 | } 52 | 53 | .vc-icon-volume-low 54 | { 55 | background-position: -151px 0; 56 | } 57 | 58 | .vc-icon-volume-mute 59 | { 60 | background-position: -181px 0; 61 | } 62 | 63 | .vc-icon-volume-mute2 64 | { 65 | background-position: -211px 0; 66 | } 67 | 68 | .vc-icon-expand 69 | { 70 | background-position: -241px 0; 71 | } 72 | 73 | .vc-icon-contract 74 | { 75 | background-position: -271px 0; 76 | } 77 | 78 | .vc-icon-expand2 79 | { 80 | background-position: -301px 0; 81 | } 82 | 83 | .vc-icon-contract2 84 | { 85 | background-position: -331px 0; 86 | } 87 | 88 | .vc-icon-expand3 89 | { 90 | background-position: -361px 0; 91 | } 92 | 93 | .vc-icon-contract3 94 | { 95 | background-position: -391px 0; 96 | } 97 | 98 | .vc-giant-icon 99 | { 100 | width: 100px; 101 | height: 100px; 102 | position: absolute; 103 | left: 50%; 104 | margin-left: -50px; 105 | top: 50%; 106 | margin-top: -50px; 107 | } 108 | 109 | .vc-icon-big-play 110 | { 111 | background-position: 0 -20px; 112 | } 113 | 114 | .vc-icon-big-pause 115 | { 116 | background-position: -100px -20px; 117 | } 118 | 119 | .videocontrols-giant-icon 120 | { 121 | background : rgba(0,0,0,0.7); 122 | width: calc(100% + 1px); 123 | height : calc(100% - 26px); 124 | position : absolute; 125 | top : 0; 126 | left : 0; 127 | z-index : 0; 128 | } 129 | 130 | .player-fullscreen 131 | { 132 | width: 100% !important; 133 | height: 100% !important; 134 | border: 0 !important; 135 | background: #000000 !important; 136 | overflow: hidden !important; 137 | } 138 | 139 | .player-fullscreen > video 140 | { 141 | width: 100% !important; 142 | height: 100% !important; 143 | z-index: 1000; 144 | } 145 | 146 | .player-fullscreen > .videocontrols 147 | { 148 | position: fixed !important; 149 | left: 0 !important; 150 | bottom: 0 !important; 151 | width: 100% !important; 152 | z-index: 1001; 153 | } 154 | 155 | .player-fullscreen:not(.hover) > .videocontrols 156 | { 157 | bottom: -30px !important; 158 | } 159 | 160 | .player-fillscreen > video 161 | { 162 | width: 100% !important; 163 | height: 100% !important; 164 | } 165 | 166 | .player-mediumscreen 167 | { 168 | width: 1066px !important; 169 | margin: 0 auto !important; 170 | position: relative !important; 171 | line-height: 0 !important; 172 | border: 2px solid #000000 !important; 173 | background: black !important; 174 | text-align: center !important; 175 | } 176 | 177 | .player-mediumscreen > video 178 | { 179 | width: 100% !important; 180 | height: 100% !important; 181 | } 182 | 183 | .vc-player 184 | { 185 | border: 2px solid #000000; 186 | text-align: center; 187 | position: relative; 188 | line-height : 0; 189 | z-index: 1; 190 | } 191 | 192 | .videocontrols 193 | { 194 | font-family: 'Handlee', cursive; 195 | font-weight : bold; 196 | font-size : 10px; 197 | color: #777777; 198 | width: 100%; 199 | height: 28px; 200 | z-index: 1; 201 | 202 | position : relative; 203 | background-color : #1B1B1B; 204 | 205 | -moz-user-select: none; 206 | -khtml-user-select: none; 207 | -webkit-user-select: none; 208 | -o-user-select: none; 209 | } 210 | 211 | .videocontrols-seeker 212 | { 213 | width: 100%; 214 | position : absolute; 215 | top : 0; 216 | left : 0; 217 | background-color : #444444; 218 | height : 3px; 219 | margin: 0; 220 | cursor : pointer; 221 | display: inline-block; 222 | 223 | -o-transition-property: height 0.25s linear, top 0.25s linear; 224 | -ms-transition-property: height 0.25s linear, top 0.25s linear; 225 | -moz-transition-property: height 0.25s linear, top 0.25s linear; 226 | -webkit-transition-property: height 0.25s linear, top 0.25s linear; 227 | transition: height 0.25s linear, top 0.25s linear; 228 | } 229 | 230 | .vc-player.hover > .videocontrols > .videocontrols-seeker 231 | { 232 | top : -5px; 233 | background-color : #444444; 234 | height : 8px; 235 | } 236 | 237 | .vc-player > .videocontrols > .videocontrols-seeker > .light 238 | { 239 | box-shadow: 0 0 8px 2px #e5e5e5 !important; 240 | } 241 | 242 | .vc-player > .videocontrols > .videocontrols-seeker > .videocontrols-preview >.light 243 | { 244 | box-shadow: 0 0 8px 2px #e5e5e5 !important; 245 | } 246 | /************************************************************/ 247 | 248 | .videocontrols-tag 249 | { 250 | height : 0; 251 | 252 | -o-transition-property: height 0.2s linear; 253 | -ms-transition-property: height 0.2s linear; 254 | -moz-transition-property: height 0.2s linear; 255 | -webkit-transition-property: height 0.2s linear; 256 | transition: height 0.2s linear; 257 | } 258 | 259 | .vc-player.hover > .videocontrols > .videocontrols-seeker > .videocontrols-tag 260 | { 261 | height : 8px; 262 | width : 4px; 263 | background-color : #1b1b1b; 264 | z-index: 100; 265 | 266 | position : absolute; 267 | bottom : 0; 268 | margin-left : -2px; 269 | } 270 | 271 | .vc-player > .videocontrols > .videocontrols-seeker > .videocontrols-preview 272 | { 273 | position : absolute; 274 | bottom : 8px; 275 | text-align : center; 276 | z-index : 100; 277 | cursor : auto; 278 | } 279 | 280 | .vc-player > .videocontrols > .videocontrols-seeker > .videocontrols-preview > .videocontrols-preview-img 281 | { 282 | border : 3px solid #1b1b1b; 283 | } 284 | 285 | .videocontrols-img 286 | { 287 | display : none; 288 | } 289 | 290 | .vc-player > .videocontrols > .videocontrols-seeker > .videocontrols-preview > .videocontrols-preview-connection 291 | { 292 | width: 0; 293 | height: 0; 294 | border-left: 5px solid transparent; 295 | border-right: 5px solid transparent; 296 | border-top: 5px solid #1b1b1b; 297 | } 298 | 299 | .vc-player > .videocontrols > .videocontrols-seeker > .videocontrols-preview > .videocontrols-preview-img >.videocontrols-img 300 | { 301 | display : block; 302 | border : 0; 303 | } 304 | 305 | .vc-player > .videocontrols > .videocontrols-seeker > .videocontrols-preview > .videocontrols-preview-img > .videocontrols-previewtime 306 | { 307 | font-family: 'Handlee', cursive; 308 | font-size : 11px; 309 | color : #e5e5e5; 310 | padding : 10px 2px 0 2px; 311 | background : rgba(0,0,0,0.6); 312 | min-width : 31px; 313 | height : 10px; 314 | text-align : right; 315 | position : absolute; 316 | bottom : 10px; 317 | right : 5px; 318 | } 319 | 320 | .videocontrols-range 321 | { 322 | height : 0; 323 | width : 0; 324 | margin: 0; 325 | line-height : 0; 326 | text-align: center; 327 | 328 | -o-transition-property: height 0.25s linear, width 0.25s linear, margin 0.25s linear, line-height 0.25s linear; 329 | -ms-transition-property: height 0.25s linear, width 0.25s linear, margin 0.25s linear, line-height 0.25s linear; 330 | -moz-transition-property: height 0.25s linear, width 0.25s linear, margin 0.25s linear, line-height 0.25s linear; 331 | -webkit-transition-property: height 0.25s linear, width 0.25s linear, margin 0.25s linear, line-height 0.25s linear; 332 | transition: height 0.25s linear, width 0.25s linear, margin 0.25s linear, line-height 0.25s linear; 333 | } 334 | 335 | .vc-player.hover > .videocontrols > .videocontrols-seeker > .videocontrols-range 336 | { 337 | height : 16px; 338 | width : 16px; 339 | line-height : 16px; 340 | border-radius : 8px; 341 | background-color : #eaeaea; 342 | margin: -4px 0 0 -8px; 343 | } 344 | 345 | .videocontrols-range-little 346 | { 347 | height : 0; 348 | width : 0; 349 | opacity : 0; 350 | 351 | display : inline-block; 352 | vertical-align : middle; 353 | 354 | -o-transition-property: height 0.25s linear, width 0.25s linear, opacity 0s linear 0.2s; 355 | -ms-transition-property: height 0.25s linear, width 0.25s linear, opacity 0s linear 0.2s; 356 | -moz-transition-property: height 0.25s linear, width 0.25s linear, opacity 0s linear 0.2s; 357 | -webkit-transition-property: height 0.25s linear, width 0.25s linear, opacity 0s linear 0.2s; 358 | transition: height 0.25s linear, width 0.25s linear, opacity 0s linear 0.2s; 359 | } 360 | 361 | .vc-player.hover > .videocontrols > .videocontrols-seeker > .videocontrols-range > .videocontrols-range-little 362 | { 363 | height : 4px; 364 | width : 4px; 365 | opacity : 1; 366 | border-radius : 2px; 367 | background-color : #777777; 368 | } 369 | 370 | .vc-player.hover > .videocontrols > .videocontrols-seeker > .videocontrols-range:hover > .range-little-blue 371 | { 372 | background-color: #1562ba; 373 | } 374 | 375 | .vc-player.hover > .videocontrols > .videocontrols-seeker > .videocontrols-range:hover > .range-little-pink 376 | { 377 | background-color: #af2c6b; 378 | } 379 | 380 | .videocontrols-loadingbar 381 | { 382 | width: 0%; 383 | height : 100%; 384 | background-color : #777777; 385 | display: inline-block; 386 | position : absolute; 387 | top : 0; 388 | left : 0; 389 | } 390 | 391 | .videocontrols-progressbar 392 | { 393 | width: 0; 394 | height : 100%; 395 | background-color : red; 396 | display: inline-block; 397 | position : absolute; 398 | top : 0; 399 | left : 0; 400 | 401 | -webkit-background-size: 30px 30px !important; 402 | -moz-background-size: 30px 30px !important; 403 | background-size: 30px 30px !important; 404 | } 405 | 406 | .progressbar-color-blue 407 | { 408 | background-color: #1562ba; 409 | } 410 | 411 | .progressbar-color-pink 412 | { 413 | background-color: #af2c6b; 414 | } 415 | 416 | .videocontrols-seekbar 417 | { 418 | position : absolute; 419 | left : 0; 420 | z-index: 999; 421 | } 422 | 423 | .videocontrols-btn 424 | { 425 | height : 100%; 426 | line-height: 30px; 427 | margin : 0 5px; 428 | text-align: left; 429 | } 430 | 431 | .videocontrols-button 432 | { 433 | vertical-align: middle; 434 | background-color: transparent; 435 | color: white; 436 | padding : 0; 437 | margin : 0 10px; 438 | cursor : pointer; 439 | } 440 | 441 | .videocontrols-play 442 | { 443 | width: 20px; 444 | border: none; 445 | } 446 | 447 | .videocontrols-time 448 | { 449 | display: inline-block; 450 | vertical-align: middle; 451 | font-weight : bold; 452 | padding: 2px 0 0 0; 453 | } 454 | 455 | .videocontrols-timer 456 | { 457 | display: inline-block; 458 | min-width: 35px; 459 | color: #eaeaea; 460 | } 461 | 462 | .videocontrols-totaltime 463 | { 464 | display: inline-block; 465 | min-width: 45px; 466 | color: #777777; 467 | } 468 | 469 | .videocontrols-right 470 | { 471 | display: inline-block; 472 | height : 100%; 473 | float : right; 474 | } 475 | 476 | .videocontrols-weight-volume 477 | { 478 | width: 50px; 479 | height: 20px; 480 | line-height: 20px; 481 | margin: 0 20px 0 0; 482 | padding : 0 10px; 483 | cursor: pointer; 484 | display: inline-block; 485 | vertical-align: middle; 486 | text-align : center; 487 | } 488 | 489 | .videocontrols-volume 490 | { 491 | position: relative; 492 | width: 100%; 493 | height : 3px; 494 | background-color : #777777; 495 | z-index: 0; 496 | display: inline-block; 497 | } 498 | 499 | .videocontrols-weight-volume > .videocontrols-volume > .videocontrols-volume-progressbar 500 | { 501 | width: 65%; 502 | } 503 | 504 | .videocontrols-volume-progressbar 505 | { 506 | height : 3px; 507 | background-color : red; 508 | 509 | -webkit-background-size: 15px 15px !important; 510 | -moz-background-size: 15px 15px !important; 511 | background-size: 15px 15px !important; 512 | } 513 | 514 | .volumebar-color-blue 515 | { 516 | background-color : #1562ba; 517 | } 518 | 519 | .volumebar-color-pink 520 | { 521 | background-color : #af2c6b; 522 | } 523 | 524 | .videocontrols-volumebar 525 | { 526 | position : absolute; 527 | left : 65%; 528 | } 529 | 530 | .videocontrols-volume-range 531 | { 532 | height : 14px; 533 | width : 5px; 534 | background-color : #eaeaea; 535 | margin: -8px 0 0 -2.5px; 536 | } 537 | 538 | .videocontrols-fillscreen 539 | { 540 | margin: 0; 541 | } 542 | 543 | .videocontrols-mediumscreen 544 | { 545 | margin: 0 0 0 10px; 546 | } 547 | -------------------------------------------------------------------------------- /jquery.videocontrols.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * VideoControls v1.6.2 3 | * 4 | * Copyright 2014 pornR us 5 | * Released under the GPLv2 license 6 | * http://blog.pornzrus.com/2014-01-25-HTML5-Video-Player-like-YouTube-in-jQuery-plugin 7 | */ 8 | 9 | (function($) 10 | { 11 | $.fn.videocontrols = function(options) 12 | { 13 | var defaults = { 14 | markers: [], // [0, 23, 45], 15 | preview: { 16 | /* 17 | sprites: ['sprites1.jpg', 'sprites2.jpg'], 18 | step: 10, 19 | height: 112, 20 | width: 200, 21 | wide: 60000 22 | */ 23 | }, 24 | theme: { 25 | progressbar: 'blue', 26 | range: 'pink', 27 | volume: 'pink' 28 | }, 29 | fillscreen: true, 30 | fullscreen: true, 31 | mediumscreen: true, 32 | seek: true, 33 | time: true, 34 | volume: true, 35 | durationchange: null, 36 | end: null, 37 | fillscreenchange: null, 38 | fullscreenchange: null, 39 | load: null, 40 | mediumscreenchange: null, 41 | pause: null, 42 | play: null, 43 | seekchange: null, 44 | volumechange: null 45 | }; 46 | options = $.extend(defaults, options); 47 | 48 | var isTouch = 'ontouchstart' in window || 'onmsgesturechange' in window; 49 | var loaded = false; 50 | var $video = $(this); 51 | var $video_parent = null; 52 | var volume = 0.75; 53 | var buffered = 0; 54 | var lastX = 0; 55 | var lastMove = 0; 56 | var timerHover = null; 57 | var fillscreen = false; 58 | var mediumscreen = false; 59 | var exitFullscreen = false; 60 | 61 | if (localStorageGetItem('videocontrols-muted') === null) { 62 | localStorageSetItem('videocontrols-muted', '0'); 63 | } 64 | $video[0].muted = localStorageGetItem('videocontrols-muted') == '1' ? true : false; 65 | 66 | if (localStorageGetItem('videocontrols-volume') === null) { 67 | localStorageSetItem('videocontrols-volume', volume); 68 | } 69 | volume = localStorageGetItem('videocontrols-volume', volume); 70 | $video[0].volume = volume; 71 | 72 | this.fillscreenToggle = function() 73 | { 74 | $video_parent.find('.videocontrols-fillscreen').trigger('click'); 75 | }; 76 | 77 | this.fullscreenToggle = function() 78 | { 79 | $video_parent.find('.videocontrols-fullscreen').trigger('click'); 80 | }; 81 | 82 | this.mediumscreenToggle = function() 83 | { 84 | $video_parent.find('.videocontrols-mediumscreen').trigger('click'); 85 | }; 86 | 87 | this.playToggle = function() 88 | { 89 | $video_parent.find('.videocontrols-play').trigger('click'); 90 | }; 91 | 92 | this.preview_marker = function(seconds) 93 | { 94 | $video_parent.find('.videocontrols-preview').remove(); 95 | 96 | $video_parent.parent().find('.vc-player').addClass('hover'); 97 | $video_parent.find('.videocontrols-tag[tag="' + seconds + '"]').addClass('light'); 98 | 99 | if (!$.isEmptyObject(options.preview) && $video_parent.find('.videocontrols-tag[tag="' + seconds + '"]').length > 0) { 100 | displayPreview($video_parent.find('.videocontrols-tag[tag="' + seconds + '"]').offset().left); 101 | } 102 | 103 | $video_parent.find('.videocontrols-preview-img').addClass('light'); 104 | }; 105 | 106 | this.previews_marker_hide = function() 107 | { 108 | $video_parent.find('.videocontrols-tag').removeClass('light'); 109 | $video_parent.parent().find('.vc-player').removeClass('hover'); 110 | $video_parent.find('.videocontrols-preview').remove(); 111 | }; 112 | 113 | return this.each(function () 114 | { 115 | if (isTouch) { 116 | return false; 117 | } 118 | 119 | function load() 120 | { 121 | if (options.preview.sprites.length > 0) { 122 | var img = new Image() 123 | img.onload = function () 124 | { 125 | if (!options.preview.height) { 126 | options.preview.height = parseInt(this.height); 127 | } 128 | if (!options.preview.wide) { 129 | options.preview.wide = parseInt(this.width); 130 | } 131 | } 132 | img.src = options.preview.sprites[0]; 133 | } 134 | 135 | $video_parent.find('.videocontrols-tag').remove(); 136 | for (var i = 0; i < options.markers.length; i++) { 137 | var pourcent = options.markers[i] * 100 / $video[0].duration; 138 | $video_parent.find('.videocontrols-seeker').append('
'); 139 | } 140 | 141 | if (options.load) { 142 | options.load($(this)); 143 | } 144 | 145 | if ($video.attr('autoplay')) { 146 | $video_parent.find('.videocontrols-play').trigger('click'); 147 | } 148 | } 149 | 150 | $video.wrap('
'); 151 | $video_parent = $(this).parent(); 152 | 153 | var html = '
'; 154 | if (defaults.seek) { 155 | html += '
' + 156 | '
' + 157 | '
' + 158 | '
' + 159 | '
' + 160 | '
' + 161 | '
'; 162 | } 163 | html += '
' + 164 | '
'; 165 | if (defaults.time) { 166 | html += '
' + 167 | ' 00:00 / 00:00' + 168 | '
'; 169 | } 170 | html += '
'; 171 | if (defaults.volume) { 172 | html += '
' + 173 | '
' + 174 | '
' + 175 | '
' + 176 | '
' + 177 | '
' + 178 | '
'; 179 | } 180 | if (defaults.fillscreen) { 181 | html += '
'; 182 | } 183 | if (defaults.mediumscreen) { 184 | html += '
'; 185 | } 186 | if (defaults.fullscreen) { 187 | html += '
'; 188 | } 189 | html += '
' + 190 | '
' + 191 | '
' + 192 | '
' + 193 | '
' + 194 | ' ' + 195 | '
'; 196 | $video.after(html); 197 | 198 | $video_parent.parent().find('.vc-player').on('mouseenter touchstart', function () 199 | { 200 | clearTimeout(timerHover); 201 | 202 | $(this).addClass('hover'); 203 | }); 204 | $video_parent.parent().find('.vc-player').on('mouseleave touchend', function () 205 | { 206 | clearTimeout(timerHover); 207 | 208 | timerHover = setTimeout(function () 209 | { 210 | $video_parent.parent().find('.vc-player').removeClass('hover'); 211 | }, 2000); 212 | }); 213 | 214 | $video.on('durationchange', function () 215 | { 216 | if (!loaded) { 217 | loaded = true; 218 | load(); 219 | } 220 | $video_parent.find('.videocontrols-totaltime').html(' / ' + secondsToTime($video[0].duration)); 221 | 222 | if (options.durationchange) { 223 | options.durationchange($(this)); 224 | } 225 | }); 226 | 227 | $video.on('progress canplaythrough loadedmetadata loadeddata', function (e) 228 | { 229 | if (!$video.attr('height') && this.videoHeight > 0) { 230 | $video.attr('height', this.videoHeight); 231 | } 232 | if (!$video.attr('width') && this.videoWidth > 0) { 233 | $video.attr('width', this.videoWidth); 234 | } 235 | 236 | if ($video[0].buffered && $video[0].buffered.length > 0) { 237 | for (var i = 0; i < $video[0].buffered.length; i++) { 238 | var buffer = $video[0].buffered.end(i); 239 | if (buffer > buffered) { 240 | buffered = buffer; 241 | var pourcent = buffer / $video[0].duration * 100; 242 | $video_parent.find('.videocontrols-loadingbar').css('width', pourcent + '%'); 243 | } 244 | } 245 | } 246 | }); 247 | 248 | $video.on('click', function () 249 | { 250 | $video_parent.find('.videocontrols-play').trigger('click'); 251 | }); 252 | 253 | $video.on('playing', function () 254 | { 255 | $video_parent.find('.videocontrols-play').removeClass('vc-icon-play').addClass('vc-icon-pause'); 256 | }); 257 | 258 | $video.on('timeupdate', timeupdate); 259 | 260 | function timeupdate() 261 | { 262 | var pourcent = $video[0].currentTime * 100 / $video[0].duration; 263 | $video_parent.find('.videocontrols-progressbar').css('width', pourcent + '%'); 264 | $video_parent.find('.videocontrols-seekbar').css('left', pourcent + '%'); 265 | $video_parent.find('.videocontrols-timer').html(secondsToTime($video[0].currentTime)); 266 | } 267 | 268 | $video.on('ended', function () 269 | { 270 | $video[0].currentTime = 0; 271 | $video[0].pause(); 272 | 273 | if (options.end) { 274 | options.end($(this)); 275 | } 276 | }); 277 | 278 | $video_parent.find('.videocontrols-giant-icon').on('click', function (e) 279 | { 280 | $video_parent.find('.videocontrols-play').trigger('click'); 281 | }); 282 | 283 | $video_parent.find('.videocontrols-play').on('click', function (e) 284 | { 285 | e.preventDefault(); 286 | 287 | if (!$video[0].paused) { 288 | $video_parent.find('.videocontrols-giant-icon').show(); 289 | $video_parent.find('.videocontrols-big-pause').show(); 290 | $video_parent.find('.videocontrols-play').removeClass('vc-icon-pause').addClass('vc-icon-play'); 291 | $video[0].pause(); 292 | 293 | if (options.pause) { 294 | options.pause($(this)); 295 | } 296 | } 297 | else 298 | { 299 | $video_parent.find('.videocontrols-big-play, .videocontrols-big-pause').hide(); 300 | $video_parent.find('.videocontrols-giant-icon').hide(); 301 | $video[0].play(); 302 | 303 | if (options.play) { 304 | options.play($(this)); 305 | } 306 | } 307 | }); 308 | 309 | $video_parent.find('.videocontrols-seeker').on('mousemove touchmove', function (e) 310 | { 311 | if (!$.isEmptyObject(options.preview)) { 312 | e.preventDefault(); 313 | e.stopPropagation(); 314 | 315 | var clientX = getClientX(e); 316 | if (Math.abs(lastX - clientX) > 3) { 317 | lastX = clientX; 318 | 319 | if ($video_parent.find('.videocontrols-preview').length === 0) 320 | { 321 | $(document).on('mousemove touchmove', seeker_move); 322 | } 323 | displayPreview(clientX); 324 | } 325 | } 326 | }); 327 | 328 | function seeker_move(e) 329 | { 330 | if ($video_parent.find('.videocontrols-seeker').length > 0 && $video_parent.find('.videocontrols-preview').length > 0) { 331 | var minX = Math.min($video_parent.find('.videocontrols-seeker').offset().left, $video_parent.find('.videocontrols-preview').offset().left); 332 | var minY = Math.min($video_parent.find('.videocontrols-preview').offset().top, $video_parent.find('.videocontrols-seeker').offset().top); 333 | var maxX = Math.max($video_parent.find('.videocontrols-seeker').offset().left + $video_parent.find('.videocontrols-seeker').width(), $video_parent.find('.videocontrols-preview').offset().left + $video_parent.find('.videocontrols-preview').width()); 334 | var maxY = $video_parent.find('.videocontrols-seeker').offset().top + $video_parent.find('.videocontrols-seeker').height(); 335 | if (e.pageX < minX || e.pageX > maxX || e.pageY < minY || e.pageY > maxY) { 336 | $(document).off('mousemove touchmove', seeker_move); 337 | 338 | $video_parent.find('.videocontrols-preview').remove(); 339 | } 340 | 341 | if (options.seekchange) { 342 | options.seekchange($(this)); 343 | } 344 | } 345 | } 346 | 347 | $video_parent.find('.videocontrols-seeker').on('click', function (e) 348 | { 349 | e.preventDefault(); 350 | e.stopPropagation(); 351 | 352 | var clientX = getClientX(e); 353 | 354 | var left = clientX - $video_parent.find('.videocontrols-seeker').offset().left; 355 | left = Math.max(0, left); 356 | left = Math.min($video_parent.find('.videocontrols-seeker').width(), left); 357 | $video.off('timeupdate', timeupdate); 358 | $video_parent.find('.videocontrols-seekbar').animate({ left: left }, 150, 'linear', function () 359 | { 360 | seekbar_up(clientX); 361 | }); 362 | }); 363 | 364 | $video_parent.find('.videocontrols-seekbar').on('mousedown touchstart', function (e) 365 | { 366 | e.preventDefault(); 367 | 368 | $(document).one('mouseup touchend', seekbar_up); 369 | 370 | $video.off('timeupdate', timeupdate); 371 | $(document).on('mousemove touchmove', seekbar_move); 372 | }); 373 | 374 | function seekbar_move(e) 375 | { 376 | e.preventDefault(); 377 | e.stopPropagation(); 378 | 379 | var clientX = getClientX(e); 380 | 381 | var left = clientX - $video_parent.find('.videocontrols-seeker').offset().left; 382 | left = Math.max(0, left); 383 | left = Math.min($video_parent.find('.videocontrols-seeker').width(), left); 384 | $video_parent.find('.videocontrols-seekbar').css('left', left); 385 | } 386 | 387 | function seekbar_up(e) 388 | { 389 | if (!$.isNumeric(e)) { 390 | e.preventDefault(); 391 | e.stopPropagation(); 392 | } 393 | 394 | var clientX = getClientX(e); 395 | 396 | $(document).off('mousemove touchmove', seekbar_move); 397 | $video[0].currentTime = (clientX - $video_parent.find('.videocontrols-seeker').offset().left) / $video_parent.find('.videocontrols-seeker').width() * $video[0].duration; 398 | $video.on('timeupdate', timeupdate); 399 | $video_parent.find('.videocontrols-preview').remove(); 400 | } 401 | 402 | $video.on('volumechange', volumechange); 403 | 404 | function volumechange() 405 | { 406 | var pourcent = $video[0].volume * 100; 407 | $video_parent.find('.videocontrols-volume-progressbar').css('width', pourcent + '%'); 408 | $video_parent.find('.videocontrols-volumebar').css('left', pourcent + '%'); 409 | 410 | $video_parent.find('.videocontrols-mute').removeClass('vc-icon-volume-high vc-icon-volume-medium vc-icon-volume-low vc-icon-volume-mute2 vc-icon-volume-mute'); 411 | if ($video[0].muted) { 412 | $video_parent.find('.videocontrols-mute').addClass('vc-icon-volume-mute2'); 413 | } 414 | else if (pourcent > 75) { 415 | $video_parent.find('.videocontrols-mute').addClass('vc-icon-volume-high'); 416 | } 417 | else if (pourcent > 50) { 418 | $video_parent.find('.videocontrols-mute').addClass('vc-icon-volume-medium'); 419 | } 420 | else if (pourcent > 15) { 421 | $video_parent.find('.videocontrols-mute').addClass('vc-icon-volume-low'); 422 | } 423 | else { 424 | $video_parent.find('.videocontrols-mute').addClass('vc-icon-volume-mute'); 425 | } 426 | } 427 | 428 | $video_parent.find('.videocontrols-mute').on('click', function (e) 429 | { 430 | e.preventDefault(); 431 | 432 | if (!$video[0].muted) { 433 | $video[0].muted = true; 434 | localStorageSetItem('videocontrols-muted', '1'); 435 | } 436 | else { 437 | $video[0].muted = false; 438 | localStorageSetItem('videocontrols-muted', '0'); 439 | } 440 | }); 441 | 442 | $video_parent.find('.videocontrols-weight-volume').on('click', function (e) 443 | { 444 | volume_move(e); 445 | }); 446 | 447 | $video_parent.find('.videocontrols-volumebar').on('mousedown touchstart', function (e) 448 | { 449 | e.preventDefault(); 450 | 451 | $(document).one('mouseup touchend', volume_up); 452 | $(document).on('mousemove touchmove', volume_move); 453 | }); 454 | 455 | function volume_move(e) 456 | { 457 | e.preventDefault(); 458 | e.stopPropagation(); 459 | 460 | var clientX = getClientX(e); 461 | 462 | volume = (clientX - $video_parent.find('.videocontrols-volume').offset().left) / $video_parent.find('.videocontrols-volume').width(); 463 | volume = Math.max(0, volume); 464 | volume = Math.min(1, volume); 465 | $video[0].muted = false; 466 | $video[0].volume = volume; 467 | 468 | localStorageSetItem('videocontrols-muted', '0'); 469 | localStorageSetItem('videocontrols-volume', volume); 470 | } 471 | 472 | function volume_up(e) 473 | { 474 | $(document).off('mousemove touchmove', volume_move); 475 | 476 | if (options.volumechange) { 477 | options.volumechange($(this)); 478 | } 479 | } 480 | 481 | $video_parent.find('.videocontrols-fillscreen').on('click', function (e) 482 | { 483 | e.preventDefault(); 484 | 485 | if (!fillscreen) { 486 | fillscreen = true; 487 | 488 | $video_parent.addClass('player-fillscreen'); 489 | $video_parent.find('.videocontrols-fillscreen').removeClass('vc-icon-expand3').addClass('vc-icon-contract3'); 490 | } 491 | else { 492 | fillscreen = false; 493 | 494 | $video_parent.removeClass('player-fillscreen'); 495 | $video_parent.find('.videocontrols-fillscreen').removeClass('vc-icon-contract3').addClass('vc-icon-expand3'); 496 | } 497 | 498 | if (options.fillscreenchange) { 499 | options.fillscreenchange($(this)); 500 | } 501 | }); 502 | 503 | $video_parent.find('.videocontrols-mediumscreen').on('click', function (e) 504 | { 505 | e.preventDefault(); 506 | 507 | if (!mediumscreen) { 508 | mediumscreen = true; 509 | 510 | $video_parent.addClass('player-mediumscreen'); 511 | $video_parent.find('.videocontrols-mediumscreen').removeClass('vc-icon-expand2').addClass('vc-icon-contract2'); 512 | $video_parent.find('.videocontrols-fillscreen').hide(); 513 | } 514 | else { 515 | mediumscreen = false; 516 | 517 | $video_parent.removeClass('player-mediumscreen'); 518 | $video_parent.find('.videocontrols-mediumscreen').removeClass('vc-icon-contract2').addClass('vc-icon-expand2'); 519 | $video_parent.find('.videocontrols-fillscreen').show(); 520 | } 521 | 522 | if (options.mediumscreenchange) { 523 | options.mediumscreenchange($(this)); 524 | } 525 | }); 526 | 527 | $video_parent.find('.videocontrols-fullscreen').on('click', function (e) 528 | { 529 | e.preventDefault(); 530 | 531 | var DOMVideo = $video_parent.get(0); 532 | 533 | var requestFullScreen = DOMVideo.requestFullscreen || DOMVideo.webkitRequestFullscreen || DOMVideo.mozRequestFullScreen || DOMVideo.msRequestFullscreen; 534 | var cancelFullScreen = document.exitFullscreen || document.webkitExitFullscreen || document.mozCancelFullScreen || document.msExitFullscreen; 535 | 536 | if(!exitFullscreen && !document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) { 537 | if (mediumscreen) { 538 | $video_parent.find('.videocontrols-mediumscreen').trigger('click'); 539 | } 540 | 541 | requestFullScreen.call(DOMVideo); 542 | 543 | $video_parent.addClass('player-fullscreen'); 544 | $video_parent.find('.videocontrols-fullscreen').removeClass('vc-icon-expand').addClass('vc-icon-contract'); 545 | $video_parent.find('.videocontrols-fillscreen').hide(); 546 | $video_parent.find('.videocontrols-mediumscreen').hide(); 547 | 548 | window.setTimeout(function () 549 | { 550 | $(document).on('fullscreenchange webkitfullscreenchange mozfullscreenchange msfullscreenchange', fullscreenChange); 551 | }, 500); 552 | 553 | $(document).on('mousemove touchmove', fullscreenMove); 554 | } 555 | else { 556 | exitFullscreen = false; 557 | 558 | $(document).off('mousemove touchmove', fullscreenMove); 559 | 560 | $(document).off('fullscreenchange webkitfullscreenchange mozfullscreenchange msfullscreenchange', fullscreenChange); 561 | 562 | cancelFullScreen.call(document); 563 | 564 | $video_parent.removeClass('player-fullscreen'); 565 | $video_parent.find('.videocontrols-fullscreen').removeClass('vc-icon-contract').addClass('vc-icon-expand'); 566 | $video_parent.find('.videocontrols-fillscreen').show(); 567 | $video_parent.find('.videocontrols-mediumscreen').show(); 568 | 569 | $video_parent.find('video').css('height', ''); 570 | } 571 | 572 | if (options.fullscreenchange) { 573 | options.fullscreenchange($(this)); 574 | } 575 | }); 576 | 577 | function fullscreenMove() 578 | { 579 | if (!$video_parent.parent().find('.vc-player').hasClass('hover')) { 580 | $video_parent.parent().find('.vc-player').addClass('hover'); 581 | } 582 | clearTimeout(timerHover); 583 | 584 | timerHover = setTimeout(function () 585 | { 586 | $video_parent.parent().find('.vc-player').removeClass('hover'); 587 | }, 2000); 588 | } 589 | 590 | function fullscreenChange() 591 | { 592 | exitFullscreen = true; 593 | 594 | $video_parent.find('.videocontrols-fullscreen').trigger('click'); 595 | } 596 | 597 | $video.removeAttr('controls'); 598 | $video.trigger('volumechange'); 599 | }); 600 | 601 | function displayPreview(position) 602 | { 603 | $video_parent.find('.videocontrols-preview').remove(); 604 | 605 | var left = position - $video_parent.find('.videocontrols-seeker').offset().left; 606 | left = Math.max(0, left); 607 | left = Math.min($video_parent.find('.videocontrols-seeker').width(), left); 608 | var seconds = left / $video_parent.find('.videocontrols-seeker').width() * $video[0].duration; 609 | var factor = Math.floor((seconds + 5) / options.preview.step); 610 | var sprite = options.preview.sprites[Math.floor(factor / (options.preview.wide / options.preview.width))]; 611 | if (sprite) { 612 | factor = Math.floor(factor % (options.preview.wide / options.preview.width)); 613 | left = Math.max(options.preview.width / 2, left); 614 | left = Math.min($video_parent.find('.videocontrols-seeker').width() - (options.preview.width / 2), left); 615 | $video_parent.find('.videocontrols-seeker').append('
' + 616 | '
' + 617 | ' ' + 618 | ' ' + secondsToTime(seconds) + '' + 619 | '
' + 620 | '
' + 621 | '
'); 622 | } 623 | } 624 | 625 | function getClientX(e) 626 | { 627 | var clientX = 0; 628 | if ($.isNumeric(e)) { 629 | clientX = e; 630 | } 631 | else if ($.isNumeric(e.clientX)) { 632 | clientX = $(document).scrollLeft() + e.clientX; 633 | } 634 | else if (isTouch) { 635 | clientX = e.originalEvent.pageX + e.originalEvent.targetTouches[0].clientX; 636 | } 637 | return clientX; 638 | } 639 | 640 | function localStorageGetItem(key, defaultValue) 641 | { 642 | var result = null; 643 | if (!!window.localStorage) { 644 | result = localStorage.getItem(key); 645 | } 646 | if (result === null) { 647 | result = defaultValue; 648 | } 649 | return result; 650 | } 651 | 652 | function localStorageSetItem(key, value) 653 | { 654 | if (!!window.localStorage) { 655 | try { 656 | localStorage.setItem(key, value); 657 | } 658 | catch (e) { } 659 | } 660 | } 661 | 662 | function secondsToTime(value) 663 | { 664 | var hours = Math.floor(((value / 86400) % 1) * 24); 665 | var minutes = Math.floor(((value / 3600) % 1) * 60); 666 | var seconds = Math.round(((value / 60) % 1) * 60); 667 | var time = ''; 668 | if (hours > 0) { 669 | time += ((hours < 10) ? '0' + hours : hours) + ':'; 670 | } 671 | 672 | time += ((minutes < 10) ? '0' + minutes : minutes) + ':'; 673 | time += (seconds < 10) ? '0' + seconds : seconds; 674 | 675 | return time; 676 | } 677 | }; 678 | 679 | $.fn.videocontrols.defaults = { }; 680 | })(jQuery); 681 | -------------------------------------------------------------------------------- /videocontrols444444.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pornzrus/videocontrols/8b0f5771a13907f549b1af60938864ade15e555d/videocontrols444444.png -------------------------------------------------------------------------------- /videocontrols777777.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pornzrus/videocontrols/8b0f5771a13907f549b1af60938864ade15e555d/videocontrols777777.png --------------------------------------------------------------------------------