diff --git a/public/ckplayer/LICENSE b/public/ckplayer/LICENSE new file mode 100644 index 0000000..7a4a3ea --- /dev/null +++ b/public/ckplayer/LICENSE @@ -0,0 +1,202 @@ + + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + + TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + + 1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + + 2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + + 3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + + 4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + + 5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + + 6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + + 7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + + 8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + + 9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + + END OF TERMS AND CONDITIONS + + APPENDIX: How to apply the Apache License to your work. + + To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "[]" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. + + Copyright [yyyy] [name of copyright owner] + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. \ No newline at end of file diff --git a/public/ckplayer/css/ckplayer.css b/public/ckplayer/css/ckplayer.css new file mode 100644 index 0000000..2c40043 --- /dev/null +++ b/public/ckplayer/css/ckplayer.css @@ -0,0 +1,1609 @@ +.ckplayer-error{ + position: fixed; + z-index: 9999999; + left: 10px; + bottom: 10px; + width: auto; + height: 38px; + line-height: 38px; + padding: 0 .85rem; + background: rgb(0,0,0,.9); + border-radius: .25rem; + color: #FFF; + font-size: 14px; + white-space: nowrap; +} +.ckplayer-ckplayer{ + width: 100%; + height: 100%; + float: left; + background: #000; + overflow: hidden; +} +.ckplayer-ckplayer .ck-main.ck-nocursor{ + cursor: none; +} +.ckplayer-ckplayer-smallwindow{ + position: fixed; + z-index: 9999999; + width: 420px; + max-width: 100%; + height: 266px; + right: 10px; + bottom: 10px; +} +.ckplayer-ckplayer .ck-main{ + width: 100%; + height: 100%; + overflow: hidden; + background: #000; + position: relative; +} +.ckplayer-ckplayer .ck-main .ck-video{ + width: 100%; + height: 100%; + overflow: hidden; + position:absolute; + z-index: 1; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; +} +.ckplayer-ckplayer .ck-main .ck-video video,.ckplayer-ckplayer .ck-main .ck-video canvas{ + width: 100%; + height: 100%; +} +.ckplayer-ckplayer .ck-main .ck-error{ + width: 100%; + height: 80px; + line-height: 35px; + text-align: center; + color: #FFF; + position:absolute; + z-index: 70; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; + overflow: hidden; +} +.ckplayer-ckplayer .ck-main .ck-logo{ + position:absolute; + right: 20px; + top:20px; + z-index: 400; +} +.ckplayer-ckplayer .ck-main .ck-loading{ + position:absolute; + top:0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + z-index: 80; + width: 80px; + height: 80px; + border-radius: 50%; + background: url(images/loading.png) no-repeat center center; + background-size: 100% 100%; + animation: ck-Circle 1.5s linear infinite; + -webkit-animation: ck-Circle 1.5s linear infinite +} +.ckplayer-ckplayer .ck-main .ck-center-play{ + background: url(images/play.png) no-repeat 70% center; + background-size:60% 60%; + border: 8px solid rgba(255,255,255,.3); + border-radius: 50%; + box-sizing:border-box; + -moz-box-sizing:border-box; /* Firefox */ + -webkit-box-sizing:border-box; /* Safari */ + width: 80px; + height: 80px; + position: absolute; + display: none; + z-index: 90; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; + cursor: pointer; + transition: .2s; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-center-play{ + width: 100px; + height: 100px; +} +.ckplayer-ckplayer .ck-main .ck-center-play:hover{ + width: 100px; + height: 100px; + transition: 0.2s; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-center-play:hover{ + width: 120px; + height: 120px; +} +.ckplayer-ckplayer .ck-main .ck-buffer{ + background: url(images/buffer.png) no-repeat center center; + background-size:100% 100%; + border-radius: 50%; + width: 60px; + height: 60px; + position: absolute; + z-index: 100; + top:0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + display: none; + animation: ck-Circle 1s linear infinite; + -webkit-animation: ck-Circle 1s linear infinite +} +.ckplayer-ckplayer .ck-main .ck-message{ + position: absolute; + z-index: 240; + left:5px; + bottom: 78px; + padding: 0 1rem; + line-height: 30px; + height: 30px; + width: auto; + min-width: 1px; + border-radius: .25rem; + background: rgba(0,0,0,.6); + font-size: 14px; + color: #FFF; + display: none; + white-space:nowrap; +} +.ckplayer-ckplayer .ck-main .ck-message-right{ + left:auto; + right: 5px; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-message{ + font-size: 18px; + bottom: 100px; +} +.ckplayer-ckplayer .ck-main .ck-tip{ + width: auto; + height: auto; + position: absolute; + z-index: 230; + display: none; + margin-bottom: 1px; +} +.ckplayer-ckplayer .ck-main .ck-tip .ck-content{ + width: auto; + height: auto; + white-space: nowrap; + min-width: 1px; + background: rgba(0,0,0,.6); + font-size: 14px; + color: #FFF; + line-height: 32px; + height: 32px; + padding: 0 15px; +} +.ckplayer-ckplayer .ck-main .ck-tip .ck-content-float-auto{ + border-radius: 5px; + margin: auto; +} +.ckplayer-ckplayer .ck-main .ck-tip .ck-content-float-left{ + border-radius: 5px; + float: left; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-tip .ck-content{ + font-size: 18px; +} +.ckplayer-ckplayer .ck-main .ck-tip .ck-triangle{ + width: 0px; + height: 0px; +} +.ckplayer-ckplayer .ck-main .ck-tip .ck-triangle-auto{ + border-left: 8px solid transparent; + border-top: 8px solid rgba(0, 0, 0,.6); + border-right: 8px solid transparent; + margin: auto; +} +.ckplayer-ckplayer .ck-main .ck-tip .ck-triangle-left{ + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-left: 8px solid rgba(0, 0, 0,.6); + float: left; + margin-top: 10px; +} +.ckplayer-ckplayer .ck-main .ck-preview{ + position: absolute; + z-index: 210; + width: 100%; + left:0; + bottom: 64px; + overflow: hidden; + display: none; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-preview{ + bottom: 86px; +} +.ckplayer-ckplayer .ck-main .ck-preview-load-img{ + position: absolute; + z-index: 210; + top:110%; +} +.ckplayer-ckplayer .ck-main .ck-preview .ck-preview-bg{ + position: absolute; + z-index: 1; + top:0; + float: left; + transition: .2s; +} +.ckplayer-ckplayer .ck-main .ck-preview .ck-preview-bg .ck-preview-img{ + background-repeat: no-repeat ; + float: left; +} +.ckplayer-ckplayer .ck-main .ck-preview .ck-preview-frame{ + position: absolute; + z-index: 2; + top:0; + left:-1000px; + border:4px solid #0078ff; + box-sizing:content-box; + -moz-box-sizing:content-box; /* Firefox */ + -webkit-box-sizing:content-box; /* Safari */ +} +.ckplayer-ckplayer .ck-main .ck-prompt-words{ + position: absolute; + z-index: 220; + width: 213px; + line-height: 23px; + font-size: 14px; + color: #FFF; + background: rgba(0, 0, 0,.6); + overflow: hidden; + display: none; + margin-bottom: 10px; + border-radius: 3px; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: .2s; + animation-duration: .2s; + -webkit-animation-name: ck-bounceIn; + animation-name: ck-bounceIn; +} +.ckplayer-ckplayer .ck-main .ck-prompt-words .ck-prompt-content{ + padding: 5px; +} +.ckplayer-ckplayer .ck-main .ck-layer{ + position: absolute; + z-index: 101; +} +.ckplayer-ckplayer .ck-main .ck-tempTime{ + position: absolute; + z-index: 20; + left:10px; + bottom: 5px; + display: none; + font-size: 14px; + line-height: 28px; + color: #FFF; +} +/*关于*/ +.ckplayer-ckplayer .ck-main .ck-about{ + position: absolute; + z-index: 200; + width: 50%; + max-width: 600px; + min-width: 400px; + left: 1rem; + top: 1rem; + background: rgba(0,0,0,.6); + padding: 1rem 0; + display: none; +} +.ckplayer-ckplayer .ck-main .ck-about ul{ + padding: 0; + margin: 0; +} +.ckplayer-ckplayer .ck-main .ck-about ul li{ + list-style:none; + color: #FFF; + font-size: 12px; + line-height: 18px; + height: 18px; + padding: 0; + margin: 0; +} +.ckplayer-ckplayer .ck-main .ck-about ul li .ck-about-title{ + width: 100px; + text-align: right; + float: left; + padding-right: .5rem; +} +.ckplayer-ckplayer .ck-main .ck-about ul li .ck-about-content{ + width: auto; + float: left; +} +.ckplayer-ckplayer .ck-main .ck-about .ck-about-bar{ + position: absolute; + z-index: 1; + top: 0; + right: 0; + width: 96px; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-about .ck-about-bar{ + width: 140px; +} +.ckplayer-ckplayer .ck-main .ck-about .ck-about-bar .ck-btn-about-copy{ + background-position:-1632px 0; +} +.ckplayer-ckplayer .ck-main .ck-about .ck-about-bar .ck-btn-about-copy:hover{ + background-position:-1680px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-about .ck-about-bar .ck-btn-about-copy{ + background-position:-2380px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-about .ck-about-bar .ck-btn-about-copy:hover{ + background-position:-2450px 0; +} +.ckplayer-ckplayer .ck-main .ck-about .ck-about-bar .ck-btn-about-close{ + background-position:-1728px 0; +} +.ckplayer-ckplayer .ck-main .ck-about .ck-about-bar .ck-btn-about-close:hover{ + background-position:-1776px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-about .ck-about-bar .ck-btn-about-close{ + background-position:-2520px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-about .ck-about-bar .ck-btn-about-close:hover{ + background-position:-2590px 0; +} +/*截图显示容器*/ +.ckplayer-ckplayer .ck-main .ck-screenshot{ + position: absolute; + z-index: 220; + width: auto; + height: 144px; + margin: auto !important; + top: 0; + bottom: 0; + right: 55px; + display: none; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-screenshot{ + height: 210px; + right: 77px; +} +.ckplayer-ckplayer .ck-main .ck-screenshot .ck-screenshot-img{ + position: absolute; + z-index: 1; + width: 100%; + height: 100%; +} +.ckplayer-ckplayer .ck-main .ck-screenshot .ck-screenshot-img img{ + height: 100%; +} +.ckplayer-ckplayer .ck-main .ck-screenshot .ck-screenshot-bar{ + position: absolute; + z-index: 1; + width: 100%; + height: 36px; + bottom: 5px; + text-align: center; +} +.ckplayer-ckplayer .ck-main .ck-screenshot .ck-screenshot-bar .ck-screenshot-btn{ + display: inline-block; + overflow: hidden; + border: 0px solid transparent; + border-radius: 5px; + vertical-align: middle; + text-align: center; + text-decoration: none; + white-space: nowrap; + font-size: 14px; + line-height: 30px; + padding: 0px 15px; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + color: #fff; + margin: 0 5px; +} +.ckplayer-ckplayer .ck-main .ck-screenshot .ck-screenshot-bar .ck-screenshot-btn:hover{ + color: #FFFF00; +} +.ckplayer-ckplayer .ck-main .ck-screenshot .ck-screenshot-bar .ck-screenshot-btn:focus{ + outline:0; +} +.ckplayer-ckplayer .ck-main .ck-screenshot .ck-screenshot-bar .ck-screenshot-down{ + background-color: #007bff; +} +.ckplayer-ckplayer .ck-main .ck-screenshot .ck-screenshot-bar .ck-screenshot-close{ + background-color: #505050; + color: #fff; +} +/*广告*/ +.ckplayer-ckplayer .ck-main .ck-yytf{ + position: absolute; + z-index: 800; + width: 100%; + height: 100%; + left: 0px; + top: 0px; +} +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-front-link{ + width: 100%; + height: 100%; + display: none; + cursor: pointer; +} +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-front-picture{ + width: 100%; + height: 100%; + background: #000; + display: none; + text-align: center; + line-height: 100%; +} +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-front-picture img{ + max-width: 100%; + max-height: 100%; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; +} +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-top{ + position: absolute; + z-index: 3; + top: 10px; + right: 10px; +} + +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-top div{ + float: right; + margin-left: 10px; + font-size: 14px; + border-radius: 15px; + background: rgba(0,0,0,.6); + padding: 0px 10px; + line-height: 30px; + height: 30px; + color: #FFF; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-yytf .ck-yytf-top div{ + font-size: 18px; + border-radius: 20px; + line-height: 40px; + height: 40px; +} +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-top .ck-yytf-closetime{ + display: none; +} +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-top .ck-yytf-closead{ + cursor: pointer; + display: none; +} + +/*显示广告时的底部内容*/ +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-bottom{ + position: absolute; + z-index: 3; + bottom: 10px; + right: 10px; +} +/*显示广告时的底部按钮-共用*/ +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-bottom .ck-yytf-btn{ + background-color: rgba(0,0,0,.6); + background-image: url(images/ckplayer.png); + background-size: auto 100%; + border: none; + outline: none; + width: 30px; + height: 30px; + cursor: pointer; + background-repeat: no-repeat; + border-radius: 50%; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-yytf .ck-yytf-bottom .ck-yytf-btn{ + width: 40px; + height: 40px; +} +/*显示广告时的静音按钮*/ +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-bottom .ck-yytf-mutedandexit{ + float: right; + width: 30px; + height: 30px; + margin-left: 10px; + overflow: hidden; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-yytf .ck-yytf-bottom .ck-yytf-mutedandexit{ + width: 40px; + height: 40px; +} +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-bottom .ck-yytf-mutedandexit .ck-yytf-mutedandexit-muted{ + background-position:-180px 0; +} +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-bottom .ck-yytf-mutedandexit .ck-yytf-mutedandexit-muted:hover{ + background-position:-210px 0; +} +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-bottom .ck-yytf-mutedandexit .ck-yytf-mutedandexit-exitmuted{ + background-position:-240px 0; +} +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-bottom .ck-yytf-mutedandexit .ck-yytf-mutedandexit-exitmuted:hover{ + background-position:-270px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-yytf .ck-yytf-bottom .ck-yytf-mutedandexit .ck-yytf-mutedandexit-muted{ + background-position:-240px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-yytf .ck-yytf-bottom .ck-yytf-mutedandexit .ck-yytf-mutedandexit-muted:hover{ + background-position:-280px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-yytf .ck-yytf-bottom .ck-yytf-mutedandexit .ck-yytf-mutedandexit-exitmuted{ + background-position:-320px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-yytf .ck-yytf-bottom .ck-yytf-mutedandexit .ck-yytf-mutedandexit-exitmuted:hover{ + background-position:-360px 0; +} +/*显示广告时的全屏按钮*/ +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-bottom .ck-yytf-fullandexit{ + float: right; + width: 30px; + height: 30px; + margin-left: 10px; + overflow: hidden; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-yytf .ck-yytf-bottom .ck-yytf-fullandexit{ + width: 40px; + height: 40px; +} +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-bottom .ck-yytf-fullandexit .ck-yytf-fullandexit-full{ + background-position:-300px 0; +} +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-bottom .ck-yytf-fullandexit .ck-yytf-fullandexit-full:hover{ + background-position:-330px 0; +} +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-bottom .ck-yytf-fullandexit .ck-yytf-fullandexit-exitfull{ + background-position:-360px 0; +} +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-bottom .ck-yytf-fullandexit .ck-yytf-fullandexit-exitfull:hover{ + background-position:-390px 0; +} + +.ckplayer-ckplayer .ck-main.ck-main-full .ck-yytf .ck-yytf-bottom .ck-yytf-fullandexit .ck-yytf-fullandexit-full{ + background-position:-400px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-yytf .ck-yytf-bottom .ck-yytf-fullandexit .ck-yytf-fullandexit-full:hover{ + background-position:-440px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-yytf .ck-yytf-bottom .ck-yytf-fullandexit .ck-yytf-fullandexit-exitfull{ + background-position:-480px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-yytf .ck-yytf-bottom .ck-yytf-fullandexit .ck-yytf-fullandexit-exitfull:hover{ + background-position:-520px 0; +} +/*广告查看详情按钮*/ +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-bottom .ck-yytf-details{ + float: right; + font-size: 14px; + border-radius: 15px; + background: rgba(0,0,0,.6); + padding: 0 10px; + color: #FFF; + line-height: 30px; + height: 30px; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-yytf .ck-yytf-bottom .ck-yytf-details{ + font-size: 18px; + border-radius: 20px; + line-height: 40px; + height: 40px; +} +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-bottom .ck-yytf-details a{ + color: #FFF; + text-decoration: none; +} +/*暂停广告容器*/ +.ckplayer-ckplayer .ck-main .ck-pause-yytf{ + display: none; + position:absolute; + z-index: 800; + max-width: 100%; + max-height: 100%; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; +} +.ckplayer-ckplayer .ck-main .ck-pause-yytf img{ + max-width: 100%; + max-height: 100%; +} +.ckplayer-ckplayer .ck-main .ck-pause-close{ + position:absolute; + z-index: 1; + right: -15px; + top:-15px; + width: 30px; + height: 30px; + background-color: transparent; + background-image: url(images/adclose.png); + border: none; + outline: none; + cursor: pointer; + background-repeat: no-repeat ; +} +.ckplayer-ckplayer .ck-main .ck-pause-close:hover{ + background-position:-30px 0; +} +/*右键菜单*/ +.ckplayer-ckplayer-menu{ + width:120px; + background: rgba(50,50,50,.6); + position: absolute; + z-index: 9000; + font-size:14px ; + border: 1px #000 solid; + display: none; +} +.ckplayer-ckplayer-menu .ck-li{ + color: #adadad; + line-height: 35px; + padding: 0 0 0 5px; +} +.ckplayer-ckplayer-menu .ck-li a{ + color: #FFF; + text-decoration: none; +} +.ckplayer-ckplayer-menu .ck-underline{ + border-bottom: 1px #000 solid; +} +/*控制栏*/ +.ckplayer-ckplayer .ck-main .ck-bar{ + position:absolute; + z-index: 260; + left:0px; + bottom:0px; + width: 100%; + height: 48px; + background: rgba(0,0,0,.3); + transition: 0.2s; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar{ + height: 70px; +} +.ckplayer-ckplayer .ck-main .ck-bar.ck-bar-out{ + bottom: -50px; + transition: 0.2s; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar.ck-bar-out{ + bottom: -80px; + transition: 0.2s; +} + +/*按钮公用样式*/ +.ckplayer-ckplayer .ck-main .ck-bar-btn{ + background-color: transparent; + background-image: url(images/ckplayer.48.png); + background-size: auto 100%; + border: none; + outline: none; + width: 48px; + height: 48px; + cursor: pointer; + background-repeat: no-repeat ; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar-btn{ + background-image: url(images/ckplayer.png); + width: 70px; + height: 70px; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-btn:hover{ + background-size:auto 100%; +} + +/*播放暂停按钮组*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-playandpause{ + float: left; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-playandpause .ck-btn-play{ + background-position:0px top; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-playandpause .ck-btn-play:hover{ + background-position:-48px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-playandpause .ck-btn-play:hover{ + background-position:-70px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-playandpause .ck-btn-pause{ + background-position:-96px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-playandpause .ck-btn-pause{ + background-position:-140px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-playandpause .ck-btn-pause:hover{ + background-position:-144px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-playandpause .ck-btn-pause:hover{ + background-position:-210px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-playandpause .ck-btn-refresh{ + background-position:-192px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-playandpause .ck-btn-refresh{ + background-position:-280px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-playandpause .ck-btn-refresh:hover{ + background-position:-240px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-playandpause .ck-btn-refresh:hover{ + background-position:-350px 0; +} + +/*返回播放按钮*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-btn-backlive{ + float: left; + font-size: 16px; + line-height: 28px; + border-radius: 3px; + margin: 10px; + border: 0px; + background: rgba(3,60,146,.5); + color: #FFF; + cursor: pointer; + padding: 0 8px; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-btn-backlive{ + font-size: 18px; + line-height: 36px; + margin: 17px 10px; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-btn-backlive:hover{ + background: rgba(3,60,146,.9); +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-btn-backlive:focus{ + outline:0; + background: rgba(3,60,146,.6); +} +/*静音取消静音按钮组*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-volumebox .ck-btn-muted{ + background-position:-288px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-volumebox .ck-btn-muted{ + background-position:-420px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-volumebox .ck-btn-muted:hover{ + background-position:-336px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-volumebox .ck-btn-muted:hover{ + background-position:-490px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-volumebox .ck-btn-exitmuted{ + background-position:-384px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-volumebox .ck-btn-exitmuted{ + background-position:-560px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-volumebox .ck-btn-exitmuted:hover{ + background-position:-432px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-volumebox .ck-btn-exitmuted:hover{ + background-position:-630px 0; +} + +/*全屏按钮组*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-fullandexit{ + float: right; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-fullandexit .ck-btn-full{ + background-position:-480px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-fullandexit .ck-btn-full{ + background-position:-700px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-fullandexit .ck-btn-full:hover{ + background-position:-528px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-fullandexit .ck-btn-full:hover{ + background-position:-770px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-fullandexit .ck-btn-exitfull{ + background-position:-672px 0; + display: none; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-fullandexit .ck-btn-exitfull{ + background-position:-840px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-fullandexit .ck-btn-exitfull:hover{ + background-position:-720px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-fullandexit .ck-btn-exitfull:hover{ + background-position:-910px 0; +} + +/*网页全屏按钮组*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-webfullandexit{ + float: right; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-webfullandexit .ck-btn-webfull{ + background-position:-768px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-webfullandexit .ck-btn-webfull{ + background-position:-1120px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-webfullandexit .ck-btn-webfull:hover{ + background-position:-816px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-webfullandexit .ck-btn-webfull:hover{ + background-position:-1190px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-webfullandexit .ck-btn-exitwebfull{ + background-position:-864px 0; + display: none; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-webfullandexit .ck-btn-exitwebfull{ + background-position:-1260px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-webfullandexit .ck-btn-exitwebfull:hover{ + background-position:-912px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-webfullandexit .ck-btn-exitwebfull:hover{ + background-position:-1330px 0; +} + +/*剧场模式按钮组*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-theatreandexit{ + float: right; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-theatreandexit .ck-btn-theatre{ + background-position:-960px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-theatreandexit .ck-btn-theatre{ + background-position:-1400px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-theatreandexit .ck-btn-theatre:hover{ + background-position:-1008px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-theatreandexit .ck-btn-theatre:hover{ + background-position:-1470px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-theatreandexit .ck-btn-exittheatre{ + background-position:-1056px 0; + display: none; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-theatreandexit .ck-btn-exittheatre{ + background-position:-1540px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-theatreandexit .ck-btn-exittheatre:hover{ + background-position:-1104px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-theatreandexit .ck-btn-exittheatre:hover{ + background-position:-1610px 0; +} +/*播放速度*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-playbackrate-box{ + float: right; + height: 48px; + line-height: 48px; + position: relative; + cursor: pointer; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-playbackrate-box{ + height: 70px; + line-height: 70px; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-playbackrate-box .ck-bar-playbackrate{ + height: 100%; + padding: 0 10px; + white-space:nowrap; + font-size: 16px; + color: #FFF; + -moz-user-select:none; /*火狐*/ + -webkit-user-select:none; /*webkit浏览器*/ + -ms-user-select:none; /*IE10*/ + -khtml-user-select:none; /*早期浏览器*/ + user-select:none; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-playbackrate-box .ck-bar-playbackrate{ + font-size: 18px; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-playbackrate-box .ck-bar-playbackrate:hover{ + color: #0368d0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-playbackrate-box .ck-bar-playbackrate-bg-box { + width: auto; + height: auto; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-playbackrate-box:hover .ck-bar-playbackrate-bg-box { + display: block; +} +/*字幕*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-track-box{ + float: right; + height: 48px; + line-height: 48px; + position: relative; + cursor: pointer; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-track-box{ + height: 70px; + line-height: 70px; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-track-box .ck-bar-track{ + height: 100%; + padding: 0 10px; + white-space:nowrap; + font-size: 16px; + color: #FFF; + -moz-user-select:none; /*火狐*/ + -webkit-user-select:none; /*webkit浏览器*/ + -ms-user-select:none; /*IE10*/ + -khtml-user-select:none; /*早期浏览器*/ + user-select:none; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-track-box .ck-bar-track{ + font-size: 18px; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-track-box .ck-bar-track:hover{ + color: #0368d0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-track-box .ck-bar-track-bg-box { + width: auto; + height: auto; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-track-box:hover .ck-bar-track-bg-box { + display: block; +} +/*清晰度*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-definition-box{ + float: right; + height: 48px; + line-height: 48px; + position: relative; + cursor: pointer; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-definition-box{ + height: 70px; + line-height: 70px; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-definition-box .ck-bar-definition{ + height: 100%; + padding: 0 10px; + white-space:nowrap; + font-size: 16px; + color: #FFF; + -moz-user-select:none; /*火狐*/ + -webkit-user-select:none; /*webkit浏览器*/ + -ms-user-select:none; /*IE10*/ + -khtml-user-select:none; /*早期浏览器*/ + user-select:none; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-definition-box .ck-bar-definition{ + font-size: 18px; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-definition-box .ck-bar-definition:hover{ + color: #0368d0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-definition-box .ck-bar-definition-bg-box { + width: auto; + height: auto; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-definition-box:hover .ck-bar-definition-bg-box { + display: block; +} +/*列表切换*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-list-bg-box { + background: rgba(0,0,0,.001); + position: absolute; + z-index: 1; + bottom: 46px; + display: none; + -webkit-animation-duration: .2s; + animation-duration: .2s; + -webkit-animation-name: ck-bounceIn; + animation-name: ck-bounceIn; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-list-bg-box { + bottom: 68px; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-list-bg-box .ck-list-bg{ + background: rgba(0,0,0,.6); + float: left; + border-radius: 5px; + padding: 10px; + margin-bottom: 10px; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-list-bg-box .ck-list-bg .ck-list-p{ + width: 100%; + float: left; + line-height: 35px; + color: #FFF; + text-align: center; + font-size: 14px; + background-color: rgba(0,0,0,0); + border: 0px; + white-space:nowrap; + cursor: pointer; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-list-bg-box .ck-list-bg .ck-list-p:hover{ + color: #0368d0; + font-size: 16px; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-list-bg-box .ck-list-bg .ck-list-p:hover{ + font-size: 20px; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-list-bg-box .ck-list-bg .ck-list-p{ + font-size: 18px; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-list-bg-box .ck-list-bg .ck-list-p-focus{ + color: #0368d0; +} +/*下一集按钮*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-next{ + float: left; + background-position:-672px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-next{ + background-position:-980px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-next:hover{ + background-position:-720px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-next:hover{ + background-position:-1050px 0; +} +/*进度栏*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress{ + width: 100%; + position:absolute; + z-index: 1; + height: 12px; + top:-11px; + transition: 0.2s; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress .ck-bar-progress-bg{ + width: 100%; + background: rgba(255,255,255,.3); + margin-top: 2px; + overflow: hidden; + height: 10px; + transition: .2s; + cursor: pointer; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress .ck-bar-progress-bg .ck-bar-progress-load{ + float: left; + width: 0px; + background: rgba(169,169,169,.7); + height: 10px; + transition: .2s; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress .ck-bar-progress-bg .ck-bar-progress-play{ + width: 0px; + background: #0368d0; + position: absolute; + z-index: 1; + height: 10px; + transition: .2s; + cursor: pointer; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress .ck-bar-progress-bg .ck-bar-progress-mouseline{ + width: 3px; + background: rgba(255,255,255,.6); + position: absolute; + z-index: 2; + display: none; + height: 10px; + cursor: pointer; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress .ck-bar-progress-bg .ck-bar-progress-prompt{ + background: #FFF; + position: absolute; + z-index: 3; + border-radius: 50%; + width: 10px; + height: 10px; + top:2px; + transition: .2s; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress .ck-bar-progress-slider{ + border-radius: 50%; + overflow: hidden; + position: relative; + float: left; + z-index: 4; + left: 0px; + cursor: pointer; + width: 12px; + height: 12px; + top: -11px; + background: #FFF; + box-shadow: 0px 0px 0px 4px rgba(255,255,255,.5); +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress .ck-bar-progress-slider:hover{ + background: #0368d0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress .ck-bar-progress-bg:hover .ck-bar-progress-mouseline{ + display: block; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress.ck-bar-progress-out{ + height: 2px; + top:-2px; + transition: .2s; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress.ck-bar-progress-out .ck-bar-progress-bg,.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress.ck-bar-progress-out .ck-bar-progress-load,.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress.ck-bar-progress-out .ck-bar-progress-bg .ck-bar-progress-play{ + height: 2px; + transition: .2s; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress.ck-bar-progress-out .ck-bar-progress-slider{ + width: 12px; + height: 2px; + top: -2px; + box-shadow: 0px 0px 0px 0px rgba(255,255,255,0); + background: rgba(255,255,255,0); + transition: .2s; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress.ck-bar-progress-out .ck-bar-progress-bg .ck-bar-progress-prompt{ + height: 2px; + border-radius: 0; + transition: .2s; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress.ck-bar-progress-slider-move .ck-bar-progress-play,.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress.ck-bar-progress-slider-move .ck-bar-progress-slider{ + transition: 0s; +} + +/*音量调节栏*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-volumebox{ + float: right; + width: 48px; + overflow-x: hidden; +} +/*音量调节栏*/ +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-volumebox{ + width: 70px; +} +/*默认状态-音量调节总外框*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-volumebox .ck-bar-volume{ + width: 48px; + height: 215px; + background: rgba(0,0,0,.01); + position: absolute; + z-index: 1; + bottom: 46px; + display: none; + overflow: hidden; +} +/*全屏状态-音量调节总外框*/ +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-volumebox .ck-bar-volume{ + width: 70px; + bottom: 68px; +} +/*默认状态-音量调节总外框-鼠标经过时样式*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-volumebox:hover .ck-bar-volume{ + display: block; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: .1s; + animation-duration: .1s; + -webkit-animation-name: ck-bounceIn; + animation-name: ck-bounceIn; +} +/*共用状态-音量调节内部外框*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-volumebox .ck-bar-volumex{ + width: 100%; + height: 200px; + float: left; + background: rgba(0,0,0,.8); + border-radius: 5px; +} +/*共用状态-音量调节顶部文字*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-volumebox .ck-bar-volume .ck-bar-volume-txt{ + width: 100%; + height: 40px; + line-height: 40px; + color: #FFF; + text-align: center; + font-size: 1rem; + float: left; + overflow: hidden; + -moz-user-select:none; /*火狐*/ + -webkit-user-select:none; /*webkit浏览器*/ + -ms-user-select:none; /*IE10*/ + -khtml-user-select:none; /*早期浏览器*/ + user-select:none; +} +/*共用状态-音量调节背景色*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-volumebox .ck-bar-volume .ck-bar-volume-bg{ + width: 8px; + height: 140px; + background: #808080; + border-radius: 3px; + overflow: hidden; + cursor: pointer; + margin: auto; +} +/*共用状态-音量调节前景色*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-volumebox .ck-bar-volume .ck-bar-volume-bg .ck-bar-volume-pp{ + width: 8px; + height: 140px; + background: #0368d0; + margin-top: 140px; +} +/*共用状态-音量调节拖动小按钮*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-volumebox .ck-bar-volume .ck-bar-volume-slider{ + width: 10px; + height: 10px; + background: #FFF; + border-radius: 50%; + overflow: hidden; + box-shadow: 0px 0px 0px 8px rgba(255,255,255,.5); + position: absolute; + z-index: 1; + top: 0px; + left: 19px; + cursor: pointer; +} +/*全屏状态-音量调节拖动小按钮*/ +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-volumebox .ck-bar-volume .ck-bar-volume-slider{ + left: 30px; +} +/*默认状态-显示时间*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-time{ + float: left; + line-height: 48px; + font-size: 16px; + color: #FFF; + -moz-user-select:none; /*火狐*/ + -webkit-user-select:none; /*webkit浏览器*/ + -ms-user-select:none; /*IE10*/ + -khtml-user-select:none; /*早期浏览器*/ + user-select:none; +} +/*全屏状态-显示时间*/ +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-time{ + float: left; + line-height: 70px; + font-size: 18px; + color: #FFF; +} +/*右侧控制栏*/ +.ckplayer-ckplayer .ck-main .ck-right-bar{ + position: absolute; + z-index: 260; + top: 0; + right: 2px; + bottom: 0; + margin: auto !important; + width: 48px; + height: 144px; + background: rgba(0,0,0,.3); + border-radius: 5px; + transition: .2s; +} +.ckplayer-ckplayer .ck-main .ck-right-bar-hide{ + right: -48px; + transition: .2s; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-right-bar{ + width: 70px; + height: 210px; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-right-bar-hide{ + right: -70px; + transition: .2s; +} +/*截图按钮*/ +.ckplayer-ckplayer .ck-main .ck-right-bar .ck-btn-screenshot{ + float: left; + background-position:-1536px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-right-bar .ck-btn-screenshot{ + background-position:-2240px 0; +} +.ckplayer-ckplayer .ck-main .ck-right-bar .ck-btn-screenshot:hover{ + background-position:-1584px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-right-bar .ck-btn-screenshot:hover{ + background-position:-2310px 0; +} +/*小窗口按钮组*/ +.ckplayer-ckplayer .ck-main .ck-right-bar .ck-right-bar-smallwindows{ + float: left; +} +.ckplayer-ckplayer .ck-main .ck-right-bar .ck-right-bar-smallwindows button{ + float: left; +} +.ckplayer-ckplayer .ck-main .ck-right-bar .ck-right-bar-smallwindows .ck-btn-smallwindows-open{ + background-position:-1248px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-right-bar .ck-right-bar-smallwindows .ck-btn-smallwindows-open{ + background-position:-1820px 0; +} +.ckplayer-ckplayer .ck-main .ck-right-bar .ck-right-bar-smallwindows .ck-btn-smallwindows-open:hover{ + background-position:-1296px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-right-bar .ck-right-bar-smallwindows .ck-btn-smallwindows-open:hover{ + background-position:-1890px 0; +} +.ckplayer-ckplayer .ck-main .ck-right-bar .ck-right-bar-smallwindows .ck-btn-smallwindows-close{ + background-position:-1152px 0; + display: none; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-right-bar .ck-right-bar-smallwindows .ck-btn-smallwindows-close{ + background-position:-1680px 0; +} +.ckplayer-ckplayer .ck-main .ck-right-bar .ck-right-bar-smallwindows .ck-btn-smallwindows-close:hover{ + background-position:-1200px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-right-bar .ck-right-bar-smallwindows .ck-btn-smallwindows-close:hover{ + background-position:-1750px 0; +} +/*循环按钮组*/ +.ckplayer-ckplayer .ck-main .ck-right-bar .ck-right-bar-loop{ + float: left; +} +.ckplayer-ckplayer .ck-main .ck-right-bar .ck-right-bar-loop .ck-btn-loop-open{ + background-position:-1440px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-right-bar .ck-right-bar-loop .ck-btn-loop-open{ + background-position:-2100px 0; +} +.ckplayer-ckplayer .ck-main .ck-right-bar .ck-right-bar-loop .ck-btn-loop-open:hover{ + background-position:-1488px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-right-bar .ck-right-bar-loop .ck-btn-loop-open:hover{ + background-position:-2170px 0; +} +.ckplayer-ckplayer .ck-main .ck-right-bar .ck-right-bar-loop .ck-btn-loop-close{ + background-position:-1344px 0; + display: none; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-right-bar .ck-right-bar-loop .ck-btn-loop-close{ + background-position:-1960px 0; +} +.ckplayer-ckplayer .ck-main .ck-right-bar .ck-right-bar-loop .ck-btn-loop-close:hover{ + background-position:-1392px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-right-bar .ck-right-bar-loop .ck-btn-loop-close:hover{ + background-position:-2030px 0; +} +/*顶部显示栏*/ +.ckplayer-ckplayer .ck-main .ck-top-bar{ + position: absolute; + z-index: 260; + top: -36px; + width: 100%; + height: 36px; + background: rgba(0,0,0,.3); + transition: .2s; +} +.ckplayer-ckplayer .ck-main .ck-top-bar-hide{ + top: -36px; + transition: .2s; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-top-bar{ + top: 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-top-bar-hide{ + top: -36px; + transition: .2s; +} +.ckplayer-ckplayer .ck-main .ck-top-bar .ck-top-bar-zoom{ + position: absolute; + z-index: 260; +} +.ckplayer-ckplayer .ck-main .ck-top-bar .ck-top-bar-zoom .ck-top-bar-zoom-container{ + float: left; + margin-left: 10px; + margin-top: 9px; + cursor: pointer; +} +.ckplayer-ckplayer .ck-main .ck-top-bar .ck-top-bar-zoom .ck-top-bar-zoom-container .ck-top-bar-zoom-left{ + float: left; + width: 20px; + height: 18px; + border: 1px solid #FFF; + box-sizing:content-box; + -moz-box-sizing:content-box; /* Firefox */ + -webkit-box-sizing:content-box; /* Safari */ +} +.ckplayer-ckplayer .ck-main .ck-top-bar .ck-top-bar-zoom .ck-top-bar-zoom-container:hover .ck-top-bar-zoom-left, +.ckplayer-ckplayer .ck-main .ck-top-bar .ck-top-bar-zoom .ck-top-bar-zoom-container.ck-top-bar-zoom-container-focus .ck-top-bar-zoom-left{ + border-color: #0368d0; +} +.ckplayer-ckplayer .ck-main .ck-top-bar .ck-top-bar-zoom .ck-top-bar-zoom-container:hover .ck-top-bar-zoom-left div, +.ckplayer-ckplayer .ck-main .ck-top-bar .ck-top-bar-zoom .ck-top-bar-zoom-container.ck-top-bar-zoom-container-focus .ck-top-bar-zoom-left div{ + background: #0368d0; +} +.ckplayer-ckplayer .ck-main .ck-top-bar .ck-top-bar-zoom .ck-top-bar-zoom-container .ck-top-bar-zoom-right{ + float: left; + font-size: 14px; + color: #FFF; + padding-left: 5px; +} +.ckplayer-ckplayer .ck-main .ck-top-bar .ck-top-bar-zoom .ck-top-bar-zoom-container:hover .ck-top-bar-zoom-right, +.ckplayer-ckplayer .ck-main .ck-top-bar .ck-top-bar-zoom .ck-top-bar-zoom-container.ck-top-bar-zoom-container-focus .ck-top-bar-zoom-right{ + color: #0368d0; +} +.ckplayer-ckplayer .ck-main .ck-top-bar .ck-top-bar-zoom .ck-top-bar-zoom-container .ck-top-bar-zoom-left .ck-top-bar-zoom-button-50{ + width: 50%; + height: 50%; + background: #FFF; + margin: 4.5px 25%; +} +.ckplayer-ckplayer .ck-main .ck-top-bar .ck-top-bar-zoom .ck-top-bar-zoom-container .ck-top-bar-zoom-left .ck-top-bar-zoom-button-75{ + width: 75%; + height: 50%; + background: #FFF; + margin: 4.5px 12.5%; +} +.ckplayer-ckplayer .ck-main .ck-top-bar .ck-top-bar-zoom .ck-top-bar-zoom-container .ck-top-bar-zoom-left .ck-top-bar-zoom-button-100{ + width: 100%; + height: 50%; + background: #FFF; + margin: 4.5px 0; +} +.ckplayer-ckplayer .ck-main .ck-top-bar .ck-top-bar-title{ + position: absolute; + z-index: 1; + top: 0px; + width: 100%; + height: 36px; + line-height: 36px; + text-align: center; + font-size: 18px; + color: #FFF; + -moz-user-select:none; /*火狐*/ + -webkit-user-select:none; /*webkit浏览器*/ + -ms-user-select:none; /*IE10*/ + -khtml-user-select:none; /*早期浏览器*/ + user-select:none; +} +.ckplayer-ckplayer .ck-main .ck-top-bar .ck-top-bar-time{ + float: right; + height: 36px; + line-height: 36px; + font-size: 14px; + color: #FFF; + padding: 0 1rem 0; + -moz-user-select:none; /*火狐*/ + -webkit-user-select:none; /*webkit浏览器*/ + -ms-user-select:none; /*IE10*/ + -khtml-user-select:none; /*早期浏览器*/ + user-select:none; +} +/*以下为缓动效果样式*/ +.ck-animate { + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: .3s; + animation-duration: .3s; +} +.ck-animate-bouncein { + -webkit-animation-name: ck-bounceIn; + animation-name: ck-bounceIn; +} + +@-webkit-keyframes ck-bounceIn { + 0% { + opacity: 0; + -webkit-transform: scale(.5); + transform: scale(.5) + } + 100% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } +} + +@keyframes ck-bounceIn { + 0% { + opacity: 0; + -webkit-transform: scale(.5); + -ms-transform: scale(.5); + transform: scale(.5); + } + 100% { + opacity: 1; + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } +} +.ck-animate-bounceout { + -webkit-animation-name: ck-bounceOut; + animation-name: ck-bounceOut; +} + +@-webkit-keyframes ck-bounceOut { + 0% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } + 100% { + opacity: 0; + -webkit-transform: scale(.5); + transform: scale(.5); + } +} + +@keyframes ck-bounceOut { + 0% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } + 100% { + opacity: 0; + -webkit-transform: scale(.5); + transform: scale(.5); + } +} +.ck-animate-circle { + animation: ck-Circle 1s linear infinite; + -webkit-animation: ck-Circle 1s linear infinite +} + +@-webkit-keyframes ck-Circle { + 0% { + transform: rotate(0deg); + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg) + } + 25% { + transform: rotate(90deg); + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg) + } + 50% { + transform: rotate(180deg); + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg) + } + 75% { + transform: rotate(270deg); + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg) + } + 100% { + transform: rotate(360deg); + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg) + } +} + +@keyframes ck-Circle { + 0% { + transform: rotate(0deg); + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg) + } + 25% { + transform: rotate(90deg); + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg) + } + 50% { + transform: rotate(180deg); + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg) + } + 75% { + transform: rotate(270deg); + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg) + } + 100% { + transform: rotate(360deg); + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg) + } +} \ No newline at end of file diff --git a/public/ckplayer/css/ckplayer.ixigua.css b/public/ckplayer/css/ckplayer.ixigua.css new file mode 100644 index 0000000..31281d6 --- /dev/null +++ b/public/ckplayer/css/ckplayer.ixigua.css @@ -0,0 +1,1707 @@ +.ckplayer-error{ + position: fixed; + z-index: 9999999; + left: 10px; + bottom: 10px; + width: auto; + height: 38px; + line-height: 38px; + padding: 0 .85rem; + background: rgb(0,0,0,.9); + border-radius: .25rem; + color: #FFF; + font-size: 14px; + white-space: nowrap; +} +.ckplayer-ckplayer{ + width: 100%; + height: 100%; + float: left; + background: #000; + overflow: hidden; +} +.ckplayer-ckplayer .ck-main.ck-nocursor{ + cursor: none; +} +.ckplayer-ckplayer-smallwindow{ + position: fixed; + z-index: 9999999; + width: 420px; + max-width: 100%; + height: 266px; + right: 10px; + bottom: 10px; +} +.ckplayer-ckplayer .ck-main{ + width: 100%; + height: 100%; + overflow: hidden; + background: #000; + position: relative; +} +.ckplayer-ckplayer .ck-main .ck-video{ + width: 100%; + height: 100%; + overflow: hidden; + position:absolute; + z-index: 1; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; +} +.ckplayer-ckplayer .ck-main .ck-video video,.ckplayer-ckplayer .ck-main .ck-video canvas{ + width: 100%; + height: 100%; +} +.ckplayer-ckplayer .ck-main .ck-error{ + width: 100%; + height: 80px; + line-height: 35px; + text-align: center; + color: #FFF; + position:absolute; + z-index: 70; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; + overflow: hidden; +} +.ckplayer-ckplayer .ck-main .ck-logo{ + position:absolute; + right: 20px; + top:20px; + z-index: 400; +} +.ckplayer-ckplayer .ck-main .ck-loading{ + position:absolute; + top:0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + z-index: 80; + width: 80px; + height: 80px; + border-radius: 50%; + background: url(images/loading.png) no-repeat center center; + background-size: 100% 100%; + animation: ck-Circle 1.5s linear infinite; + -webkit-animation: ck-Circle 1.5s linear infinite +} +.ckplayer-ckplayer .ck-main .ck-center-play{ + background: url(images/play.png) no-repeat 70% center; + background-size:60% 60%; + border: 8px solid rgba(255,255,255,.3); + border-radius: 50%; + box-sizing:border-box; + -moz-box-sizing:border-box; /* Firefox */ + -webkit-box-sizing:border-box; /* Safari */ + width: 80px; + height: 80px; + position: absolute; + display: none; + z-index: 90; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; + cursor: pointer; + transition: .2s; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-center-play{ + width: 100px; + height: 100px; +} +.ckplayer-ckplayer .ck-main .ck-center-play:hover{ + width: 100px; + height: 100px; + transition: 0.2s; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-center-play:hover{ + width: 120px; + height: 120px; +} +.ckplayer-ckplayer .ck-main .ck-buffer{ + background: url(images/buffer.png) no-repeat center center; + background-size:100% 100%; + border-radius: 50%; + width: 60px; + height: 60px; + position: absolute; + z-index: 100; + top:0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + display: none; + animation: ck-Circle 1s linear infinite; + -webkit-animation: ck-Circle 1s linear infinite +} +.ckplayer-ckplayer .ck-main .ck-message{ + position: absolute; + z-index: 240; + left:5px; + bottom: 78px; + padding: 0 1rem; + line-height: 30px; + height: 30px; + width: auto; + min-width: 1px; + border-radius: .25rem; + background: rgba(0,0,0,.6); + font-size: 14px; + color: #FFF; + display: none; + white-space:nowrap; +} +.ckplayer-ckplayer .ck-main .ck-message-right{ + left:auto; + right: 5px; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-message{ + font-size: 18px; + bottom: 100px; +} +.ckplayer-ckplayer .ck-main .ck-tip{ + width: auto; + height: auto; + position: absolute; + z-index: 230; + display: none; + margin-bottom: 1px; +} +.ckplayer-ckplayer .ck-main .ck-tip .ck-content{ + width: auto; + height: auto; + white-space: nowrap; + min-width: 1px; + background: rgba(0,0,0,.6); + font-size: 14px; + color: #FFF; + line-height: 32px; + height: 32px; + padding: 0 15px; +} +.ckplayer-ckplayer .ck-main .ck-tip .ck-content-float-auto{ + border-radius: 5px; + margin: auto; +} +.ckplayer-ckplayer .ck-main .ck-tip .ck-content-float-left{ + border-radius: 5px; + float: left; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-tip .ck-content{ + font-size: 18px; +} +.ckplayer-ckplayer .ck-main .ck-tip .ck-triangle{ + width: 0px; + height: 0px; +} +.ckplayer-ckplayer .ck-main .ck-tip .ck-triangle-auto{ + border-left: 8px solid transparent; + border-top: 8px solid rgba(0, 0, 0,.6); + border-right: 8px solid transparent; + margin: auto; +} +.ckplayer-ckplayer .ck-main .ck-tip .ck-triangle-left{ + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-left: 8px solid rgba(0, 0, 0,.6); + float: left; + margin-top: 10px; +} +.ckplayer-ckplayer .ck-main .ck-preview{ + position: absolute; + z-index: 210; + width: 100%; + left:0; + bottom: 64px; + overflow: hidden; + display: none; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-preview{ + bottom: 86px; +} +.ckplayer-ckplayer .ck-main .ck-preview-load-img{ + position: absolute; + z-index: 210; + top:110%; +} +.ckplayer-ckplayer .ck-main .ck-preview .ck-preview-bg{ + position: absolute; + z-index: 1; + top:0; + float: left; + transition: .2s; +} +.ckplayer-ckplayer .ck-main .ck-preview .ck-preview-bg .ck-preview-img{ + background-repeat: no-repeat ; + float: left; +} +.ckplayer-ckplayer .ck-main .ck-preview .ck-preview-frame{ + position: absolute; + z-index: 2; + top:0; + left:-1000px; + border:4px solid #0078ff; + box-sizing:content-box; + -moz-box-sizing:content-box; /* Firefox */ + -webkit-box-sizing:content-box; /* Safari */ +} +.ckplayer-ckplayer .ck-main .ck-prompt-words{ + position: absolute; + z-index: 220; + width: 213px; + line-height: 23px; + font-size: 14px; + color: #FFF; + background: rgba(0, 0, 0,.6); + overflow: hidden; + display: none; + margin-bottom: 10px; + border-radius: 3px; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: .2s; + animation-duration: .2s; + -webkit-animation-name: ck-bounceIn; + animation-name: ck-bounceIn; +} +.ckplayer-ckplayer .ck-main .ck-prompt-words .ck-prompt-content{ + padding: 5px; +} +.ckplayer-ckplayer .ck-main .ck-layer{ + position: absolute; + z-index: 101; +} +.ckplayer-ckplayer .ck-main .ck-tempTime{ + position: absolute; + z-index: 20; + left:10px; + bottom: 5px; + display: none; + font-size: 14px; + line-height: 28px; + color: #FFF; +} +/*关于*/ +.ckplayer-ckplayer .ck-main .ck-about{ + position: absolute; + z-index: 200; + width: 50%; + max-width: 600px; + min-width: 400px; + left: 1rem; + top: 1rem; + background: rgba(0,0,0,.6); + padding: 1rem 0; + display: none; +} +.ckplayer-ckplayer .ck-main .ck-about ul{ + padding: 0; + margin: 0; +} +.ckplayer-ckplayer .ck-main .ck-about ul li{ + list-style:none; + color: #FFF; + font-size: 12px; + line-height: 18px; + height: 18px; + padding: 0; + margin: 0; +} +.ckplayer-ckplayer .ck-main .ck-about ul li .ck-about-title{ + width: 100px; + text-align: right; + float: left; + padding-right: .5rem; +} +.ckplayer-ckplayer .ck-main .ck-about ul li .ck-about-content{ + width: auto; + float: left; +} +.ckplayer-ckplayer .ck-main .ck-about .ck-about-bar{ + position: absolute; + z-index: 1; + top: 0; + right: 0; + width: 96px; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-about .ck-about-bar{ + width: 140px; +} +.ckplayer-ckplayer .ck-main .ck-about .ck-about-bar .ck-btn-about-copy{ + background-position:-1632px 0; +} +.ckplayer-ckplayer .ck-main .ck-about .ck-about-bar .ck-btn-about-copy:hover{ + background-position:-1680px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-about .ck-about-bar .ck-btn-about-copy{ + background-position:-2380px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-about .ck-about-bar .ck-btn-about-copy:hover{ + background-position:-2450px 0; +} +.ckplayer-ckplayer .ck-main .ck-about .ck-about-bar .ck-btn-about-close{ + background-position:-1728px 0; +} +.ckplayer-ckplayer .ck-main .ck-about .ck-about-bar .ck-btn-about-close:hover{ + background-position:-1776px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-about .ck-about-bar .ck-btn-about-close{ + background-position:-2520px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-about .ck-about-bar .ck-btn-about-close:hover{ + background-position:-2590px 0; +} +/*截图显示容器*/ +.ckplayer-ckplayer .ck-main .ck-screenshot{ + position: absolute; + z-index: 220; + width: auto; + height: 144px; + margin: auto !important; + top: 0; + bottom: 0; + right: 55px; + display: none; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-screenshot{ + height: 210px; + right: 77px; +} +.ckplayer-ckplayer .ck-main .ck-screenshot .ck-screenshot-img{ + position: absolute; + z-index: 1; + width: 100%; + height: 100%; +} +.ckplayer-ckplayer .ck-main .ck-screenshot .ck-screenshot-img img{ + height: 100%; +} +.ckplayer-ckplayer .ck-main .ck-screenshot .ck-screenshot-bar{ + position: absolute; + z-index: 1; + width: 100%; + height: 36px; + bottom: 5px; + text-align: center; +} +.ckplayer-ckplayer .ck-main .ck-screenshot .ck-screenshot-bar .ck-screenshot-btn{ + display: inline-block; + overflow: hidden; + border: 0px solid transparent; + border-radius: 5px; + vertical-align: middle; + text-align: center; + text-decoration: none; + white-space: nowrap; + font-size: 14px; + line-height: 30px; + padding: 0px 15px; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + color: #fff; + margin: 0 5px; +} +.ckplayer-ckplayer .ck-main .ck-screenshot .ck-screenshot-bar .ck-screenshot-btn:hover{ + color: #FFFF00; +} +.ckplayer-ckplayer .ck-main .ck-screenshot .ck-screenshot-bar .ck-screenshot-btn:focus{ + outline:0; +} +.ckplayer-ckplayer .ck-main .ck-screenshot .ck-screenshot-bar .ck-screenshot-down{ + background-color: #007bff; +} +.ckplayer-ckplayer .ck-main .ck-screenshot .ck-screenshot-bar .ck-screenshot-close{ + background-color: #505050; + color: #fff; +} +/*广告*/ +.ckplayer-ckplayer .ck-main .ck-yytf{ + position: absolute; + z-index: 800; + width: 100%; + height: 100%; + left: 0px; + top: 0px; +} +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-front-link{ + width: 100%; + height: 100%; + display: none; + cursor: pointer; +} +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-front-picture{ + width: 100%; + height: 100%; + background: #000; + display: none; + text-align: center; + line-height: 100%; +} +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-front-picture img{ + max-width: 100%; + max-height: 100%; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; +} +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-top{ + position: absolute; + z-index: 3; + top: 10px; + right: 10px; +} + +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-top div{ + float: right; + margin-left: 10px; + font-size: 14px; + border-radius: 15px; + background: rgba(0,0,0,.6); + padding: 0px 10px; + line-height: 30px; + height: 30px; + color: #FFF; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-yytf .ck-yytf-top div{ + font-size: 18px; + border-radius: 20px; + line-height: 40px; + height: 40px; +} +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-top .ck-yytf-closetime{ + display: none; +} +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-top .ck-yytf-closead{ + cursor: pointer; + display: none; +} + +/*显示广告时的底部内容*/ +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-bottom{ + position: absolute; + z-index: 3; + bottom: 10px; + right: 10px; +} +/*显示广告时的底部按钮-共用*/ +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-bottom .ck-yytf-btn{ + background-color: rgba(0,0,0,.6); + background-image: url(images/ckplayer_ixigua.png); + background-size: auto 100%; + border: none; + outline: none; + width: 30px; + height: 30px; + cursor: pointer; + background-repeat: no-repeat; + border-radius: 50%; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-yytf .ck-yytf-bottom .ck-yytf-btn{ + width: 40px; + height: 40px; +} +/*显示广告时的静音按钮*/ +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-bottom .ck-yytf-mutedandexit{ + float: right; + width: 30px; + height: 30px; + margin-left: 10px; + overflow: hidden; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-yytf .ck-yytf-bottom .ck-yytf-mutedandexit{ + width: 40px; + height: 40px; +} +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-bottom .ck-yytf-mutedandexit .ck-yytf-mutedandexit-muted{ + background-position:-180px 0; +} +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-bottom .ck-yytf-mutedandexit .ck-yytf-mutedandexit-muted:hover{ + background-position:-210px 0; +} +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-bottom .ck-yytf-mutedandexit .ck-yytf-mutedandexit-exitmuted{ + background-position:-240px 0; +} +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-bottom .ck-yytf-mutedandexit .ck-yytf-mutedandexit-exitmuted:hover{ + background-position:-270px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-yytf .ck-yytf-bottom .ck-yytf-mutedandexit .ck-yytf-mutedandexit-muted{ + background-position:-240px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-yytf .ck-yytf-bottom .ck-yytf-mutedandexit .ck-yytf-mutedandexit-muted:hover{ + background-position:-280px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-yytf .ck-yytf-bottom .ck-yytf-mutedandexit .ck-yytf-mutedandexit-exitmuted{ + background-position:-320px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-yytf .ck-yytf-bottom .ck-yytf-mutedandexit .ck-yytf-mutedandexit-exitmuted:hover{ + background-position:-360px 0; +} +/*显示广告时的全屏按钮*/ +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-bottom .ck-yytf-fullandexit{ + float: right; + width: 30px; + height: 30px; + margin-left: 10px; + overflow: hidden; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-yytf .ck-yytf-bottom .ck-yytf-fullandexit{ + width: 40px; + height: 40px; +} +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-bottom .ck-yytf-fullandexit .ck-yytf-fullandexit-full{ + background-position:-300px 0; +} +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-bottom .ck-yytf-fullandexit .ck-yytf-fullandexit-full:hover{ + background-position:-330px 0; +} +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-bottom .ck-yytf-fullandexit .ck-yytf-fullandexit-exitfull{ + background-position:-360px 0; +} +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-bottom .ck-yytf-fullandexit .ck-yytf-fullandexit-exitfull:hover{ + background-position:-390px 0; +} + +.ckplayer-ckplayer .ck-main.ck-main-full .ck-yytf .ck-yytf-bottom .ck-yytf-fullandexit .ck-yytf-fullandexit-full{ + background-position:-400px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-yytf .ck-yytf-bottom .ck-yytf-fullandexit .ck-yytf-fullandexit-full:hover{ + background-position:-440px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-yytf .ck-yytf-bottom .ck-yytf-fullandexit .ck-yytf-fullandexit-exitfull{ + background-position:-480px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-yytf .ck-yytf-bottom .ck-yytf-fullandexit .ck-yytf-fullandexit-exitfull:hover{ + background-position:-520px 0; +} +/*广告查看详情按钮*/ +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-bottom .ck-yytf-details{ + float: right; + font-size: 14px; + border-radius: 15px; + background: rgba(0,0,0,.6); + padding: 0 10px; + color: #FFF; + line-height: 30px; + height: 30px; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-yytf .ck-yytf-bottom .ck-yytf-details{ + font-size: 18px; + border-radius: 20px; + line-height: 40px; + height: 40px; +} +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-bottom .ck-yytf-details a{ + color: #FFF; + text-decoration: none; +} +/*暂停广告容器*/ +.ckplayer-ckplayer .ck-main .ck-pause-yytf{ + display: none; + position:absolute; + z-index: 800; + max-width: 100%; + max-height: 100%; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; +} +.ckplayer-ckplayer .ck-main .ck-pause-yytf img{ + max-width: 100%; + max-height: 100%; +} +.ckplayer-ckplayer .ck-main .ck-pause-close{ + position:absolute; + z-index: 1; + right: -15px; + top:-15px; + width: 30px; + height: 30px; + background-color: transparent; + background-image: url(images/adclose.png); + border: none; + outline: none; + cursor: pointer; + background-repeat: no-repeat ; +} +.ckplayer-ckplayer .ck-main .ck-pause-close:hover{ + background-position:-30px 0; +} +/*右键菜单*/ +.ckplayer-ckplayer-menu{ + width:120px; + background: rgba(0,0,0,.8); + position: absolute; + z-index: 9000; + font-size:14px ; + border: 1px #000 solid; + display: none; + border-radius: 5px; +} +.ckplayer-ckplayer-menu .ck-li{ + color: #adadad; + line-height: 35px; + padding: 0 0 0 5px; +} +.ckplayer-ckplayer-menu .ck-li a{ + color: #FFF; + text-decoration: none; +} +.ckplayer-ckplayer-menu .ck-underline{ + border-bottom: 1px #000 solid; +} +/*控制栏*/ +.ckplayer-ckplayer .ck-main .ck-bar{ + position:absolute; + z-index: 260; + left:0px; + bottom:0px; + width: 100%; + height: 48px; + background: rgba(0,0,0,.3); + transition: 0.2s; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar{ + height: 70px; +} +.ckplayer-ckplayer .ck-main .ck-bar.ck-bar-out{ + bottom: -50px; + transition: 0.2s; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar.ck-bar-out{ + bottom: -80px; + transition: 0.2s; +} + +/*按钮公用样式*/ +.ckplayer-ckplayer .ck-main .ck-bar-btn{ + background-color: transparent; + background-image: url(images/ckplayer_ixigua.48.png); + background-size: auto 100%; + border: none; + outline: none; + width: 48px; + height: 48px; + cursor: pointer; + background-repeat: no-repeat ; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar-btn{ + background-image: url(images/ckplayer_ixigua.png); + width: 70px; + height: 70px; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-btn:hover{ + background-size:auto 100%; +} + +/*播放暂停按钮组*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-playandpause{ + float: left; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-playandpause .ck-btn-play{ + background-position:0px top; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-playandpause .ck-btn-play:hover{ + background-position:-48px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-playandpause .ck-btn-play:hover{ + background-position:-70px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-playandpause .ck-btn-pause{ + background-position:-96px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-playandpause .ck-btn-pause{ + background-position:-140px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-playandpause .ck-btn-pause:hover{ + background-position:-144px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-playandpause .ck-btn-pause:hover{ + background-position:-210px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-playandpause .ck-btn-refresh{ + background-position:-192px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-playandpause .ck-btn-refresh{ + background-position:-280px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-playandpause .ck-btn-refresh:hover{ + background-position:-240px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-playandpause .ck-btn-refresh:hover{ + background-position:-350px 0; +} + +/*返回播放按钮*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-btn-backlive{ + float: left; + font-size: 16px; + line-height: 28px; + border-radius: 3px; + margin: 10px; + border: 0px; + background: rgba(3,60,146,.5); + color: #FFF; + cursor: pointer; + padding: 0 8px; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-btn-backlive{ + font-size: 18px; + line-height: 36px; + margin: 17px 10px; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-btn-backlive:hover{ + background: rgba(3,60,146,.9); +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-btn-backlive:focus{ + outline:0; + background: rgba(3,60,146,.6); +} +/*静音取消静音按钮组*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-volumebox .ck-btn-muted{ + background-position:-288px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-volumebox .ck-btn-muted{ + background-position:-420px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-volumebox .ck-btn-muted:hover{ + background-position:-336px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-volumebox .ck-btn-muted:hover{ + background-position:-490px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-volumebox .ck-btn-exitmuted{ + background-position:-384px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-volumebox .ck-btn-exitmuted{ + background-position:-560px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-volumebox .ck-btn-exitmuted:hover{ + background-position:-432px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-volumebox .ck-btn-exitmuted:hover{ + background-position:-630px 0; +} + +/*全屏按钮组*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-fullandexit{ + float: right; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-fullandexit .ck-btn-full{ + background-position:-480px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-fullandexit .ck-btn-full{ + background-position:-700px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-fullandexit .ck-btn-full:hover{ + background-position:-528px 0; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: .5s; + animation-duration: .5s; + -webkit-animation-name: ck-button-hover; + animation-name: ck-button-hover; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-fullandexit .ck-btn-full:hover{ + background-position:-770px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-fullandexit .ck-btn-exitfull{ + background-position:-672px 0; + display: none; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-fullandexit .ck-btn-exitfull{ + background-position:-840px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-fullandexit .ck-btn-exitfull:hover{ + background-position:-720px 0; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: .5s; + animation-duration: .5s; + -webkit-animation-name: ck-button-hover; + animation-name: ck-button-hover; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-fullandexit .ck-btn-exitfull:hover{ + background-position:-910px 0; +} + +/*网页全屏按钮组*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-webfullandexit{ + float: right; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-webfullandexit .ck-btn-webfull{ + background-position:-768px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-webfullandexit .ck-btn-webfull{ + background-position:-1120px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-webfullandexit .ck-btn-webfull:hover{ + background-position:-816px 0; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: .5s; + animation-duration: .5s; + -webkit-animation-name: ck-button-hover; + animation-name: ck-button-hover; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-webfullandexit .ck-btn-webfull:hover{ + background-position:-1190px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-webfullandexit .ck-btn-exitwebfull{ + background-position:-864px 0; + display: none; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-webfullandexit .ck-btn-exitwebfull{ + background-position:-1260px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-webfullandexit .ck-btn-exitwebfull:hover{ + background-position:-912px 0; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: .5s; + animation-duration: .5s; + -webkit-animation-name: ck-button-hover; + animation-name: ck-button-hover; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-webfullandexit .ck-btn-exitwebfull:hover{ + background-position:-1330px 0; +} + +/*剧场模式按钮组*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-theatreandexit{ + float: right; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-theatreandexit .ck-btn-theatre{ + background-position:-960px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-theatreandexit .ck-btn-theatre{ + background-position:-1400px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-theatreandexit .ck-btn-theatre:hover{ + background-position:-1008px 0; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: .5s; + animation-duration: .5s; + -webkit-animation-name: ck-button-hover-x; + animation-name: ck-button-hover-x; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-theatreandexit .ck-btn-theatre:hover{ + background-position:-1470px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-theatreandexit .ck-btn-exittheatre{ + background-position:-1056px 0; + display: none; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-theatreandexit .ck-btn-exittheatre{ + background-position:-1540px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-theatreandexit .ck-btn-exittheatre:hover{ + background-position:-1104px 0; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: .5s; + animation-duration: .5s; + -webkit-animation-name: ck-button-hover-x; + animation-name: ck-button-hover-x; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-theatreandexit .ck-btn-exittheatre:hover{ + background-position:-1610px 0; +} +/*播放速度*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-playbackrate-box{ + float: right; + height: 48px; + line-height: 48px; + position: relative; + cursor: pointer; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-playbackrate-box{ + height: 70px; + line-height: 70px; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-playbackrate-box .ck-bar-playbackrate{ + height: 100%; + padding: 0 10px; + white-space:nowrap; + font-size: 16px; + color: #cfcccc; + -moz-user-select:none; /*火狐*/ + -webkit-user-select:none; /*webkit浏览器*/ + -ms-user-select:none; /*IE10*/ + -khtml-user-select:none; /*早期浏览器*/ + user-select:none; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-playbackrate-box .ck-bar-playbackrate{ + font-size: 18px; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-playbackrate-box .ck-bar-playbackrate:hover{ + color: #FFF; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-playbackrate-box .ck-bar-playbackrate-bg-box { + width: auto; + height: auto; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-playbackrate-box:hover .ck-bar-playbackrate-bg-box { + display: block; +} +/*字幕*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-track-box{ + float: right; + height: 48px; + line-height: 48px; + position: relative; + cursor: pointer; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-track-box{ + height: 70px; + line-height: 70px; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-track-box .ck-bar-track{ + height: 100%; + padding: 0 10px; + white-space:nowrap; + font-size: 16px; + color: #cfcccc; + -moz-user-select:none; /*火狐*/ + -webkit-user-select:none; /*webkit浏览器*/ + -ms-user-select:none; /*IE10*/ + -khtml-user-select:none; /*早期浏览器*/ + user-select:none; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-track-box .ck-bar-track{ + font-size: 18px; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-track-box .ck-bar-track:hover{ + color: #FFF; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-track-box .ck-bar-track-bg-box { + width: auto; + height: auto; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-track-box:hover .ck-bar-track-bg-box { + display: block; +} +/*清晰度*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-definition-box{ + float: right; + height: 48px; + line-height: 48px; + position: relative; + cursor: pointer; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-definition-box{ + height: 70px; + line-height: 70px; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-definition-box .ck-bar-definition{ + height: 100%; + padding: 0 10px; + white-space:nowrap; + font-size: 16px; + color: #cfcccc; + -moz-user-select:none; /*火狐*/ + -webkit-user-select:none; /*webkit浏览器*/ + -ms-user-select:none; /*IE10*/ + -khtml-user-select:none; /*早期浏览器*/ + user-select:none; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-definition-box .ck-bar-definition{ + font-size: 18px; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-definition-box .ck-bar-definition:hover{ + color: #FFF; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-definition-box .ck-bar-definition-bg-box { + width: auto; + height: auto; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-definition-box:hover .ck-bar-definition-bg-box { + display: block; +} +/*列表切换*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-list-bg-box { + background: rgba(0,0,0,.001); + position: absolute; + z-index: 1; + bottom: 46px; + display: none; + -webkit-animation-duration: .2s; + animation-duration: .2s; + -webkit-animation-name: ck-bounceIn; + animation-name: ck-bounceIn; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-list-bg-box { + bottom: 68px; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-list-bg-box .ck-list-bg{ + background: rgba(0,0,0,.6); + float: left; + border-radius: 5px; + padding: 10px; + margin-bottom: 10px; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-list-bg-box .ck-list-bg .ck-list-p{ + width: 100%; + float: left; + line-height: 35px; + color: #cfcccc; + text-align: center; + font-size: 14px; + background-color: rgba(0,0,0,0); + border: 0px; + white-space:nowrap; + cursor: pointer; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-list-bg-box .ck-list-bg .ck-list-p:hover{ + color: #FFF; + font-size: 16px; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-list-bg-box .ck-list-bg .ck-list-p:hover{ + font-size: 20px; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-list-bg-box .ck-list-bg .ck-list-p{ + font-size: 18px; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-list-bg-box .ck-list-bg .ck-list-p-focus{ + color: #FF0302; +} +/*下一集按钮*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-next{ + float: left; + background-position:-672px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-next{ + background-position:-980px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-next:hover{ + background-position:-720px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-next:hover{ + background-position:-1050px 0; +} +/*进度栏*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress{ + width: 100%; + position:absolute; + z-index: 1; + height: 12px; + top:-11px; + transition: 0.2s; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress .ck-bar-progress-bg{ + width: 100%; + background: rgba(255,255,255,.3); + margin-top: 2px; + overflow: hidden; + height: 10px; + transition: .2s; + cursor: pointer; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress .ck-bar-progress-bg .ck-bar-progress-load{ + float: left; + width: 0px; + background: rgba(169,169,169,.7); + height: 10px; + transition: .2s; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress .ck-bar-progress-bg .ck-bar-progress-play{ + width: 0px; + background: #e80101; + position: absolute; + z-index: 1; + height: 10px; + transition: .2s; + cursor: pointer; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress .ck-bar-progress-bg .ck-bar-progress-mouseline{ + width: 3px; + background: rgba(255,255,255,.6); + position: absolute; + z-index: 2; + display: none; + height: 10px; + cursor: pointer; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress .ck-bar-progress-bg .ck-bar-progress-prompt{ + background: #FFF; + position: absolute; + z-index: 3; + border-radius: 50%; + width: 10px; + height: 10px; + top:2px; + transition: .2s; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress .ck-bar-progress-slider{ + border-radius: 50%; + overflow: hidden; + position: relative; + float: left; + z-index: 4; + left: 0px; + cursor: pointer; + width: 12px; + height: 12px; + top: -11px; + background: #FFF; + box-shadow: 0px 0px 0px 4px rgba(255,255,255,.5); +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress .ck-bar-progress-slider:hover{ + background: #e80101; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress .ck-bar-progress-bg:hover .ck-bar-progress-mouseline{ + display: block; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress.ck-bar-progress-out{ + height: 2px; + top:-2px; + transition: .2s; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress.ck-bar-progress-out .ck-bar-progress-bg,.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress.ck-bar-progress-out .ck-bar-progress-load,.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress.ck-bar-progress-out .ck-bar-progress-bg .ck-bar-progress-play{ + height: 2px; + transition: .2s; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress.ck-bar-progress-out .ck-bar-progress-slider{ + width: 12px; + height: 2px; + top: -2px; + box-shadow: 0px 0px 0px 0px rgba(255,255,255,0); + background: rgba(232,1,1,0); + transition: .2s; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress.ck-bar-progress-out .ck-bar-progress-bg .ck-bar-progress-prompt{ + height: 2px; + border-radius: 0; + transition: .2s; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress.ck-bar-progress-slider-move .ck-bar-progress-play,.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress.ck-bar-progress-slider-move .ck-bar-progress-slider{ + transition: 0s; +} + +/*音量调节栏*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-volumebox{ + float: right; + width: 48px; + overflow-x: hidden; +} +/*音量调节栏*/ +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-volumebox{ + width: 70px; +} +/*默认状态-音量调节总外框*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-volumebox .ck-bar-volume{ + width: 48px; + height: 215px; + background: rgba(0,0,0,.01); + position: absolute; + z-index: 1; + bottom: 46px; + display: none; + overflow: hidden; +} +/*全屏状态-音量调节总外框*/ +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-volumebox .ck-bar-volume{ + width: 70px; + bottom: 68px; +} +/*默认状态-音量调节总外框-鼠标经过时样式*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-volumebox:hover .ck-bar-volume{ + display: block; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: .1s; + animation-duration: .1s; + -webkit-animation-name: ck-bounceIn; + animation-name: ck-bounceIn; +} +/*共用状态-音量调节内部外框*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-volumebox .ck-bar-volumex{ + width: 100%; + height: 200px; + float: left; + background: rgba(0,0,0,.8); + border-radius: 5px; +} +/*共用状态-音量调节顶部文字*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-volumebox .ck-bar-volume .ck-bar-volume-txt{ + width: 100%; + height: 40px; + line-height: 40px; + color: #FFF; + text-align: center; + font-size: 1rem; + float: left; + overflow: hidden; + -moz-user-select:none; /*火狐*/ + -webkit-user-select:none; /*webkit浏览器*/ + -ms-user-select:none; /*IE10*/ + -khtml-user-select:none; /*早期浏览器*/ + user-select:none; +} +/*共用状态-音量调节背景色*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-volumebox .ck-bar-volume .ck-bar-volume-bg{ + width: 8px; + height: 140px; + background: #808080; + border-radius: 3px; + overflow: hidden; + cursor: pointer; + margin: auto; +} +/*共用状态-音量调节前景色*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-volumebox .ck-bar-volume .ck-bar-volume-bg .ck-bar-volume-pp{ + width: 8px; + height: 140px; + background: #e80101; + margin-top: 140px; +} +/*共用状态-音量调节拖动小按钮*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-volumebox .ck-bar-volume .ck-bar-volume-slider{ + width: 10px; + height: 10px; + background: #FFF; + border-radius: 50%; + overflow: hidden; + box-shadow: 0px 0px 0px 8px rgba(255,255,255,.5); + position: absolute; + z-index: 1; + top: 0px; + left: 19px; + cursor: pointer; +} +/*全屏状态-音量调节拖动小按钮*/ +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-volumebox .ck-bar-volume .ck-bar-volume-slider{ + left: 30px; +} +/*默认状态-显示时间*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-time{ + float: left; + line-height: 48px; + font-size: 16px; + color: #cfcccc; + -moz-user-select:none; /*火狐*/ + -webkit-user-select:none; /*webkit浏览器*/ + -ms-user-select:none; /*IE10*/ + -khtml-user-select:none; /*早期浏览器*/ + user-select:none; +} +/*全屏状态-显示时间*/ +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-time{ + float: left; + line-height: 70px; + font-size: 18px; + color: #cfcccc; +} +/*右侧控制栏*/ +.ckplayer-ckplayer .ck-main .ck-right-bar{ + position: absolute; + z-index: 260; + top: 0; + right: 2px; + bottom: 0; + margin: auto !important; + width: 48px; + height: 144px; + background: rgba(0,0,0,.3); + border-radius: 5px; + transition: .2s; +} +.ckplayer-ckplayer .ck-main .ck-right-bar-hide{ + right: -48px; + transition: .2s; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-right-bar{ + width: 70px; + height: 210px; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-right-bar-hide{ + right: -70px; + transition: .2s; +} +/*截图按钮*/ +.ckplayer-ckplayer .ck-main .ck-right-bar .ck-btn-screenshot{ + float: left; + background-position:-1536px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-right-bar .ck-btn-screenshot{ + background-position:-2240px 0; +} +.ckplayer-ckplayer .ck-main .ck-right-bar .ck-btn-screenshot:hover{ + background-position:-1584px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-right-bar .ck-btn-screenshot:hover{ + background-position:-2310px 0; +} +/*小窗口按钮组*/ +.ckplayer-ckplayer .ck-main .ck-right-bar .ck-right-bar-smallwindows{ + float: left; +} +.ckplayer-ckplayer .ck-main .ck-right-bar .ck-right-bar-smallwindows button{ + float: left; +} +.ckplayer-ckplayer .ck-main .ck-right-bar .ck-right-bar-smallwindows .ck-btn-smallwindows-open{ + background-position:-1248px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-right-bar .ck-right-bar-smallwindows .ck-btn-smallwindows-open{ + background-position:-1820px 0; +} +.ckplayer-ckplayer .ck-main .ck-right-bar .ck-right-bar-smallwindows .ck-btn-smallwindows-open:hover{ + background-position:-1296px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-right-bar .ck-right-bar-smallwindows .ck-btn-smallwindows-open:hover{ + background-position:-1890px 0; +} +.ckplayer-ckplayer .ck-main .ck-right-bar .ck-right-bar-smallwindows .ck-btn-smallwindows-close{ + background-position:-1152px 0; + display: none; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-right-bar .ck-right-bar-smallwindows .ck-btn-smallwindows-close{ + background-position:-1680px 0; +} +.ckplayer-ckplayer .ck-main .ck-right-bar .ck-right-bar-smallwindows .ck-btn-smallwindows-close:hover{ + background-position:-1200px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-right-bar .ck-right-bar-smallwindows .ck-btn-smallwindows-close:hover{ + background-position:-1750px 0; +} +/*循环按钮组*/ +.ckplayer-ckplayer .ck-main .ck-right-bar .ck-right-bar-loop{ + float: left; +} +.ckplayer-ckplayer .ck-main .ck-right-bar .ck-right-bar-loop .ck-btn-loop-open{ + background-position:-1440px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-right-bar .ck-right-bar-loop .ck-btn-loop-open{ + background-position:-2100px 0; +} +.ckplayer-ckplayer .ck-main .ck-right-bar .ck-right-bar-loop .ck-btn-loop-open:hover{ + background-position:-1488px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-right-bar .ck-right-bar-loop .ck-btn-loop-open:hover{ + background-position:-2170px 0; +} +.ckplayer-ckplayer .ck-main .ck-right-bar .ck-right-bar-loop .ck-btn-loop-close{ + background-position:-1344px 0; + display: none; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-right-bar .ck-right-bar-loop .ck-btn-loop-close{ + background-position:-1960px 0; +} +.ckplayer-ckplayer .ck-main .ck-right-bar .ck-right-bar-loop .ck-btn-loop-close:hover{ + background-position:-1392px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-right-bar .ck-right-bar-loop .ck-btn-loop-close:hover{ + background-position:-2030px 0; +} +/*顶部显示栏*/ +.ckplayer-ckplayer .ck-main .ck-top-bar{ + position: absolute; + z-index: 260; + top: -36px; + width: 100%; + height: 36px; + background: rgba(0,0,0,.3); + transition: .2s; +} +.ckplayer-ckplayer .ck-main .ck-top-bar-hide{ + top: -36px; + transition: .2s; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-top-bar{ + top: 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-top-bar-hide{ + top: -36px; + transition: .2s; +} +.ckplayer-ckplayer .ck-main .ck-top-bar .ck-top-bar-zoom{ + position: absolute; + z-index: 260; +} +.ckplayer-ckplayer .ck-main .ck-top-bar .ck-top-bar-zoom .ck-top-bar-zoom-container{ + float: left; + margin-left: 10px; + margin-top: 9px; + cursor: pointer; +} +.ckplayer-ckplayer .ck-main .ck-top-bar .ck-top-bar-zoom .ck-top-bar-zoom-container .ck-top-bar-zoom-left{ + float: left; + width: 20px; + height: 18px; + border: 1px solid #FFF; + box-sizing:content-box; + -moz-box-sizing:content-box; /* Firefox */ + -webkit-box-sizing:content-box; /* Safari */ +} +.ckplayer-ckplayer .ck-main .ck-top-bar .ck-top-bar-zoom .ck-top-bar-zoom-container:hover .ck-top-bar-zoom-left, +.ckplayer-ckplayer .ck-main .ck-top-bar .ck-top-bar-zoom .ck-top-bar-zoom-container.ck-top-bar-zoom-container-focus .ck-top-bar-zoom-left{ + border-color: #e80101; +} +.ckplayer-ckplayer .ck-main .ck-top-bar .ck-top-bar-zoom .ck-top-bar-zoom-container:hover .ck-top-bar-zoom-left div, +.ckplayer-ckplayer .ck-main .ck-top-bar .ck-top-bar-zoom .ck-top-bar-zoom-container.ck-top-bar-zoom-container-focus .ck-top-bar-zoom-left div{ + background: #e80101; +} +.ckplayer-ckplayer .ck-main .ck-top-bar .ck-top-bar-zoom .ck-top-bar-zoom-container .ck-top-bar-zoom-right{ + float: left; + font-size: 14px; + color: #FFF; + padding-left: 5px; +} +.ckplayer-ckplayer .ck-main .ck-top-bar .ck-top-bar-zoom .ck-top-bar-zoom-container:hover .ck-top-bar-zoom-right, +.ckplayer-ckplayer .ck-main .ck-top-bar .ck-top-bar-zoom .ck-top-bar-zoom-container.ck-top-bar-zoom-container-focus .ck-top-bar-zoom-right{ + color: #e80101; +} +.ckplayer-ckplayer .ck-main .ck-top-bar .ck-top-bar-zoom .ck-top-bar-zoom-container .ck-top-bar-zoom-left .ck-top-bar-zoom-button-50{ + width: 50%; + height: 50%; + background: #FFF; + margin: 4.5px 25%; +} +.ckplayer-ckplayer .ck-main .ck-top-bar .ck-top-bar-zoom .ck-top-bar-zoom-container .ck-top-bar-zoom-left .ck-top-bar-zoom-button-75{ + width: 75%; + height: 50%; + background: #FFF; + margin: 4.5px 12.5%; +} +.ckplayer-ckplayer .ck-main .ck-top-bar .ck-top-bar-zoom .ck-top-bar-zoom-container .ck-top-bar-zoom-left .ck-top-bar-zoom-button-100{ + width: 100%; + height: 50%; + background: #FFF; + margin: 4.5px 0; +} +.ckplayer-ckplayer .ck-main .ck-top-bar .ck-top-bar-title{ + position: absolute; + z-index: 1; + top: 0px; + width: 100%; + height: 36px; + line-height: 36px; + text-align: center; + font-size: 18px; + color: #FFF; + -moz-user-select:none; /*火狐*/ + -webkit-user-select:none; /*webkit浏览器*/ + -ms-user-select:none; /*IE10*/ + -khtml-user-select:none; /*早期浏览器*/ + user-select:none; +} +.ckplayer-ckplayer .ck-main .ck-top-bar .ck-top-bar-time{ + float: right; + height: 36px; + line-height: 36px; + font-size: 14px; + color: #FFF; + padding: 0 1rem 0; + -moz-user-select:none; /*火狐*/ + -webkit-user-select:none; /*webkit浏览器*/ + -ms-user-select:none; /*IE10*/ + -khtml-user-select:none; /*早期浏览器*/ + user-select:none; +} +/*以下为缓动效果样式*/ +.ck-animate { + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: .3s; + animation-duration: .3s; +} +.ck-animate-bouncein { + -webkit-animation-name: ck-bounceIn; + animation-name: ck-bounceIn; +} + +@-webkit-keyframes ck-bounceIn { + 0% { + opacity: 0; + -webkit-transform: scale(.5); + transform: scale(.5) + } + 100% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } +} + +@keyframes ck-bounceIn { + 0% { + opacity: 0; + -webkit-transform: scale(.5); + -ms-transform: scale(.5); + transform: scale(.5); + } + 100% { + opacity: 1; + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } +} +.ck-animate-bounceout { + -webkit-animation-name: ck-bounceOut; + animation-name: ck-bounceOut; +} + +@-webkit-keyframes ck-bounceOut { + 0% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } + 100% { + opacity: 0; + -webkit-transform: scale(.5); + transform: scale(.5); + } +} + +@keyframes ck-bounceOut { + 0% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } + 100% { + opacity: 0; + -webkit-transform: scale(.5); + transform: scale(.5); + } +} + +.ck-animate-circle { + animation: ck-Circle 1s linear infinite; + -webkit-animation: ck-Circle 1s linear infinite +} + +@-webkit-keyframes ck-Circle { + 0% { + transform: rotate(0deg); + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg) + } + 25% { + transform: rotate(90deg); + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg) + } + 50% { + transform: rotate(180deg); + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg) + } + 75% { + transform: rotate(270deg); + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg) + } + 100% { + transform: rotate(360deg); + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg) + } +} + +@keyframes ck-Circle { + 0% { + transform: rotate(0deg); + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg) + } + 25% { + transform: rotate(90deg); + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg) + } + 50% { + transform: rotate(180deg); + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg) + } + 75% { + transform: rotate(270deg); + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg) + } + 100% { + transform: rotate(360deg); + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg) + } +} + +@-webkit-keyframes ck-button-hover { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + 50% { + -webkit-transform: scale(1.2); + transform: scale(1.2); + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + } +} + +@keyframes ck-button-hover { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + 50% { + -webkit-transform: scale(1.2); + transform: scale(1.2); + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + } +} + +@-webkit-keyframes ck-button-hover-x { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + 50% { + -webkit-transform: scale(1.2,1); + transform: scale(1.2,1); + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + } +} + +@keyframes ck-button-hover-x { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + 50% { + -webkit-transform: scale(1.2,1); + transform: scale(1.2,1); + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + } +} \ No newline at end of file diff --git a/public/ckplayer/css/ckplayer.red.css b/public/ckplayer/css/ckplayer.red.css new file mode 100644 index 0000000..fc804e3 --- /dev/null +++ b/public/ckplayer/css/ckplayer.red.css @@ -0,0 +1,1609 @@ +.ckplayer-error{ + position: fixed; + z-index: 9999999; + left: 10px; + bottom: 10px; + width: auto; + height: 38px; + line-height: 38px; + padding: 0 .85rem; + background: rgb(0,0,0,.9); + border-radius: .25rem; + color: #FFF; + font-size: 14px; + white-space: nowrap; +} +.ckplayer-ckplayer{ + width: 100%; + height: 100%; + float: left; + background: #000; + overflow: hidden; +} +.ckplayer-ckplayer .ck-main.ck-nocursor{ + cursor: none; +} +.ckplayer-ckplayer-smallwindow{ + position: fixed; + z-index: 9999999; + width: 420px; + max-width: 100%; + height: 266px; + right: 10px; + bottom: 10px; +} +.ckplayer-ckplayer .ck-main{ + width: 100%; + height: 100%; + overflow: hidden; + background: #000; + position: relative; +} +.ckplayer-ckplayer .ck-main .ck-video{ + width: 100%; + height: 100%; + overflow: hidden; + position:absolute; + z-index: 1; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; +} +.ckplayer-ckplayer .ck-main .ck-video video,.ckplayer-ckplayer .ck-main .ck-video canvas{ + width: 100%; + height: 100%; +} +.ckplayer-ckplayer .ck-main .ck-error{ + width: 100%; + height: 80px; + line-height: 35px; + text-align: center; + color: #FFF; + position:absolute; + z-index: 70; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; + overflow: hidden; +} +.ckplayer-ckplayer .ck-main .ck-logo{ + position:absolute; + right: 20px; + top:20px; + z-index: 400; +} +.ckplayer-ckplayer .ck-main .ck-loading{ + position:absolute; + top:0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + z-index: 80; + width: 80px; + height: 80px; + border-radius: 50%; + background: url(images/loading.png) no-repeat center center; + background-size: 100% 100%; + animation: ck-Circle 1.5s linear infinite; + -webkit-animation: ck-Circle 1.5s linear infinite +} +.ckplayer-ckplayer .ck-main .ck-center-play{ + background: url(images/play.png) no-repeat 70% center; + background-size:60% 60%; + border: 8px solid rgba(255,255,255,.3); + border-radius: 50%; + box-sizing:border-box; + -moz-box-sizing:border-box; /* Firefox */ + -webkit-box-sizing:border-box; /* Safari */ + width: 80px; + height: 80px; + position: absolute; + display: none; + z-index: 90; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; + cursor: pointer; + transition: .2s; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-center-play{ + width: 100px; + height: 100px; +} +.ckplayer-ckplayer .ck-main .ck-center-play:hover{ + width: 100px; + height: 100px; + transition: 0.2s; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-center-play:hover{ + width: 120px; + height: 120px; +} +.ckplayer-ckplayer .ck-main .ck-buffer{ + background: url(images/buffer.png) no-repeat center center; + background-size:100% 100%; + border-radius: 50%; + width: 60px; + height: 60px; + position: absolute; + z-index: 100; + top:0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + display: none; + animation: ck-Circle 1s linear infinite; + -webkit-animation: ck-Circle 1s linear infinite +} +.ckplayer-ckplayer .ck-main .ck-message{ + position: absolute; + z-index: 240; + left:5px; + bottom: 78px; + padding: 0 1rem; + line-height: 30px; + height: 30px; + width: auto; + min-width: 1px; + border-radius: .25rem; + background: rgba(0,0,0,.6); + font-size: 14px; + color: #FFF; + display: none; + white-space:nowrap; +} +.ckplayer-ckplayer .ck-main .ck-message-right{ + left:auto; + right: 5px; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-message{ + font-size: 18px; + bottom: 100px; +} +.ckplayer-ckplayer .ck-main .ck-tip{ + width: auto; + height: auto; + position: absolute; + z-index: 230; + display: none; + margin-bottom: 1px; +} +.ckplayer-ckplayer .ck-main .ck-tip .ck-content{ + width: auto; + height: auto; + white-space: nowrap; + min-width: 1px; + background: rgba(0,0,0,.6); + font-size: 14px; + color: #FFF; + line-height: 32px; + height: 32px; + padding: 0 15px; +} +.ckplayer-ckplayer .ck-main .ck-tip .ck-content-float-auto{ + border-radius: 5px; + margin: auto; +} +.ckplayer-ckplayer .ck-main .ck-tip .ck-content-float-left{ + border-radius: 5px; + float: left; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-tip .ck-content{ + font-size: 18px; +} +.ckplayer-ckplayer .ck-main .ck-tip .ck-triangle{ + width: 0px; + height: 0px; +} +.ckplayer-ckplayer .ck-main .ck-tip .ck-triangle-auto{ + border-left: 8px solid transparent; + border-top: 8px solid rgba(0, 0, 0,.6); + border-right: 8px solid transparent; + margin: auto; +} +.ckplayer-ckplayer .ck-main .ck-tip .ck-triangle-left{ + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-left: 8px solid rgba(0, 0, 0,.6); + float: left; + margin-top: 10px; +} +.ckplayer-ckplayer .ck-main .ck-preview{ + position: absolute; + z-index: 210; + width: 100%; + left:0; + bottom: 64px; + overflow: hidden; + display: none; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-preview{ + bottom: 86px; +} +.ckplayer-ckplayer .ck-main .ck-preview-load-img{ + position: absolute; + z-index: 210; + top:110%; +} +.ckplayer-ckplayer .ck-main .ck-preview .ck-preview-bg{ + position: absolute; + z-index: 1; + top:0; + float: left; + transition: .2s; +} +.ckplayer-ckplayer .ck-main .ck-preview .ck-preview-bg .ck-preview-img{ + background-repeat: no-repeat ; + float: left; +} +.ckplayer-ckplayer .ck-main .ck-preview .ck-preview-frame{ + position: absolute; + z-index: 2; + top:0; + left:-1000px; + border:4px solid #0078ff; + box-sizing:content-box; + -moz-box-sizing:content-box; /* Firefox */ + -webkit-box-sizing:content-box; /* Safari */ +} +.ckplayer-ckplayer .ck-main .ck-prompt-words{ + position: absolute; + z-index: 220; + width: 213px; + line-height: 23px; + font-size: 14px; + color: #FFF; + background: rgba(0, 0, 0,.6); + overflow: hidden; + display: none; + margin-bottom: 10px; + border-radius: 3px; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: .2s; + animation-duration: .2s; + -webkit-animation-name: ck-bounceIn; + animation-name: ck-bounceIn; +} +.ckplayer-ckplayer .ck-main .ck-prompt-words .ck-prompt-content{ + padding: 5px; +} +.ckplayer-ckplayer .ck-main .ck-layer{ + position: absolute; + z-index: 101; +} +.ckplayer-ckplayer .ck-main .ck-tempTime{ + position: absolute; + z-index: 20; + left:10px; + bottom: 5px; + display: none; + font-size: 14px; + line-height: 28px; + color: #FFF; +} +/*关于*/ +.ckplayer-ckplayer .ck-main .ck-about{ + position: absolute; + z-index: 200; + width: 50%; + max-width: 600px; + min-width: 400px; + left: 1rem; + top: 1rem; + background: rgba(0,0,0,.6); + padding: 1rem 0; + display: none; +} +.ckplayer-ckplayer .ck-main .ck-about ul{ + padding: 0; + margin: 0; +} +.ckplayer-ckplayer .ck-main .ck-about ul li{ + list-style:none; + color: #FFF; + font-size: 12px; + line-height: 18px; + height: 18px; + padding: 0; + margin: 0; +} +.ckplayer-ckplayer .ck-main .ck-about ul li .ck-about-title{ + width: 100px; + text-align: right; + float: left; + padding-right: .5rem; +} +.ckplayer-ckplayer .ck-main .ck-about ul li .ck-about-content{ + width: auto; + float: left; +} +.ckplayer-ckplayer .ck-main .ck-about .ck-about-bar{ + position: absolute; + z-index: 1; + top: 0; + right: 0; + width: 96px; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-about .ck-about-bar{ + width: 140px; +} +.ckplayer-ckplayer .ck-main .ck-about .ck-about-bar .ck-btn-about-copy{ + background-position:-1632px 0; +} +.ckplayer-ckplayer .ck-main .ck-about .ck-about-bar .ck-btn-about-copy:hover{ + background-position:-1680px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-about .ck-about-bar .ck-btn-about-copy{ + background-position:-2380px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-about .ck-about-bar .ck-btn-about-copy:hover{ + background-position:-2450px 0; +} +.ckplayer-ckplayer .ck-main .ck-about .ck-about-bar .ck-btn-about-close{ + background-position:-1728px 0; +} +.ckplayer-ckplayer .ck-main .ck-about .ck-about-bar .ck-btn-about-close:hover{ + background-position:-1776px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-about .ck-about-bar .ck-btn-about-close{ + background-position:-2520px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-about .ck-about-bar .ck-btn-about-close:hover{ + background-position:-2590px 0; +} +/*截图显示容器*/ +.ckplayer-ckplayer .ck-main .ck-screenshot{ + position: absolute; + z-index: 220; + width: auto; + height: 144px; + margin: auto !important; + top: 0; + bottom: 0; + right: 55px; + display: none; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-screenshot{ + height: 210px; + right: 77px; +} +.ckplayer-ckplayer .ck-main .ck-screenshot .ck-screenshot-img{ + position: absolute; + z-index: 1; + width: 100%; + height: 100%; +} +.ckplayer-ckplayer .ck-main .ck-screenshot .ck-screenshot-img img{ + height: 100%; +} +.ckplayer-ckplayer .ck-main .ck-screenshot .ck-screenshot-bar{ + position: absolute; + z-index: 1; + width: 100%; + height: 36px; + bottom: 5px; + text-align: center; +} +.ckplayer-ckplayer .ck-main .ck-screenshot .ck-screenshot-bar .ck-screenshot-btn{ + display: inline-block; + overflow: hidden; + border: 0px solid transparent; + border-radius: 5px; + vertical-align: middle; + text-align: center; + text-decoration: none; + white-space: nowrap; + font-size: 14px; + line-height: 30px; + padding: 0px 15px; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + color: #fff; + margin: 0 5px; +} +.ckplayer-ckplayer .ck-main .ck-screenshot .ck-screenshot-bar .ck-screenshot-btn:hover{ + color: #FFFF00; +} +.ckplayer-ckplayer .ck-main .ck-screenshot .ck-screenshot-bar .ck-screenshot-btn:focus{ + outline:0; +} +.ckplayer-ckplayer .ck-main .ck-screenshot .ck-screenshot-bar .ck-screenshot-down{ + background-color: #007bff; +} +.ckplayer-ckplayer .ck-main .ck-screenshot .ck-screenshot-bar .ck-screenshot-close{ + background-color: #505050; + color: #fff; +} +/*广告*/ +.ckplayer-ckplayer .ck-main .ck-yytf{ + position: absolute; + z-index: 800; + width: 100%; + height: 100%; + left: 0px; + top: 0px; +} +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-front-link{ + width: 100%; + height: 100%; + display: none; + cursor: pointer; +} +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-front-picture{ + width: 100%; + height: 100%; + background: #000; + display: none; + text-align: center; + line-height: 100%; +} +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-front-picture img{ + max-width: 100%; + max-height: 100%; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; +} +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-top{ + position: absolute; + z-index: 3; + top: 10px; + right: 10px; +} + +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-top div{ + float: right; + margin-left: 10px; + font-size: 14px; + border-radius: 15px; + background: rgba(0,0,0,.6); + padding: 0px 10px; + line-height: 30px; + height: 30px; + color: #FFF; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-yytf .ck-yytf-top div{ + font-size: 18px; + border-radius: 20px; + line-height: 40px; + height: 40px; +} +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-top .ck-yytf-closetime{ + display: none; +} +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-top .ck-yytf-closead{ + cursor: pointer; + display: none; +} + +/*显示广告时的底部内容*/ +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-bottom{ + position: absolute; + z-index: 3; + bottom: 10px; + right: 10px; +} +/*显示广告时的底部按钮-共用*/ +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-bottom .ck-yytf-btn{ + background-color: rgba(0,0,0,.6); + background-image: url(images/ckplayer_red.png); + background-size: auto 100%; + border: none; + outline: none; + width: 30px; + height: 30px; + cursor: pointer; + background-repeat: no-repeat; + border-radius: 50%; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-yytf .ck-yytf-bottom .ck-yytf-btn{ + width: 40px; + height: 40px; +} +/*显示广告时的静音按钮*/ +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-bottom .ck-yytf-mutedandexit{ + float: right; + width: 30px; + height: 30px; + margin-left: 10px; + overflow: hidden; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-yytf .ck-yytf-bottom .ck-yytf-mutedandexit{ + width: 40px; + height: 40px; +} +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-bottom .ck-yytf-mutedandexit .ck-yytf-mutedandexit-muted{ + background-position:-180px 0; +} +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-bottom .ck-yytf-mutedandexit .ck-yytf-mutedandexit-muted:hover{ + background-position:-210px 0; +} +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-bottom .ck-yytf-mutedandexit .ck-yytf-mutedandexit-exitmuted{ + background-position:-240px 0; +} +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-bottom .ck-yytf-mutedandexit .ck-yytf-mutedandexit-exitmuted:hover{ + background-position:-270px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-yytf .ck-yytf-bottom .ck-yytf-mutedandexit .ck-yytf-mutedandexit-muted{ + background-position:-240px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-yytf .ck-yytf-bottom .ck-yytf-mutedandexit .ck-yytf-mutedandexit-muted:hover{ + background-position:-280px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-yytf .ck-yytf-bottom .ck-yytf-mutedandexit .ck-yytf-mutedandexit-exitmuted{ + background-position:-320px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-yytf .ck-yytf-bottom .ck-yytf-mutedandexit .ck-yytf-mutedandexit-exitmuted:hover{ + background-position:-360px 0; +} +/*显示广告时的全屏按钮*/ +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-bottom .ck-yytf-fullandexit{ + float: right; + width: 30px; + height: 30px; + margin-left: 10px; + overflow: hidden; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-yytf .ck-yytf-bottom .ck-yytf-fullandexit{ + width: 40px; + height: 40px; +} +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-bottom .ck-yytf-fullandexit .ck-yytf-fullandexit-full{ + background-position:-300px 0; +} +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-bottom .ck-yytf-fullandexit .ck-yytf-fullandexit-full:hover{ + background-position:-330px 0; +} +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-bottom .ck-yytf-fullandexit .ck-yytf-fullandexit-exitfull{ + background-position:-360px 0; +} +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-bottom .ck-yytf-fullandexit .ck-yytf-fullandexit-exitfull:hover{ + background-position:-390px 0; +} + +.ckplayer-ckplayer .ck-main.ck-main-full .ck-yytf .ck-yytf-bottom .ck-yytf-fullandexit .ck-yytf-fullandexit-full{ + background-position:-400px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-yytf .ck-yytf-bottom .ck-yytf-fullandexit .ck-yytf-fullandexit-full:hover{ + background-position:-440px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-yytf .ck-yytf-bottom .ck-yytf-fullandexit .ck-yytf-fullandexit-exitfull{ + background-position:-480px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-yytf .ck-yytf-bottom .ck-yytf-fullandexit .ck-yytf-fullandexit-exitfull:hover{ + background-position:-520px 0; +} +/*广告查看详情按钮*/ +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-bottom .ck-yytf-details{ + float: right; + font-size: 14px; + border-radius: 15px; + background: rgba(0,0,0,.6); + padding: 0 10px; + color: #FFF; + line-height: 30px; + height: 30px; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-yytf .ck-yytf-bottom .ck-yytf-details{ + font-size: 18px; + border-radius: 20px; + line-height: 40px; + height: 40px; +} +.ckplayer-ckplayer .ck-main .ck-yytf .ck-yytf-bottom .ck-yytf-details a{ + color: #FFF; + text-decoration: none; +} +/*暂停广告容器*/ +.ckplayer-ckplayer .ck-main .ck-pause-yytf{ + display: none; + position:absolute; + z-index: 800; + max-width: 100%; + max-height: 100%; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; +} +.ckplayer-ckplayer .ck-main .ck-pause-yytf img{ + max-width: 100%; + max-height: 100%; +} +.ckplayer-ckplayer .ck-main .ck-pause-close{ + position:absolute; + z-index: 1; + right: -15px; + top:-15px; + width: 30px; + height: 30px; + background-color: transparent; + background-image: url(images/adclose.png); + border: none; + outline: none; + cursor: pointer; + background-repeat: no-repeat ; +} +.ckplayer-ckplayer .ck-main .ck-pause-close:hover{ + background-position:-30px 0; +} +/*右键菜单*/ +.ckplayer-ckplayer-menu{ + width:120px; + background: rgba(50,50,50,.6); + position: absolute; + z-index: 9000; + font-size:14px ; + border: 1px #000 solid; + display: none; +} +.ckplayer-ckplayer-menu .ck-li{ + color: #adadad; + line-height: 35px; + padding: 0 0 0 5px; +} +.ckplayer-ckplayer-menu .ck-li a{ + color: #FFF; + text-decoration: none; +} +.ckplayer-ckplayer-menu .ck-underline{ + border-bottom: 1px #000 solid; +} +/*控制栏*/ +.ckplayer-ckplayer .ck-main .ck-bar{ + position:absolute; + z-index: 260; + left:0px; + bottom:0px; + width: 100%; + height: 48px; + background: rgba(0,0,0,.3); + transition: 0.2s; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar{ + height: 70px; +} +.ckplayer-ckplayer .ck-main .ck-bar.ck-bar-out{ + bottom: -50px; + transition: 0.2s; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar.ck-bar-out{ + bottom: -80px; + transition: 0.2s; +} + +/*按钮公用样式*/ +.ckplayer-ckplayer .ck-main .ck-bar-btn{ + background-color: transparent; + background-image: url(images/ckplayer_red.48.png); + background-size: auto 100%; + border: none; + outline: none; + width: 48px; + height: 48px; + cursor: pointer; + background-repeat: no-repeat ; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar-btn{ + background-image: url(images/ckplayer_red.png); + width: 70px; + height: 70px; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-btn:hover{ + background-size:auto 100%; +} + +/*播放暂停按钮组*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-playandpause{ + float: left; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-playandpause .ck-btn-play{ + background-position:0px top; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-playandpause .ck-btn-play:hover{ + background-position:-48px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-playandpause .ck-btn-play:hover{ + background-position:-70px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-playandpause .ck-btn-pause{ + background-position:-96px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-playandpause .ck-btn-pause{ + background-position:-140px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-playandpause .ck-btn-pause:hover{ + background-position:-144px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-playandpause .ck-btn-pause:hover{ + background-position:-210px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-playandpause .ck-btn-refresh{ + background-position:-192px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-playandpause .ck-btn-refresh{ + background-position:-280px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-playandpause .ck-btn-refresh:hover{ + background-position:-240px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-playandpause .ck-btn-refresh:hover{ + background-position:-350px 0; +} + +/*返回播放按钮*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-btn-backlive{ + float: left; + font-size: 16px; + line-height: 28px; + border-radius: 3px; + margin: 10px; + border: 0px; + background: rgba(3,60,146,.5); + color: #FFF; + cursor: pointer; + padding: 0 8px; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-btn-backlive{ + font-size: 18px; + line-height: 36px; + margin: 17px 10px; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-btn-backlive:hover{ + background: rgba(3,60,146,.9); +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-btn-backlive:focus{ + outline:0; + background: rgba(3,60,146,.6); +} +/*静音取消静音按钮组*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-volumebox .ck-btn-muted{ + background-position:-288px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-volumebox .ck-btn-muted{ + background-position:-420px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-volumebox .ck-btn-muted:hover{ + background-position:-336px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-volumebox .ck-btn-muted:hover{ + background-position:-490px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-volumebox .ck-btn-exitmuted{ + background-position:-384px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-volumebox .ck-btn-exitmuted{ + background-position:-560px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-volumebox .ck-btn-exitmuted:hover{ + background-position:-432px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-volumebox .ck-btn-exitmuted:hover{ + background-position:-630px 0; +} + +/*全屏按钮组*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-fullandexit{ + float: right; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-fullandexit .ck-btn-full{ + background-position:-480px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-fullandexit .ck-btn-full{ + background-position:-700px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-fullandexit .ck-btn-full:hover{ + background-position:-528px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-fullandexit .ck-btn-full:hover{ + background-position:-770px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-fullandexit .ck-btn-exitfull{ + background-position:-672px 0; + display: none; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-fullandexit .ck-btn-exitfull{ + background-position:-840px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-fullandexit .ck-btn-exitfull:hover{ + background-position:-720px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-fullandexit .ck-btn-exitfull:hover{ + background-position:-910px 0; +} + +/*网页全屏按钮组*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-webfullandexit{ + float: right; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-webfullandexit .ck-btn-webfull{ + background-position:-768px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-webfullandexit .ck-btn-webfull{ + background-position:-1120px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-webfullandexit .ck-btn-webfull:hover{ + background-position:-816px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-webfullandexit .ck-btn-webfull:hover{ + background-position:-1190px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-webfullandexit .ck-btn-exitwebfull{ + background-position:-864px 0; + display: none; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-webfullandexit .ck-btn-exitwebfull{ + background-position:-1260px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-webfullandexit .ck-btn-exitwebfull:hover{ + background-position:-912px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-webfullandexit .ck-btn-exitwebfull:hover{ + background-position:-1330px 0; +} + +/*剧场模式按钮组*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-theatreandexit{ + float: right; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-theatreandexit .ck-btn-theatre{ + background-position:-960px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-theatreandexit .ck-btn-theatre{ + background-position:-1400px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-theatreandexit .ck-btn-theatre:hover{ + background-position:-1008px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-theatreandexit .ck-btn-theatre:hover{ + background-position:-1470px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-theatreandexit .ck-btn-exittheatre{ + background-position:-1056px 0; + display: none; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-theatreandexit .ck-btn-exittheatre{ + background-position:-1540px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-theatreandexit .ck-btn-exittheatre:hover{ + background-position:-1104px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-theatreandexit .ck-btn-exittheatre:hover{ + background-position:-1610px 0; +} +/*播放速度*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-playbackrate-box{ + float: right; + height: 48px; + line-height: 48px; + position: relative; + cursor: pointer; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-playbackrate-box{ + height: 70px; + line-height: 70px; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-playbackrate-box .ck-bar-playbackrate{ + height: 100%; + padding: 0 10px; + white-space:nowrap; + font-size: 16px; + color: #FFF; + -moz-user-select:none; /*火狐*/ + -webkit-user-select:none; /*webkit浏览器*/ + -ms-user-select:none; /*IE10*/ + -khtml-user-select:none; /*早期浏览器*/ + user-select:none; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-playbackrate-box .ck-bar-playbackrate{ + font-size: 18px; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-playbackrate-box .ck-bar-playbackrate:hover{ + color: #e80101; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-playbackrate-box .ck-bar-playbackrate-bg-box { + width: auto; + height: auto; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-playbackrate-box:hover .ck-bar-playbackrate-bg-box { + display: block; +} +/*字幕*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-track-box{ + float: right; + height: 48px; + line-height: 48px; + position: relative; + cursor: pointer; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-track-box{ + height: 70px; + line-height: 70px; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-track-box .ck-bar-track{ + height: 100%; + padding: 0 10px; + white-space:nowrap; + font-size: 16px; + color: #FFF; + -moz-user-select:none; /*火狐*/ + -webkit-user-select:none; /*webkit浏览器*/ + -ms-user-select:none; /*IE10*/ + -khtml-user-select:none; /*早期浏览器*/ + user-select:none; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-track-box .ck-bar-track{ + font-size: 18px; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-track-box .ck-bar-track:hover{ + color: #0368d0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-track-box .ck-bar-track-bg-box { + width: auto; + height: auto; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-track-box:hover .ck-bar-track-bg-box { + display: block; +} +/*清晰度*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-definition-box{ + float: right; + height: 48px; + line-height: 48px; + position: relative; + cursor: pointer; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-definition-box{ + height: 70px; + line-height: 70px; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-definition-box .ck-bar-definition{ + height: 100%; + padding: 0 10px; + white-space:nowrap; + font-size: 16px; + color: #FFF; + -moz-user-select:none; /*火狐*/ + -webkit-user-select:none; /*webkit浏览器*/ + -ms-user-select:none; /*IE10*/ + -khtml-user-select:none; /*早期浏览器*/ + user-select:none; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-definition-box .ck-bar-definition{ + font-size: 18px; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-definition-box .ck-bar-definition:hover{ + color: #e80101; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-definition-box .ck-bar-definition-bg-box { + width: auto; + height: auto; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-definition-box:hover .ck-bar-definition-bg-box { + display: block; +} +/*列表切换*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-list-bg-box { + background: rgba(0,0,0,.001); + position: absolute; + z-index: 1; + bottom: 46px; + display: none; + -webkit-animation-duration: .2s; + animation-duration: .2s; + -webkit-animation-name: ck-bounceIn; + animation-name: ck-bounceIn; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-list-bg-box { + bottom: 68px; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-list-bg-box .ck-list-bg{ + background: rgba(0,0,0,.6); + float: left; + border-radius: 5px; + padding: 10px; + margin-bottom: 10px; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-list-bg-box .ck-list-bg .ck-list-p{ + width: 100%; + float: left; + line-height: 35px; + color: #FFF; + text-align: center; + font-size: 14px; + background-color: rgba(0,0,0,0); + border: 0px; + white-space:nowrap; + cursor: pointer; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-list-bg-box .ck-list-bg .ck-list-p:hover{ + color: #e80101; + font-size: 16px; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-list-bg-box .ck-list-bg .ck-list-p:hover{ + font-size: 20px; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-list-bg-box .ck-list-bg .ck-list-p{ + font-size: 18px; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-list-bg-box .ck-list-bg .ck-list-p-focus{ + color: #FF0302; +} +/*下一集按钮*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-next{ + float: left; + background-position:-672px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-next{ + background-position:-980px 0; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-next:hover{ + background-position:-720px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-next:hover{ + background-position:-1050px 0; +} +/*进度栏*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress{ + width: 100%; + position:absolute; + z-index: 1; + height: 12px; + top:-11px; + transition: 0.2s; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress .ck-bar-progress-bg{ + width: 100%; + background: rgba(255,255,255,.3); + margin-top: 2px; + overflow: hidden; + height: 10px; + transition: .2s; + cursor: pointer; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress .ck-bar-progress-bg .ck-bar-progress-load{ + float: left; + width: 0px; + background: rgba(169,169,169,.7); + height: 10px; + transition: .2s; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress .ck-bar-progress-bg .ck-bar-progress-play{ + width: 0px; + background: #e80101; + position: absolute; + z-index: 1; + height: 10px; + transition: .2s; + cursor: pointer; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress .ck-bar-progress-bg .ck-bar-progress-mouseline{ + width: 3px; + background: rgba(255,255,255,.6); + position: absolute; + z-index: 2; + display: none; + height: 10px; + cursor: pointer; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress .ck-bar-progress-bg .ck-bar-progress-prompt{ + background: #FFF; + position: absolute; + z-index: 3; + border-radius: 50%; + width: 10px; + height: 10px; + top:2px; + transition: .2s; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress .ck-bar-progress-slider{ + border-radius: 50%; + overflow: hidden; + position: relative; + float: left; + z-index: 4; + left: 0px; + cursor: pointer; + width: 12px; + height: 12px; + top: -11px; + background: #FFF; + box-shadow: 0px 0px 0px 4px rgba(255,255,255,.5); +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress .ck-bar-progress-slider:hover{ + background: #e80101; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress .ck-bar-progress-bg:hover .ck-bar-progress-mouseline{ + display: block; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress.ck-bar-progress-out{ + height: 2px; + top:-2px; + transition: .2s; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress.ck-bar-progress-out .ck-bar-progress-bg,.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress.ck-bar-progress-out .ck-bar-progress-load,.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress.ck-bar-progress-out .ck-bar-progress-bg .ck-bar-progress-play{ + height: 2px; + transition: .2s; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress.ck-bar-progress-out .ck-bar-progress-slider{ + width: 12px; + height: 2px; + top: -2px; + box-shadow: 0px 0px 0px 0px rgba(255,255,255,0); + background: rgba(232,1,1,0); + transition: .2s; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress.ck-bar-progress-out .ck-bar-progress-bg .ck-bar-progress-prompt{ + height: 2px; + border-radius: 0; + transition: .2s; +} +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress.ck-bar-progress-slider-move .ck-bar-progress-play,.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-progress.ck-bar-progress-slider-move .ck-bar-progress-slider{ + transition: 0s; +} + +/*音量调节栏*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-volumebox{ + float: right; + width: 48px; + overflow-x: hidden; +} +/*音量调节栏*/ +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-volumebox{ + width: 70px; +} +/*默认状态-音量调节总外框*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-volumebox .ck-bar-volume{ + width: 48px; + height: 215px; + background: rgba(0,0,0,.01); + position: absolute; + z-index: 1; + bottom: 46px; + display: none; + overflow: hidden; +} +/*全屏状态-音量调节总外框*/ +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-volumebox .ck-bar-volume{ + width: 70px; + bottom: 68px; +} +/*默认状态-音量调节总外框-鼠标经过时样式*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-volumebox:hover .ck-bar-volume{ + display: block; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: .1s; + animation-duration: .1s; + -webkit-animation-name: ck-bounceIn; + animation-name: ck-bounceIn; +} +/*共用状态-音量调节内部外框*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-volumebox .ck-bar-volumex{ + width: 100%; + height: 200px; + float: left; + background: rgba(0,0,0,.8); + border-radius: 5px; +} +/*共用状态-音量调节顶部文字*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-volumebox .ck-bar-volume .ck-bar-volume-txt{ + width: 100%; + height: 40px; + line-height: 40px; + color: #FFF; + text-align: center; + font-size: 1rem; + float: left; + overflow: hidden; + -moz-user-select:none; /*火狐*/ + -webkit-user-select:none; /*webkit浏览器*/ + -ms-user-select:none; /*IE10*/ + -khtml-user-select:none; /*早期浏览器*/ + user-select:none; +} +/*共用状态-音量调节背景色*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-volumebox .ck-bar-volume .ck-bar-volume-bg{ + width: 8px; + height: 140px; + background: #808080; + border-radius: 3px; + overflow: hidden; + cursor: pointer; + margin: auto; +} +/*共用状态-音量调节前景色*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-volumebox .ck-bar-volume .ck-bar-volume-bg .ck-bar-volume-pp{ + width: 8px; + height: 140px; + background: #e80101; + margin-top: 140px; +} +/*共用状态-音量调节拖动小按钮*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-volumebox .ck-bar-volume .ck-bar-volume-slider{ + width: 10px; + height: 10px; + background: #FFF; + border-radius: 50%; + overflow: hidden; + box-shadow: 0px 0px 0px 8px rgba(255,255,255,.5); + position: absolute; + z-index: 1; + top: 0px; + left: 19px; + cursor: pointer; +} +/*全屏状态-音量调节拖动小按钮*/ +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-volumebox .ck-bar-volume .ck-bar-volume-slider{ + left: 30px; +} +/*默认状态-显示时间*/ +.ckplayer-ckplayer .ck-main .ck-bar .ck-bar-time{ + float: left; + line-height: 48px; + font-size: 16px; + color: #FFF; + -moz-user-select:none; /*火狐*/ + -webkit-user-select:none; /*webkit浏览器*/ + -ms-user-select:none; /*IE10*/ + -khtml-user-select:none; /*早期浏览器*/ + user-select:none; +} +/*全屏状态-显示时间*/ +.ckplayer-ckplayer .ck-main.ck-main-full .ck-bar .ck-bar-time{ + float: left; + line-height: 70px; + font-size: 18px; + color: #FFF; +} +/*右侧控制栏*/ +.ckplayer-ckplayer .ck-main .ck-right-bar{ + position: absolute; + z-index: 260; + top: 0; + right: 2px; + bottom: 0; + margin: auto !important; + width: 48px; + height: 144px; + background: rgba(0,0,0,.3); + border-radius: 5px; + transition: .2s; +} +.ckplayer-ckplayer .ck-main .ck-right-bar-hide{ + right: -48px; + transition: .2s; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-right-bar{ + width: 70px; + height: 210px; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-right-bar-hide{ + right: -70px; + transition: .2s; +} +/*截图按钮*/ +.ckplayer-ckplayer .ck-main .ck-right-bar .ck-btn-screenshot{ + float: left; + background-position:-1536px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-right-bar .ck-btn-screenshot{ + background-position:-2240px 0; +} +.ckplayer-ckplayer .ck-main .ck-right-bar .ck-btn-screenshot:hover{ + background-position:-1584px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-right-bar .ck-btn-screenshot:hover{ + background-position:-2310px 0; +} +/*小窗口按钮组*/ +.ckplayer-ckplayer .ck-main .ck-right-bar .ck-right-bar-smallwindows{ + float: left; +} +.ckplayer-ckplayer .ck-main .ck-right-bar .ck-right-bar-smallwindows button{ + float: left; +} +.ckplayer-ckplayer .ck-main .ck-right-bar .ck-right-bar-smallwindows .ck-btn-smallwindows-open{ + background-position:-1248px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-right-bar .ck-right-bar-smallwindows .ck-btn-smallwindows-open{ + background-position:-1820px 0; +} +.ckplayer-ckplayer .ck-main .ck-right-bar .ck-right-bar-smallwindows .ck-btn-smallwindows-open:hover{ + background-position:-1296px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-right-bar .ck-right-bar-smallwindows .ck-btn-smallwindows-open:hover{ + background-position:-1890px 0; +} +.ckplayer-ckplayer .ck-main .ck-right-bar .ck-right-bar-smallwindows .ck-btn-smallwindows-close{ + background-position:-1152px 0; + display: none; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-right-bar .ck-right-bar-smallwindows .ck-btn-smallwindows-close{ + background-position:-1680px 0; +} +.ckplayer-ckplayer .ck-main .ck-right-bar .ck-right-bar-smallwindows .ck-btn-smallwindows-close:hover{ + background-position:-1200px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-right-bar .ck-right-bar-smallwindows .ck-btn-smallwindows-close:hover{ + background-position:-1750px 0; +} +/*循环按钮组*/ +.ckplayer-ckplayer .ck-main .ck-right-bar .ck-right-bar-loop{ + float: left; +} +.ckplayer-ckplayer .ck-main .ck-right-bar .ck-right-bar-loop .ck-btn-loop-open{ + background-position:-1440px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-right-bar .ck-right-bar-loop .ck-btn-loop-open{ + background-position:-2100px 0; +} +.ckplayer-ckplayer .ck-main .ck-right-bar .ck-right-bar-loop .ck-btn-loop-open:hover{ + background-position:-1488px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-right-bar .ck-right-bar-loop .ck-btn-loop-open:hover{ + background-position:-2170px 0; +} +.ckplayer-ckplayer .ck-main .ck-right-bar .ck-right-bar-loop .ck-btn-loop-close{ + background-position:-1344px 0; + display: none; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-right-bar .ck-right-bar-loop .ck-btn-loop-close{ + background-position:-1960px 0; +} +.ckplayer-ckplayer .ck-main .ck-right-bar .ck-right-bar-loop .ck-btn-loop-close:hover{ + background-position:-1392px 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-right-bar .ck-right-bar-loop .ck-btn-loop-close:hover{ + background-position:-2030px 0; +} +/*顶部显示栏*/ +.ckplayer-ckplayer .ck-main .ck-top-bar{ + position: absolute; + z-index: 260; + top: -36px; + width: 100%; + height: 36px; + background: rgba(0,0,0,.3); + transition: .2s; +} +.ckplayer-ckplayer .ck-main .ck-top-bar-hide{ + top: -36px; + transition: .2s; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-top-bar{ + top: 0; +} +.ckplayer-ckplayer .ck-main.ck-main-full .ck-top-bar-hide{ + top: -36px; + transition: .2s; +} +.ckplayer-ckplayer .ck-main .ck-top-bar .ck-top-bar-zoom{ + position: absolute; + z-index: 260; +} +.ckplayer-ckplayer .ck-main .ck-top-bar .ck-top-bar-zoom .ck-top-bar-zoom-container{ + float: left; + margin-left: 10px; + margin-top: 9px; + cursor: pointer; +} +.ckplayer-ckplayer .ck-main .ck-top-bar .ck-top-bar-zoom .ck-top-bar-zoom-container .ck-top-bar-zoom-left{ + float: left; + width: 20px; + height: 18px; + border: 1px solid #FFF; + box-sizing:content-box; + -moz-box-sizing:content-box; /* Firefox */ + -webkit-box-sizing:content-box; /* Safari */ +} +.ckplayer-ckplayer .ck-main .ck-top-bar .ck-top-bar-zoom .ck-top-bar-zoom-container:hover .ck-top-bar-zoom-left, +.ckplayer-ckplayer .ck-main .ck-top-bar .ck-top-bar-zoom .ck-top-bar-zoom-container.ck-top-bar-zoom-container-focus .ck-top-bar-zoom-left{ + border-color: #e80101; +} +.ckplayer-ckplayer .ck-main .ck-top-bar .ck-top-bar-zoom .ck-top-bar-zoom-container:hover .ck-top-bar-zoom-left div, +.ckplayer-ckplayer .ck-main .ck-top-bar .ck-top-bar-zoom .ck-top-bar-zoom-container.ck-top-bar-zoom-container-focus .ck-top-bar-zoom-left div{ + background: #e80101; +} +.ckplayer-ckplayer .ck-main .ck-top-bar .ck-top-bar-zoom .ck-top-bar-zoom-container .ck-top-bar-zoom-right{ + float: left; + font-size: 14px; + color: #FFF; + padding-left: 5px; +} +.ckplayer-ckplayer .ck-main .ck-top-bar .ck-top-bar-zoom .ck-top-bar-zoom-container:hover .ck-top-bar-zoom-right, +.ckplayer-ckplayer .ck-main .ck-top-bar .ck-top-bar-zoom .ck-top-bar-zoom-container.ck-top-bar-zoom-container-focus .ck-top-bar-zoom-right{ + color: #e80101; +} +.ckplayer-ckplayer .ck-main .ck-top-bar .ck-top-bar-zoom .ck-top-bar-zoom-container .ck-top-bar-zoom-left .ck-top-bar-zoom-button-50{ + width: 50%; + height: 50%; + background: #FFF; + margin: 4.5px 25%; +} +.ckplayer-ckplayer .ck-main .ck-top-bar .ck-top-bar-zoom .ck-top-bar-zoom-container .ck-top-bar-zoom-left .ck-top-bar-zoom-button-75{ + width: 75%; + height: 50%; + background: #FFF; + margin: 4.5px 12.5%; +} +.ckplayer-ckplayer .ck-main .ck-top-bar .ck-top-bar-zoom .ck-top-bar-zoom-container .ck-top-bar-zoom-left .ck-top-bar-zoom-button-100{ + width: 100%; + height: 50%; + background: #FFF; + margin: 4.5px 0; +} +.ckplayer-ckplayer .ck-main .ck-top-bar .ck-top-bar-title{ + position: absolute; + z-index: 1; + top: 0px; + width: 100%; + height: 36px; + line-height: 36px; + text-align: center; + font-size: 18px; + color: #FFF; + -moz-user-select:none; /*火狐*/ + -webkit-user-select:none; /*webkit浏览器*/ + -ms-user-select:none; /*IE10*/ + -khtml-user-select:none; /*早期浏览器*/ + user-select:none; +} +.ckplayer-ckplayer .ck-main .ck-top-bar .ck-top-bar-time{ + float: right; + height: 36px; + line-height: 36px; + font-size: 14px; + color: #FFF; + padding: 0 1rem 0; + -moz-user-select:none; /*火狐*/ + -webkit-user-select:none; /*webkit浏览器*/ + -ms-user-select:none; /*IE10*/ + -khtml-user-select:none; /*早期浏览器*/ + user-select:none; +} +/*以下为缓动效果样式*/ +.ck-animate { + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-duration: .3s; + animation-duration: .3s; +} +.ck-animate-bouncein { + -webkit-animation-name: ck-bounceIn; + animation-name: ck-bounceIn; +} + +@-webkit-keyframes ck-bounceIn { + 0% { + opacity: 0; + -webkit-transform: scale(.5); + transform: scale(.5) + } + 100% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } +} + +@keyframes ck-bounceIn { + 0% { + opacity: 0; + -webkit-transform: scale(.5); + -ms-transform: scale(.5); + transform: scale(.5); + } + 100% { + opacity: 1; + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } +} +.ck-animate-bounceout { + -webkit-animation-name: ck-bounceOut; + animation-name: ck-bounceOut; +} + +@-webkit-keyframes ck-bounceOut { + 0% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } + 100% { + opacity: 0; + -webkit-transform: scale(.5); + transform: scale(.5); + } +} + +@keyframes ck-bounceOut { + 0% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } + 100% { + opacity: 0; + -webkit-transform: scale(.5); + transform: scale(.5); + } +} +.ck-animate-circle { + animation: ck-Circle 1s linear infinite; + -webkit-animation: ck-Circle 1s linear infinite +} + +@-webkit-keyframes ck-Circle { + 0% { + transform: rotate(0deg); + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg) + } + 25% { + transform: rotate(90deg); + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg) + } + 50% { + transform: rotate(180deg); + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg) + } + 75% { + transform: rotate(270deg); + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg) + } + 100% { + transform: rotate(360deg); + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg) + } +} + +@keyframes ck-Circle { + 0% { + transform: rotate(0deg); + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg) + } + 25% { + transform: rotate(90deg); + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg) + } + 50% { + transform: rotate(180deg); + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg) + } + 75% { + transform: rotate(270deg); + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg) + } + 100% { + transform: rotate(360deg); + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg) + } +} \ No newline at end of file diff --git a/public/ckplayer/css/images/adclose.png b/public/ckplayer/css/images/adclose.png new file mode 100644 index 0000000..b3c0b7b Binary files /dev/null and b/public/ckplayer/css/images/adclose.png differ diff --git a/public/ckplayer/css/images/buffer.png b/public/ckplayer/css/images/buffer.png new file mode 100644 index 0000000..198d4a1 Binary files /dev/null and b/public/ckplayer/css/images/buffer.png differ diff --git a/public/ckplayer/css/images/ckplayer.48.png b/public/ckplayer/css/images/ckplayer.48.png new file mode 100644 index 0000000..650c117 Binary files /dev/null and b/public/ckplayer/css/images/ckplayer.48.png differ diff --git a/public/ckplayer/css/images/ckplayer.png b/public/ckplayer/css/images/ckplayer.png new file mode 100644 index 0000000..15940cf Binary files /dev/null and b/public/ckplayer/css/images/ckplayer.png differ diff --git a/public/ckplayer/css/images/ckplayer_ixigua.48.png b/public/ckplayer/css/images/ckplayer_ixigua.48.png new file mode 100644 index 0000000..7301e36 Binary files /dev/null and b/public/ckplayer/css/images/ckplayer_ixigua.48.png differ diff --git a/public/ckplayer/css/images/ckplayer_ixigua.png b/public/ckplayer/css/images/ckplayer_ixigua.png new file mode 100644 index 0000000..818c261 Binary files /dev/null and b/public/ckplayer/css/images/ckplayer_ixigua.png differ diff --git a/public/ckplayer/css/images/ckplayer_red.48.png b/public/ckplayer/css/images/ckplayer_red.48.png new file mode 100644 index 0000000..5f226ac Binary files /dev/null and b/public/ckplayer/css/images/ckplayer_red.48.png differ diff --git a/public/ckplayer/css/images/ckplayer_red.png b/public/ckplayer/css/images/ckplayer_red.png new file mode 100644 index 0000000..d872a0a Binary files /dev/null and b/public/ckplayer/css/images/ckplayer_red.png differ diff --git a/public/ckplayer/css/images/loading.png b/public/ckplayer/css/images/loading.png new file mode 100644 index 0000000..fe16ca3 Binary files /dev/null and b/public/ckplayer/css/images/loading.png differ diff --git a/public/ckplayer/css/images/logo.png b/public/ckplayer/css/images/logo.png new file mode 100644 index 0000000..4ca44d2 Binary files /dev/null and b/public/ckplayer/css/images/logo.png differ diff --git a/public/ckplayer/css/images/play.png b/public/ckplayer/css/images/play.png new file mode 100644 index 0000000..f9e111b Binary files /dev/null and b/public/ckplayer/css/images/play.png differ diff --git a/public/ckplayer/flv.js/LICENSE b/public/ckplayer/flv.js/LICENSE new file mode 100644 index 0000000..7a4a3ea --- /dev/null +++ b/public/ckplayer/flv.js/LICENSE @@ -0,0 +1,202 @@ + + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + + TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + + 1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + + 2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + + 3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + + 4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + + 5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + + 6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + + 7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + + 8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + + 9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + + END OF TERMS AND CONDITIONS + + APPENDIX: How to apply the Apache License to your work. + + To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "[]" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. + + Copyright [yyyy] [name of copyright owner] + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. \ No newline at end of file diff --git a/public/ckplayer/flv.js/README.md b/public/ckplayer/flv.js/README.md new file mode 100644 index 0000000..7382967 --- /dev/null +++ b/public/ckplayer/flv.js/README.md @@ -0,0 +1,104 @@ + +flv.js [![npm](https://img.shields.io/npm/v/flv.js.svg?style=flat)](https://www.npmjs.com/package/flv.js) +====== +An HTML5 Flash Video (FLV) Player written in pure JavaScript without Flash. LONG LIVE FLV! + +This project relies on [Media Source Extensions][] to work. + +**For FLV live stream playback, please consider [mpegts.js][] which is under active development.** + +**This project will become rarely maintained.** + +[mpegts.js]: https://github.com/xqq/mpegts.js +## Overview +flv.js works by transmuxing FLV file stream into ISO BMFF (Fragmented MP4) segments, followed by feeding mp4 segments into an HTML5 `