lineplayer
Version:
HTML5 video player
1 lines • 192 kB
JavaScript
!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define("LinePlayer",[],n):"object"==typeof exports?exports.LinePlayer=n():e.LinePlayer=n()}(self,(()=>(()=>{var e={3550:(e,n,t)=>{"use strict";t.d(n,{A:()=>A});var r=t(4670),o=t.n(r),i=t(5766),a=t.n(i),l=t(8973),s=t.n(l),c=new URL(t(4784),t.b),u=a()(o()),p=s()(c);u.push([e.id,`.lineplayer {\n position: relative;\n overflow: hidden;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n line-height: 1;\n}\n.lineplayer * {\n box-sizing: content-box;\n}\n.lineplayer:-webkit-full-screen {\n width: 100%;\n height: 100%;\n background: #000;\n position: fixed;\n z-index: 100000;\n left: 0;\n top: 0;\n}\n@media (min-width: 900px) {\n .lineplayer.lineplayer-playing .lineplayer-controller-mask {\n opacity: 0;\n }\n .lineplayer.lineplayer-playing .lineplayer-controller {\n opacity: 0;\n }\n .lineplayer.lineplayer-playing .lineplayer-title {\n opacity: 0;\n }\n .lineplayer.lineplayer-playing:hover .lineplayer-controller-mask {\n opacity: 1;\n }\n .lineplayer.lineplayer-playing:hover .lineplayer-controller {\n opacity: 1;\n }\n .lineplayer.lineplayer-playing:hover .lineplayer-title {\n opacity: 1;\n }\n}\n.lineplayer.lineplayer-loading .lineplayer-bezel .lineplayer-loading-icon,\n.lineplayer.lineplayer-loading .lineplayer-bezel .lineplayer-danloading {\n display: block;\n}\n.lineplayer.lineplayer-loading .lineplayer-camera,\n.lineplayer.lineplayer-loading .lineplayer-title,\n.lineplayer.lineplayer-loading .lineplayer-play,\n.lineplayer.lineplayer-loading .lineplayer-live {\n display: none !important;\n}\n.lineplayer.lineplayer-hide-controller {\n cursor: none;\n}\n.lineplayer.lineplayer-hide-controller .lineplayer-controller-mask {\n opacity: 0;\n transform: translateY(100%);\n}\n.lineplayer.lineplayer-hide-controller .lineplayer-controller {\n opacity: 0;\n transform: translateY(100%);\n}\n.lineplayer.lineplayer-hide-controller .lineplayer-title {\n opacity: 0 !important;\n transform: translateX(-100%);\n}\n.lineplayer.lineplayer-show-controller .lineplayer-controller-mask {\n opacity: 1;\n}\n.lineplayer.lineplayer-show-controller .lineplayer-controller {\n opacity: 1;\n}\n.lineplayer.lineplayer-show-controller .lineplayer-title {\n opacity: 1;\n}\n.lineplayer.lineplayer-fulled {\n position: fixed;\n z-index: 100000;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n}\n.lineplayer.lineplayer-mobile .lineplayer-volume,\n.lineplayer.lineplayer-mobile .lineplayer-camera-icon {\n display: none !important;\n}\n.lineplayer.lineplayer-mobile .lineplayer-controller .lineplayer-icons .lineplayer-comment .lineplayer-comment-box .lineplayer-comment-input {\n width: 200px;\n}\n.lineplayer.lineplayer-mobile .lineplayer-comment-setting-title {\n display: none;\n}\n.lineplayer.lineplayer-mobile .lineplayer-controller .lineplayer-icons .lineplayer-comment .lineplayer-comment-box .lineplayer-comment-setting-box {\n left: 17px;\n}\n.lineplayer.lineplayer-mobile .lineplayer-controller .lineplayer-icons .lineplayer-icon {\n width: 40px;\n}\n.lineplayer .lineplayer-mask {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 1;\n display: none;\n}\n.lineplayer .lineplayer-mask.lineplayer-mask-show {\n display: block;\n}\n.lineplayer .lineplayer-video-wrap {\n position: relative;\n background: #000;\n font-size: 0;\n width: 100%;\n height: 100%;\n}\n.lineplayer .lineplayer-video-wrap .lineplayer-video {\n width: 100%;\n height: 100%;\n display: none;\n}\n.lineplayer .lineplayer-video-wrap .lineplayer-video-current {\n display: block;\n}\n.lineplayer .lineplayer-video-wrap .lineplayer-video-prepare {\n display: none;\n}\n.lineplayer .lineplayer-bezel {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n font-size: 22px;\n color: #fff;\n pointer-events: none;\n}\n.lineplayer .lineplayer-bezel .lineplayer-bezel-icon {\n position: absolute;\n top: 50%;\n left: 50%;\n margin: -26px 0 0 -26px;\n height: 52px;\n width: 52px;\n padding: 12px;\n box-sizing: border-box;\n background: rgba(0, 0, 0, 0.5);\n border-radius: 50%;\n opacity: 0;\n pointer-events: none;\n}\n.lineplayer .lineplayer-bezel .lineplayer-bezel-icon.lineplayer-bezel-transition {\n animation: bezel-hide 0.5s linear;\n}\n@keyframes bezel-hide {\n from {\n opacity: 1;\n transform: scale(1);\n }\n to {\n opacity: 0;\n transform: scale(2);\n }\n}\n.lineplayer .lineplayer-bezel .lineplayer-danloading {\n display: none;\n position: absolute;\n top: 50%;\n margin-top: -7px;\n width: 100%;\n text-align: center;\n font-size: 14px;\n line-height: 14px;\n animation: my-face 5s infinite ease-in-out;\n}\n.lineplayer .lineplayer-bezel .lineplayer-loading-icon {\n display: none;\n position: absolute;\n top: 50%;\n left: 50%;\n margin: -18px 0 0 -18px;\n height: 36px;\n width: 36px;\n pointer-events: none;\n}\n.lineplayer .lineplayer-bezel .lineplayer-loading-icon .lineplayer-loading-hide {\n display: none;\n}\n.lineplayer .lineplayer-bezel .lineplayer-loading-icon .lineplayer-loading-dot {\n animation: diplayer-loading-dot-fade 0.8s ease infinite;\n opacity: 0;\n transform-origin: 4px 4px;\n}\n.lineplayer .lineplayer-bezel .lineplayer-loading-icon .lineplayer-loading-dot.diplayer-loading-dot-1 {\n animation-delay: 0.1s;\n}\n.lineplayer .lineplayer-bezel .lineplayer-loading-icon .lineplayer-loading-dot.diplayer-loading-dot-2 {\n animation-delay: 0.2s;\n}\n.lineplayer .lineplayer-bezel .lineplayer-loading-icon .lineplayer-loading-dot.diplayer-loading-dot-3 {\n animation-delay: 0.3s;\n}\n.lineplayer .lineplayer-bezel .lineplayer-loading-icon .lineplayer-loading-dot.diplayer-loading-dot-4 {\n animation-delay: 0.4s;\n}\n.lineplayer .lineplayer-bezel .lineplayer-loading-icon .lineplayer-loading-dot.diplayer-loading-dot-5 {\n animation-delay: 0.5s;\n}\n.lineplayer .lineplayer-bezel .lineplayer-loading-icon .lineplayer-loading-dot.diplayer-loading-dot-6 {\n animation-delay: 0.6s;\n}\n.lineplayer .lineplayer-bezel .lineplayer-loading-icon .lineplayer-loading-dot.diplayer-loading-dot-7 {\n animation-delay: 0.7s;\n}\n@keyframes lineplayer-loading-dot-fade {\n 0% {\n opacity: 0.7;\n transform: scale(1.2, 1.2);\n }\n 50% {\n opacity: 0.25;\n transform: scale(0.9, 0.9);\n }\n to {\n opacity: 0.25;\n transform: scale(0.85, 0.85);\n }\n}\n.lineplayer .lineplayer-controller-mask {\n background: url(${p}) repeat-x bottom;\n height: 98px;\n width: 100%;\n position: absolute;\n bottom: 0;\n transition: all 0.3s ease;\n}\n.lineplayer .lineplayer-title {\n pointer-events: none;\n position: absolute;\n top: 30px;\n font-size: 14px;\n background: rgba(28, 28, 28, 0.8);\n padding: 7px 20px;\n transition: all 0.3s ease-in-out;\n overflow: hidden;\n color: #fff;\n box-sizing: border-box;\n}\n.lineplayer .lineplayer-controller {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 41px;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n transition: all 0.3s ease;\n}\n.lineplayer .lineplayer-controller .lineplayer-icons {\n height: 38px;\n position: absolute;\n bottom: 0;\n margin: 0;\n padding: 0;\n font-size: 0;\n}\n.lineplayer .lineplayer-controller .lineplayer-icons.lineplayer-icons-left {\n left: 5px;\n}\n.lineplayer .lineplayer-controller .lineplayer-icons.lineplayer-icons-left .lineplayer-icon {\n padding: 7px;\n}\n.lineplayer .lineplayer-controller .lineplayer-icons.lineplayer-icons-right {\n right: 5px;\n}\n.lineplayer .lineplayer-controller .lineplayer-icons.lineplayer-icons-right .lineplayer-icon {\n padding: 8px;\n}\n.lineplayer .lineplayer-controller .lineplayer-icons > * {\n display: inline-block;\n height: 100%;\n position: relative;\n margin: 0;\n padding: 0;\n}\n.lineplayer .lineplayer-controller .lineplayer-icons > *:hover .lineplayer-button-mask {\n pointer-events: inherit;\n}\n.lineplayer .lineplayer-controller .lineplayer-icons > *:hover .lineplayer-button-panel {\n opacity: 1;\n transform: translate(-50%, 0);\n}\n.lineplayer .lineplayer-controller .lineplayer-icons > * .lineplayer-button-mask {\n pointer-events: none;\n position: absolute;\n bottom: 100%;\n left: 50%;\n min-width: 40px;\n max-width: 200px;\n}\n.lineplayer .lineplayer-controller .lineplayer-icons > * .lineplayer-button-panel {\n opacity: 0;\n font-size: 12px;\n border-radius: 4px;\n background: rgba(17, 17, 17, 0.7);\n padding: 5px;\n transition: all 0.3s ease-in-out;\n transform: translate(-50%, 10px);\n transform-origin: top;\n overflow: hidden;\n color: #fff;\n text-align: center;\n}\n.lineplayer .lineplayer-controller .lineplayer-icons > * .lineplayer-button-panel span:first-child {\n white-space: nowrap;\n overflow: hidden;\n}\n.lineplayer .lineplayer-controller .lineplayer-icons > * .lineplayer-button-prev-panel,\n.lineplayer .lineplayer-controller .lineplayer-icons > * .lineplayer-button-next-panel {\n width: 100px;\n padding: 0 5px;\n}\n.lineplayer .lineplayer-controller .lineplayer-icons > * .lineplayer-button-prev-panel span,\n.lineplayer .lineplayer-controller .lineplayer-icons > * .lineplayer-button-next-panel span {\n margin: 5px 0;\n display: block;\n}\n.lineplayer .lineplayer-controller .lineplayer-icons > * .lineplayer-quality-item {\n height: 25px;\n box-sizing: border-box;\n cursor: pointer;\n line-height: 25px;\n}\n.lineplayer .lineplayer-controller .lineplayer-icons > * .lineplayer-quality-item:hover {\n background-color: rgba(255, 255, 255, 0.1);\n}\n.lineplayer .lineplayer-controller .lineplayer-icons > *:before {\n content: "";\n display: block;\n overflow: hidden;\n}\n.lineplayer .lineplayer-controller .lineplayer-icons .lineplayer-live-badge {\n line-height: 38px;\n color: #eee;\n text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);\n vertical-align: middle;\n font-size: 13px;\n cursor: default;\n text-transform: uppercase;\n display: none;\n}\n.lineplayer .lineplayer-controller .lineplayer-icons .lineplayer-live-dot {\n display: inline-block;\n width: 6px;\n height: 6px;\n vertical-align: 4%;\n margin-right: 5px;\n content: '';\n border-radius: 6px;\n}\n.lineplayer .lineplayer-controller .lineplayer-icons .lineplayer-icon {\n height: 100%;\n border: none;\n background-color: transparent;\n outline: none;\n cursor: pointer;\n color: #fff;\n vertical-align: middle;\n box-sizing: border-box;\n display: inline-block;\n}\n.lineplayer .lineplayer-controller .lineplayer-icons .lineplayer-icon .lineplayer-icon-content {\n transition: all 0.2s ease-in-out;\n opacity: 0.8;\n}\n.lineplayer .lineplayer-controller .lineplayer-icons .lineplayer-icon:hover .lineplayer-icon-content {\n opacity: 1;\n}\n.lineplayer .lineplayer-controller .lineplayer-icons .lineplayer-icon.lineplayer-volume-icon {\n width: 43px;\n}\n.lineplayer .lineplayer-controller .lineplayer-icons .lineplayer-volume {\n position: relative;\n display: inline-block;\n cursor: pointer !important;\n height: 100%;\n}\n.lineplayer .lineplayer-controller .lineplayer-icons .lineplayer-volume:hover .lineplayer-volume-bar {\n width: 45px !important;\n}\n.lineplayer .lineplayer-controller .lineplayer-icons .lineplayer-volume:hover .lineplayer-thumb {\n transform: scale(1) !important;\n}\n.lineplayer .lineplayer-controller .lineplayer-icons .lineplayer-volume.lineplayer-volume-active .lineplayer-volume-bar {\n width: 45px !important;\n}\n.lineplayer .lineplayer-controller .lineplayer-icons .lineplayer-volume.lineplayer-volume-active .lineplayer-thumb {\n transform: scale(1) !important;\n}\n.lineplayer .lineplayer-controller .lineplayer-icons .lineplayer-volume .lineplayer-volume-bar-wrap {\n display: inline-block;\n margin: 0 10px 0 -5px;\n vertical-align: middle;\n height: 100%;\n}\n.lineplayer .lineplayer-controller .lineplayer-icons .lineplayer-volume .lineplayer-volume-bar-wrap .lineplayer-volume-bar {\n position: relative;\n top: 17px;\n width: 0;\n height: 3px;\n background: #aaa;\n transition: all 0.3s ease-in-out;\n}\n.lineplayer .lineplayer-controller .lineplayer-icons .lineplayer-volume .lineplayer-volume-bar-wrap .lineplayer-volume-bar .lineplayer-volume-bar-inner {\n position: absolute;\n bottom: 0;\n left: 0;\n height: 100%;\n transition: all 0.1s ease;\n will-change: width;\n}\n.lineplayer .lineplayer-controller .lineplayer-icons .lineplayer-volume .lineplayer-volume-bar-wrap .lineplayer-volume-bar .lineplayer-volume-bar-inner .lineplayer-thumb {\n position: absolute;\n top: 0;\n right: 5px;\n margin-top: -4px;\n margin-right: -10px;\n height: 11px;\n width: 11px;\n border-radius: 50%;\n cursor: pointer !important;\n transition: all 0.3s ease-in-out;\n transform: scale(0);\n}\n.lineplayer .lineplayer-controller .lineplayer-icons .lineplayer-play:hover .lineplayer-button-panel {\n transform: translate(0, 0);\n}\n.lineplayer .lineplayer-controller .lineplayer-icons .lineplayer-play .lineplayer-button-mask {\n left: 0;\n}\n.lineplayer .lineplayer-controller .lineplayer-icons .lineplayer-play .lineplayer-button-panel {\n transform: translate(0, 10px);\n}\n.lineplayer .lineplayer-controller .lineplayer-icons .lineplayer-full:hover .lineplayer-button-panel {\n transform: translate(-100%, 0);\n}\n.lineplayer .lineplayer-controller .lineplayer-icons .lineplayer-full .lineplayer-button-mask {\n left: 100%;\n}\n.lineplayer .lineplayer-controller .lineplayer-icons .lineplayer-full .lineplayer-button-panel {\n transform: translate(-100%, 10px);\n}\n.lineplayer .lineplayer-controller .lineplayer-icons .lineplayer-label {\n color: #eee;\n font-size: 13px;\n display: inline-block;\n vertical-align: middle;\n white-space: nowrap;\n}\n.lineplayer .lineplayer-controller .lineplayer-icons .lineplayer-toggle {\n width: 32px;\n height: 20px;\n text-align: center;\n font-size: 0;\n vertical-align: middle;\n position: absolute;\n top: 5px;\n right: 10px;\n}\n.lineplayer .lineplayer-controller .lineplayer-icons .lineplayer-toggle input {\n max-height: 0;\n max-width: 0;\n display: none;\n}\n.lineplayer .lineplayer-controller .lineplayer-icons .lineplayer-toggle input + label {\n display: inline-block;\n position: relative;\n box-shadow: #dfdfdf 0 0 0 0 inset;\n border: 1px solid #dfdfdf;\n height: 20px;\n width: 32px;\n border-radius: 10px;\n box-sizing: border-box;\n cursor: pointer;\n transition: 0.2s ease-in-out;\n}\n.lineplayer .lineplayer-controller .lineplayer-icons .lineplayer-toggle input + label:before {\n content: "";\n position: absolute;\n display: block;\n height: 18px;\n width: 18px;\n top: 0;\n left: 0;\n border-radius: 15px;\n transition: 0.2s ease-in-out;\n}\n.lineplayer .lineplayer-controller .lineplayer-icons .lineplayer-toggle input + label:after {\n content: "";\n position: absolute;\n display: block;\n left: 0;\n top: 0;\n border-radius: 15px;\n background: #fff;\n transition: 0.2s ease-in-out;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);\n height: 18px;\n width: 18px;\n}\n.lineplayer .lineplayer-controller .lineplayer-icons .lineplayer-toggle input:checked + label {\n border-color: rgba(255, 255, 255, 0.5);\n}\n.lineplayer .lineplayer-controller .lineplayer-icons .lineplayer-toggle input:checked + label:before {\n width: 30px;\n background: rgba(255, 255, 255, 0.5);\n}\n.lineplayer .lineplayer-controller .lineplayer-icons .lineplayer-toggle input:checked + label:after {\n left: 12px;\n}\n.lineplayer .lineplayer-menu {\n position: absolute;\n width: 170px;\n border-radius: 2px;\n background: rgba(28, 28, 28, 0.85);\n padding: 5px 0;\n overflow: hidden;\n z-index: 3;\n display: none;\n}\n.lineplayer .lineplayer-menu.lineplayer-menu-show {\n display: block;\n}\n.lineplayer .lineplayer-menu .lineplayer-menu-item {\n height: 30px;\n box-sizing: border-box;\n cursor: pointer;\n}\n.lineplayer .lineplayer-menu .lineplayer-menu-item:hover {\n background-color: rgba(255, 255, 255, 0.1);\n}\n.lineplayer .lineplayer-menu .lineplayer-menu-item a {\n padding: 0 10px;\n line-height: 30px;\n color: #eee;\n font-size: 13px;\n display: inline-block;\n vertical-align: middle;\n width: 100%;\n box-sizing: border-box;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n.lineplayer .lineplayer-menu .lineplayer-menu-item a:hover {\n -webkit-text-decoration: none;\n text-decoration: none;\n}\n.lineplayer .lineplayer-logo {\n pointer-events: none;\n position: absolute;\n left: 20px;\n top: 20px;\n max-width: 50px;\n max-height: 50px;\n}\n.lineplayer .lineplayer-logo img {\n max-width: 100%;\n max-height: 100%;\n background: none;\n}\n.lineplayer .lineplayer-notice {\n opacity: 0;\n position: absolute;\n bottom: 60px;\n left: 20px;\n font-size: 14px;\n border-radius: 2px;\n background: rgba(28, 28, 28, 0.9);\n padding: 7px 20px;\n transition: all 0.3s ease-in-out;\n overflow: hidden;\n color: #fff;\n pointer-events: none;\n}\n@keyframes my-face {\n 2% {\n transform: translate(0, 1.5px) rotate(1.5deg);\n }\n 4% {\n transform: translate(0, -1.5px) rotate(-0.5deg);\n }\n 6% {\n transform: translate(0, 1.5px) rotate(-1.5deg);\n }\n 8% {\n transform: translate(0, -1.5px) rotate(-1.5deg);\n }\n 10% {\n transform: translate(0, 2.5px) rotate(1.5deg);\n }\n 12% {\n transform: translate(0, -0.5px) rotate(1.5deg);\n }\n 14% {\n transform: translate(0, -1.5px) rotate(1.5deg);\n }\n 16% {\n transform: translate(0, -0.5px) rotate(-1.5deg);\n }\n 18% {\n transform: translate(0, 0.5px) rotate(-1.5deg);\n }\n 20% {\n transform: translate(0, -1.5px) rotate(2.5deg);\n }\n 22% {\n transform: translate(0, 0.5px) rotate(-1.5deg);\n }\n 24% {\n transform: translate(0, 1.5px) rotate(1.5deg);\n }\n 26% {\n transform: translate(0, 0.5px) rotate(0.5deg);\n }\n 28% {\n transform: translate(0, 0.5px) rotate(1.5deg);\n }\n 30% {\n transform: translate(0, -0.5px) rotate(2.5deg);\n }\n 32% {\n transform: translate(0, 1.5px) rotate(-0.5deg);\n }\n 34% {\n transform: translate(0, 1.5px) rotate(-0.5deg);\n }\n 36% {\n transform: translate(0, -1.5px) rotate(2.5deg);\n }\n 38% {\n transform: translate(0, 1.5px) rotate(-1.5deg);\n }\n 40% {\n transform: translate(0, -0.5px) rotate(2.5deg);\n }\n 42% {\n transform: translate(0, 2.5px) rotate(-1.5deg);\n }\n 44% {\n transform: translate(0, 1.5px) rotate(0.5deg);\n }\n 46% {\n transform: translate(0, -1.5px) rotate(2.5deg);\n }\n 48% {\n transform: translate(0, -0.5px) rotate(0.5deg);\n }\n 50% {\n transform: translate(0, 0.5px) rotate(0.5deg);\n }\n 52% {\n transform: translate(0, 2.5px) rotate(2.5deg);\n }\n 54% {\n transform: translate(0, -1.5px) rotate(1.5deg);\n }\n 56% {\n transform: translate(0, 2.5px) rotate(2.5deg);\n }\n 58% {\n transform: translate(0, 0.5px) rotate(2.5deg);\n }\n 60% {\n transform: translate(0, 2.5px) rotate(2.5deg);\n }\n 62% {\n transform: translate(0, -0.5px) rotate(2.5deg);\n }\n 64% {\n transform: translate(0, -0.5px) rotate(1.5deg);\n }\n 66% {\n transform: translate(0, 1.5px) rotate(-0.5deg);\n }\n 68% {\n transform: translate(0, -1.5px) rotate(-0.5deg);\n }\n 70% {\n transform: translate(0, 1.5px) rotate(0.5deg);\n }\n 72% {\n transform: translate(0, 2.5px) rotate(1.5deg);\n }\n 74% {\n transform: translate(0, -0.5px) rotate(0.5deg);\n }\n 76% {\n transform: translate(0, -0.5px) rotate(2.5deg);\n }\n 78% {\n transform: translate(0, -0.5px) rotate(1.5deg);\n }\n 80% {\n transform: translate(0, 1.5px) rotate(1.5deg);\n }\n 82% {\n transform: translate(0, -0.5px) rotate(0.5deg);\n }\n 84% {\n transform: translate(0, 1.5px) rotate(2.5deg);\n }\n 86% {\n transform: translate(0, -1.5px) rotate(-1.5deg);\n }\n 88% {\n transform: translate(0, -0.5px) rotate(2.5deg);\n }\n 90% {\n transform: translate(0, 2.5px) rotate(-0.5deg);\n }\n 92% {\n transform: translate(0, 0.5px) rotate(-0.5deg);\n }\n 94% {\n transform: translate(0, 2.5px) rotate(0.5deg);\n }\n 96% {\n transform: translate(0, -0.5px) rotate(1.5deg);\n }\n 98% {\n transform: translate(0, -1.5px) rotate(-0.5deg);\n }\n 0%,\n 100% {\n transform: translate(0, 0) rotate(0deg);\n }\n}\n[data-balloon]:before {\n display: none;\n}\n[data-balloon]:after {\n padding: 0.3em 0.7em;\n background: rgba(17, 17, 17, 0.7);\n}\n[data-balloon][data-balloon-pos="up"]:after {\n margin-bottom: 0;\n}\n.lineplayer-web-fullscreen-fix {\n position: fixed;\n top: 0;\n left: 0;\n margin: 0;\n padding: 0;\n}\n`,"",{version:3,sources:["webpack://./src/css/index.less"],names:[],mappings:"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",sourcesContent:['.lineplayer {\n position: relative;\n overflow: hidden;\n user-select: none;\n line-height: 1;\n\n * {\n box-sizing: content-box;\n }\n\n &:-webkit-full-screen {\n width: 100%;\n height: 100%;\n background: #000;\n position: fixed;\n z-index: 100000;\n left: 0;\n top: 0;\n }\n\n &.lineplayer-playing {\n @media (min-width: 900px) {\n .lineplayer-controller-mask {\n opacity: 0;\n }\n .lineplayer-controller {\n opacity: 0;\n }\n .lineplayer-title {\n opacity: 0;\n }\n\n &:hover {\n .lineplayer-controller-mask {\n opacity: 1;\n }\n .lineplayer-controller {\n opacity: 1;\n }\n .lineplayer-title {\n opacity: 1;\n }\n }\n }\n }\n\n &.lineplayer-loading {\n .lineplayer-bezel .lineplayer-loading-icon,\n .lineplayer-bezel .lineplayer-danloading {\n display: block;\n }\n .lineplayer-camera,\n .lineplayer-title,\n .lineplayer-play,\n .lineplayer-live {\n display: none !important; \n }\n }\n\n &.lineplayer-hide-controller {\n cursor: none;\n\n .lineplayer-controller-mask {\n opacity: 0;\n transform: translateY(100%);\n }\n .lineplayer-controller {\n opacity: 0;\n transform: translateY(100%);\n }\n .lineplayer-title {\n opacity: 0 !important;\n transform: translateX(-100%);\n }\n }\n &.lineplayer-show-controller {\n .lineplayer-controller-mask {\n opacity: 1;\n }\n .lineplayer-controller {\n opacity: 1;\n }\n .lineplayer-title {\n opacity: 1;\n }\n }\n &.lineplayer-fulled {\n position: fixed;\n z-index: 100000;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n }\n &.lineplayer-mobile {\n .lineplayer-volume,\n .lineplayer-camera-icon {\n display: none !important;\n }\n\n .lineplayer-controller .lineplayer-icons .lineplayer-comment .lineplayer-comment-box .lineplayer-comment-input {\n width: 200px;\n }\n\n .lineplayer-comment-setting-title {\n display: none;\n }\n\n .lineplayer-controller .lineplayer-icons .lineplayer-comment .lineplayer-comment-box .lineplayer-comment-setting-box {\n left: 17px;\n }\n\n .lineplayer-controller .lineplayer-icons .lineplayer-icon {\n width: 40px;\n }\n }\n\n .lineplayer-mask {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 1;\n display: none;\n\n &.lineplayer-mask-show {\n display: block;\n }\n }\n\n .lineplayer-video-wrap {\n position: relative;\n background: #000;\n font-size: 0;\n width: 100%;\n height: 100%;\n\n .lineplayer-video {\n width: 100%;\n height: 100%;\n display: none;\n }\n\n .lineplayer-video-current {\n display: block;\n }\n\n .lineplayer-video-prepare {\n display: none;\n }\n }\n\n .lineplayer-bezel {\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n font-size: 22px;\n color: #fff;\n pointer-events: none;\n\n .lineplayer-bezel-icon {\n position: absolute;\n top: 50%;\n left: 50%;\n margin: -26px 0 0 -26px;\n height: 52px;\n width: 52px;\n padding: 12px;\n box-sizing: border-box;\n background: rgba(0, 0, 0, .5);\n border-radius: 50%;\n opacity: 0;\n pointer-events: none;\n\n &.lineplayer-bezel-transition {\n animation: bezel-hide .5s linear;\n }\n\n @keyframes bezel-hide {\n from {\n opacity: 1;\n transform: scale(1);\n }\n to {\n opacity: 0;\n transform: scale(2);\n }\n }\n }\n\n .lineplayer-danloading {\n display: none;\n position: absolute;\n top: 50%;\n margin-top: -7px;\n width: 100%;\n text-align: center;\n font-size: 14px;\n line-height: 14px;\n animation: my-face 5s infinite ease-in-out;\n }\n\n .lineplayer-loading-icon {\n display: none;\n position: absolute;\n top: 50%;\n left: 50%;\n margin: -18px 0 0 -18px;\n height: 36px;\n width: 36px;\n pointer-events: none;\n\n .lineplayer-loading-hide {\n display: none;\n }\n\n .lineplayer-loading-dot {\n animation: diplayer-loading-dot-fade .8s ease infinite;\n opacity: 0;\n transform-origin: 4px 4px;\n each(range(7), {\n &.diplayer-loading-dot-@{value} {\n animation-delay: (@value * 0.1s);\n }\n });\n }\n\n @keyframes lineplayer-loading-dot-fade {\n 0% {\n opacity:.7;\n transform:scale(1.2,1.2)\n }\n 50% {\n opacity:.25;\n transform:scale(.9,.9)\n }\n to {\n opacity:.25;\n transform:scale(.85,.85)\n }\n }\n }\n }\n\n .lineplayer-controller-mask {\n background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom;\n height: 98px;\n width: 100%;\n position: absolute;\n bottom: 0;\n transition: all 0.3s ease;\n }\n\n .lineplayer-title {\n pointer-events: none;\n position: absolute;\n //width: 100%;\n top: 30px;\n font-size: 14px;\n background: rgba(28, 28, 28, 0.8);\n padding: 7px 20px;\n transition: all .3s ease-in-out;\n overflow: hidden;\n color: #fff;\n box-sizing: border-box;\n }\n\n .lineplayer-controller {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 41px;\n user-select: none;\n transition: all 0.3s ease;\n\n .lineplayer-icons {\n height: 38px;\n position: absolute;\n bottom: 0;\n margin: 0;\n padding: 0;\n font-size: 0;\n\n &.lineplayer-icons-left {\n left: 5px;\n\n .lineplayer-icon {\n padding: 7px;\n }\n }\n &.lineplayer-icons-right {\n right: 5px;\n\n .lineplayer-icon {\n padding: 8px;\n }\n }\n\n >* {\n display: inline-block;\n height: 100%;\n position: relative;\n margin: 0;\n padding: 0;\n\n &:hover {\n .lineplayer-button-mask {\n pointer-events: inherit;\n }\n .lineplayer-button-panel {\n opacity: 1;\n transform: translate(-50%, 0);\n }\n }\n\n .lineplayer-button-mask {\n pointer-events: none;\n position: absolute;\n bottom: 100%;\n left: 50%;\n min-width: 40px;\n max-width: 200px;\n }\n\n .lineplayer-button-panel {\n opacity: 0;\n font-size: 12px;\n border-radius: 4px;\n background: rgba(17, 17, 17, 0.7);\n padding: 5px;\n transition: all 0.3s ease-in-out;\n transform: translate(-50%, 10px);\n transform-origin: top;\n overflow: hidden;\n color: #fff;\n text-align: center;\n\n span:first-child {\n white-space: nowrap;\n overflow: hidden;\n }\n }\n\n .lineplayer-button-prev-panel,\n .lineplayer-button-next-panel {\n width: 100px;\n padding: 0 5px;\n\n span {\n margin: 5px 0;\n display: block;\n }\n }\n\n .lineplayer-quality-item {\n height: 25px;\n box-sizing: border-box;\n cursor: pointer;\n line-height: 25px;\n\n &:hover {\n background-color: rgba(255,255,255,.1);\n }\n }\n }\n >*:before {\n content: "";\n display: block;\n overflow: hidden;\n }\n\n .lineplayer-live-badge {\n line-height: 38px;\n color: #eee;\n text-shadow: 0 0 2px rgba(0,0,0,.5);\n vertical-align: middle;\n font-size: 13px;\n cursor: default;\n text-transform: uppercase;\n display: none;\n }\n\n .lineplayer-live-dot {\n display: inline-block;\n width: 6px;\n height: 6px;\n vertical-align: 4%;\n margin-right: 5px;\n content: \'\';\n border-radius: 6px;\n }\n\n .lineplayer-icon {\n // width: 40px;\n height: 100%;\n border: none;\n background-color: transparent;\n outline: none;\n cursor: pointer;\n color: #fff;\n vertical-align: middle;\n box-sizing: border-box;\n display: inline-block;\n\n .lineplayer-icon-content {\n transition: all .2s ease-in-out;\n opacity: .8;\n }\n\n &:hover {\n .lineplayer-icon-content {\n opacity: 1;\n }\n }\n\n &.lineplayer-volume-icon {\n width: 43px;\n }\n }\n\n .lineplayer-volume {\n position: relative;\n display: inline-block;\n cursor: pointer !important;\n height: 100%;\n\n &:hover {\n .lineplayer-volume-bar {\n width: 45px !important;\n }\n\n .lineplayer-thumb {\n transform: scale(1) !important;\n }\n }\n\n &.lineplayer-volume-active {\n .lineplayer-volume-bar {\n width: 45px !important;\n }\n\n .lineplayer-thumb {\n transform: scale(1) !important;\n }\n }\n\n .lineplayer-volume-bar-wrap {\n display: inline-block;\n margin: 0 10px 0 -5px;\n vertical-align: middle;\n height: 100%;\n\n .lineplayer-volume-bar {\n position: relative;\n top: 17px;\n width: 0;\n height: 3px;\n background: #aaa;\n transition: all 0.3s ease-in-out;\n\n .lineplayer-volume-bar-inner {\n position: absolute;\n bottom: 0;\n left: 0;\n height: 100%;\n transition: all 0.1s ease;\n will-change: width;\n\n .lineplayer-thumb {\n position: absolute;\n top: 0;\n right: 5px;\n margin-top: -4px;\n margin-right: -10px;\n height: 11px;\n width: 11px;\n border-radius: 50%;\n cursor: pointer !important;\n transition: all .3s ease-in-out;\n transform: scale(0);\n }\n }\n }\n }\n }\n\n .lineplayer-play {\n &:hover {\n .lineplayer-button-panel {\n transform: translate(0, 0);\n }\n }\n .lineplayer-button-mask {\n left: 0;\n }\n .lineplayer-button-panel {\n transform: translate(0, 10px);\n }\n }\n .lineplayer-full {\n &:hover {\n .lineplayer-button-panel {\n transform: translate(-100%, 0);\n }\n }\n .lineplayer-button-mask {\n left: 100%;\n }\n .lineplayer-button-panel {\n transform: translate(-100%, 10px);\n }\n }\n\n .lineplayer-label {\n color: #eee;\n font-size: 13px;\n display: inline-block;\n vertical-align: middle;\n white-space: nowrap;\n }\n\n .lineplayer-toggle {\n width: 32px;\n height: 20px;\n text-align: center;\n font-size: 0;\n vertical-align: middle;\n position: absolute;\n top: 5px;\n right: 10px;\n\n input {\n max-height: 0;\n max-width: 0;\n display: none;\n }\n input + label {\n display: inline-block;\n position: relative;\n box-shadow: rgb(223, 223, 223) 0 0 0 0 inset;\n border: 1px solid rgb(223, 223, 223);\n height: 20px;\n width: 32px;\n border-radius: 10px;\n box-sizing: border-box;\n cursor: pointer;\n transition: .2s ease-in-out;\n }\n\n input + label:before {\n content: "";\n position: absolute;\n display: block;\n height: 18px;\n width: 18px;\n top: 0;\n left: 0;\n border-radius: 15px;\n transition: .2s ease-in-out;\n }\n\n input + label:after {\n content: "";\n position: absolute;\n display: block;\n left: 0;\n top: 0;\n border-radius: 15px;\n background: #fff;\n transition: .2s ease-in-out;\n box-shadow: 0 1px 3px rgba(0,0,0,0.4);\n height: 18px;\n width: 18px;\n }\n\n input:checked + label {\n border-color: rgba(255, 255, 255, 0.5);\n }\n\n input:checked + label:before {\n width: 30px;\n background: rgba(255, 255, 255, 0.5);\n }\n\n input:checked + label:after {\n left: 12px;\n }\n }\n }\n }\n\n .lineplayer-menu {\n position: absolute;\n width: 170px;\n border-radius: 2px;\n background: rgba(28, 28, 28, 0.85);\n padding: 5px 0;\n overflow: hidden;\n z-index: 3;\n display: none;\n\n &.lineplayer-menu-show {\n display: block;\n }\n\n .lineplayer-menu-item {\n height: 30px;\n box-sizing: border-box;\n cursor: pointer;\n\n &:hover {\n background-color: rgba(255,255,255,.1);\n }\n\n a {\n display: inline-block;\n padding: 0 10px;\n line-height: 30px;\n color: #eee;\n font-size: 13px;\n display: inline-block;\n vertical-align: middle;\n width: 100%;\n box-sizing: border-box;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n\n &:hover {\n text-decoration: none;\n }\n }\n }\n }\n\n .lineplayer-logo {\n pointer-events: none;\n position: absolute;\n left: 20px;\n top: 20px;\n max-width: 50px;\n max-height: 50px;\n\n img {\n max-width: 100%;\n max-height: 100%;\n background: none;\n }\n }\n\n .lineplayer-notice {\n opacity: 0;\n position: absolute;\n bottom: 60px;\n left: 20px;\n font-size: 14px;\n border-radius: 2px;\n background: rgba(28, 28, 28, 0.9);\n padding: 7px 20px;\n transition: all .3s ease-in-out;\n overflow: hidden;\n color: #fff;\n pointer-events: none;\n }\n}\n\n@keyframes my-face {\n 2% {\n transform: translate(0, 1.5px) rotate(1.5deg);\n }\n 4% {\n transform: translate(0, -1.5px) rotate(-0.5deg);\n }\n 6% {\n transform: translate(0, 1.5px) rotate(-1.5deg);\n }\n 8% {\n transform: translate(0, -1.5px) rotate(-1.5deg);\n }\n 10% {\n transform: translate(0, 2.5px) rotate(1.5deg);\n }\n 12% {\n transform: translate(0, -0.5px) rotate(1.5deg);\n }\n 14% {\n transform: translate(0, -1.5px) rotate(1.5deg);\n }\n 16% {\n transform: translate(0, -0.5px) rotate(-1.5deg);\n }\n 18% {\n transform: translate(0, 0.5px) rotate(-1.5deg);\n }\n 20% {\n transform: translate(0, -1.5px) rotate(2.5deg);\n }\n 22% {\n transform: translate(0, 0.5px) rotate(-1.5deg);\n }\n 24% {\n transform: translate(0, 1.5px) rotate(1.5deg);\n }\n 26% {\n transform: translate(0, 0.5px) rotate(0.5deg);\n }\n 28% {\n transform: translate(0, 0.5px) rotate(1.5deg);\n }\n 30% {\n transform: translate(0, -0.5px) rotate(2.5deg);\n }\n 32% {\n transform: translate(0, 1.5px) rotate(-0.5deg);\n }\n 34% {\n transform: translate(0, 1.5px) rotate(-0.5deg);\n }\n 36% {\n transform: translate(0, -1.5px) rotate(2.5deg);\n }\n 38% {\n transform: translate(0, 1.5px) rotate(-1.5deg);\n }\n 40% {\n transform: translate(0, -0.5px) rotate(2.5deg);\n }\n 42% {\n transform: translate(0, 2.5px) rotate(-1.5deg);\n }\n 44% {\n transform: translate(0, 1.5px) rotate(0.5deg);\n }\n 46% {\n transform: translate(0, -1.5px) rotate(2.5deg);\n }\n 48% {\n transform: translate(0, -0.5px) rotate(0.5deg);\n }\n 50% {\n transform: translate(0, 0.5px) rotate(0.5deg);\n }\n 52% {\n transform: translate(0, 2.5px) rotate(2.5deg);\n }\n 54% {\n transform: translate(0, -1.5px) rotate(1.5deg);\n }\n 56% {\n transform: translate(0, 2.5px) rotate(2.5deg);\n }\n 58% {\n transform: translate(0, 0.5px) rotate(2.5deg);\n }\n 60% {\n transform: translate(0, 2.5px) rotate(2.5deg);\n }\n 62% {\n transform: translate(0, -0.5px) rotate(2.5deg);\n }\n 64% {\n transform: translate(0, -0.5px) rotate(1.5deg);\n }\n 66% {\n transform: translate(0, 1.5px) rotate(-0.5deg);\n }\n 68% {\n transform: translate(0, -1.5px) rotate(-0.5deg);\n }\n 70% {\n transform: translate(0, 1.5px) rotate(0.5deg);\n }\n 72% {\n transform: translate(0, 2.5px) rotate(1.5deg);\n }\n 74% {\n transform: translate(0, -0.5px) rotate(0.5deg);\n }\n 76% {\n transform: translate(0, -0.5px) rotate(2.5deg);\n }\n 78% {\n transform: translate(0, -0.5px) rotate(1.5deg);\n }\n 80% {\n transform: translate(0, 1.5px) rotate(1.5deg);\n }\n 82% {\n transform: translate(0, -0.5px) rotate(0.5deg);\n }\n 84% {\n transform: translate(0, 1.5px) rotate(2.5deg);\n }\n 86% {\n transform: translate(0, -1.5px) rotate(-1.5deg);\n }\n 88% {\n transform: translate(0, -0.5px) rotate(2.5deg);\n }\n 90% {\n transform: translate(0, 2.5px) rotate(-0.5deg);\n }\n 92% {\n transform: translate(0, 0.5px) rotate(-0.5deg);\n }\n