dplayer
Version:
Wow, such a lovely HTML5 danmaku video player
1 lines • 305 kB
JavaScript
!function(n,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("DPlayer",[],e):"object"==typeof exports?exports.DPlayer=e():n.DPlayer=e()}(self,(()=>(()=>{var n={916:(n,e,t)=>{var a=t(471);n.exports=function(n){"use strict";var e,o="",r=(n=n||{}).video,i=n.options,l=a.$escape,s=n.tran,p=n.icons,d=n.index,c=a.$each;return n.$value,n.$index,o+='<div class="dplayer-mask"></div>\n<div class="dplayer-video-wrap">\n ',e=t(568)(r),o+=e,o+="\n ",i.logo&&(o+='\n <div class="dplayer-logo">\n <img src="',o+=l(i.logo),o+='">\n </div>\n '),o+='\n <div class="dplayer-danmaku"',i.danmaku&&i.danmaku.bottom&&(o+=' style="margin-bottom:',o+=l(i.danmaku.bottom),o+='"'),o+='>\n <div class="dplayer-danmaku-item dplayer-danmaku-item--demo"></div>\n </div>\n <div class="dplayer-subtitle"></div>\n <div class="dplayer-bezel">\n <span class="dplayer-bezel-icon"></span>\n ',i.danmaku&&(o+='\n <span class="dplayer-danloading">',o+=l(s("danmaku-loading")),o+="</span>\n "),o+='\n <span class="diplayer-loading-icon">',o+=p.loading,o+='</span>\n </div>\n</div>\n<div class="dplayer-controller-mask"></div>\n<div class="dplayer-controller">\n <div class="dplayer-icons dplayer-comment-box">\n <button class="dplayer-icon dplayer-comment-setting-icon" data-balloon="',o+=l(s("setting")),o+='" data-balloon-pos="up">\n <span class="dplayer-icon-content">',o+=p.pallette,o+='</span>\n </button>\n <div class="dplayer-comment-setting-box">\n <div class="dplayer-comment-setting-color">\n <div class="dplayer-comment-setting-title">',o+=l(s("set-danmaku-color")),o+='</div>\n <label>\n <input type="radio" name="dplayer-danmaku-color-',o+=l(d),o+='" value="#fff" checked>\n <span style="background: #fff;"></span>\n </label>\n <label>\n <input type="radio" name="dplayer-danmaku-color-',o+=l(d),o+='" value="#e54256">\n <span style="background: #e54256"></span>\n </label>\n <label>\n <input type="radio" name="dplayer-danmaku-color-',o+=l(d),o+='" value="#ffe133">\n <span style="background: #ffe133"></span>\n </label>\n <label>\n <input type="radio" name="dplayer-danmaku-color-',o+=l(d),o+='" value="#64DD17">\n <span style="background: #64DD17"></span>\n </label>\n <label>\n <input type="radio" name="dplayer-danmaku-color-',o+=l(d),o+='" value="#39ccff">\n <span style="background: #39ccff"></span>\n </label>\n <label>\n <input type="radio" name="dplayer-danmaku-color-',o+=l(d),o+='" value="#D500F9">\n <span style="background: #D500F9"></span>\n </label>\n </div>\n <div class="dplayer-comment-setting-type">\n <div class="dplayer-comment-setting-title">',o+=l(s("set-danmaku-type")),o+='</div>\n <label>\n <input type="radio" name="dplayer-danmaku-type-',o+=l(d),o+='" value="1">\n <span>',o+=l(s("top")),o+='</span>\n </label>\n <label>\n <input type="radio" name="dplayer-danmaku-type-',o+=l(d),o+='" value="0" checked>\n <span>',o+=l(s("rolling")),o+='</span>\n </label>\n <label>\n <input type="radio" name="dplayer-danmaku-type-',o+=l(d),o+='" value="2">\n <span>',o+=l(s("bottom")),o+='</span>\n </label>\n </div>\n </div>\n <input class="dplayer-comment-input" type="text" placeholder="',o+=l(s("input-danmaku-enter")),o+='" maxlength="30">\n <button class="dplayer-icon dplayer-send-icon" data-balloon="',o+=l(s("send")),o+='" data-balloon-pos="up">\n <span class="dplayer-icon-content">',o+=p.send,o+='</span>\n </button>\n </div>\n <div class="dplayer-icons dplayer-icons-left">\n <button class="dplayer-icon dplayer-play-icon">\n <span class="dplayer-icon-content">',o+=p.play,o+='</span>\n </button>\n <div class="dplayer-volume">\n <button class="dplayer-icon dplayer-volume-icon">\n <span class="dplayer-icon-content">',o+=p.volumeDown,o+='</span>\n </button>\n <div class="dplayer-volume-bar-wrap" data-balloon-pos="up">\n <div class="dplayer-volume-bar">\n <div class="dplayer-volume-bar-inner" style="background: ',o+=l(i.theme),o+=';">\n <span class="dplayer-thumb" style="background: ',o+=l(i.theme),o+='"></span>\n </div>\n </div>\n </div>\n </div>\n <span class="dplayer-time">\n <span class="dplayer-ptime">0:00</span> /\n <span class="dplayer-dtime">0:00</span>\n </span>\n ',i.live&&(o+='\n <span class="dplayer-live-badge"><span class="dplayer-live-dot" style="background: ',o+=l(i.theme),o+=';"></span>',o+=l(s("live")),o+="</span>\n "),o+='\n </div>\n <div class="dplayer-icons dplayer-icons-right">\n ',i.video.quality&&(o+='\n <div class="dplayer-quality">\n <button class="dplayer-icon dplayer-quality-icon">',o+=l(i.video.quality[i.video.defaultQuality].name),o+='</button>\n <div class="dplayer-quality-mask">\n <div class="dplayer-quality-list">\n ',c(i.video.quality,(function(n,e){o+='\n <div class="dplayer-quality-item" data-index="',o+=l(e),o+='">',o+=l(n.name),o+="</div>\n "})),o+="\n </div>\n </div>\n </div>\n "),o+="\n ",i.screenshot&&(o+='\n <div class="dplayer-icon dplayer-camera-icon" data-balloon="',o+=l(s("screenshot")),o+='" data-balloon-pos="up">\n <span class="dplayer-icon-content">',o+=p.camera,o+="</span>\n </div>\n "),o+="\n ",i.airplay&&(o+='\n <div class="dplayer-icon dplayer-airplay-icon" data-balloon="',o+=l(s("airplay")),o+='" data-balloon-pos="up">\n <span class="dplayer-icon-content">',o+=p.airplay,o+="</span>\n </div>\n "),o+="\n ",i.chromecast&&(o+='\n <div class="dplayer-icon dplayer-chromecast-icon" data-balloon="',o+=l(s("chromecast")),o+='" data-balloon-pos="up">\n <span class="dplayer-icon-content">',o+=p.chromecast,o+="</span>\n </div>\n "),o+='\n <div class="dplayer-comment">\n <button class="dplayer-icon dplayer-comment-icon" data-balloon="',o+=l(s("send-danmaku")),o+='" data-balloon-pos="up">\n <span class="dplayer-icon-content">',o+=p.comment,o+="</span>\n </button>\n </div>\n ",i.subtitle&&(o+="\n ","string"==typeof i.subtitle.url?(o+='\n <div class="dplayer-subtitle-btn">\n <button class="dplayer-icon dplayer-subtitle-icon" data-balloon="',o+=l(s("hide-subs")),o+='" data-balloon-pos="up">\n <span class="dplayer-icon-content">',o+=p.subtitle,o+="</span>\n </button>\n </div>\n "):(o+='\n <div class="dplayer-subtitles">\n <button class="dplayer-icon dplayer-subtitles-icon" data-balloon="',o+=l(s("subtitle")),o+='" data-balloon-pos="up">\n <span class="dplayer-icon-content">',o+=p.subtitle,o+='</span>\n </button>\n <div class="dplayer-subtitles-box">\n <div class="dplayer-subtitles-panel">\n ',c(i.subtitle.url,(function(n,e){o+='\n <div class="dplayer-subtitles-item" data-subtitle="',o+=l(n.url),o+='">\n \x3c!-- if lang, show tran(lang). if lang and name, show name + (tran(lang)). if name, show name. off option use lang for translation. --\x3e\n <span class="dplayer-label">',o+=l(n.lang?n.name?n.name+" ("+s(n.lang)+")":s(n.lang):n.name),o+="</span>\n </div>\n "})),o+="\n </div>\n </div>\n </div>\n "),o+="\n "),o+='\n <div class="dplayer-setting">\n <button class="dplayer-icon dplayer-setting-icon" data-balloon="',o+=l(s("setting")),o+='" data-balloon-pos="up">\n <span class="dplayer-icon-content">',o+=p.setting,o+='</span>\n </button>\n <div class="dplayer-setting-box">\n <div class="dplayer-setting-origin-panel">\n <div class="dplayer-setting-item dplayer-setting-speed">\n <span class="dplayer-label">',o+=l(s("speed")),o+='</span>\n <div class="dplayer-toggle">',o+=p.right,o+='</div>\n </div>\n <div class="dplayer-setting-item dplayer-setting-loop">\n <span class="dplayer-label">',o+=l(s("loop")),o+='</span>\n <div class="dplayer-toggle">\n <input class="dplayer-toggle-setting-input" type="checkbox" name="dplayer-toggle">\n <label for="dplayer-toggle"></label>\n </div>\n </div>\n <div class="dplayer-setting-item dplayer-setting-showdan">\n <span class="dplayer-label">',o+=l(s("show-danmaku")),o+='</span>\n <div class="dplayer-toggle">\n <input class="dplayer-showdan-setting-input" type="checkbox" name="dplayer-toggle-dan">\n <label for="dplayer-toggle-dan"></label>\n </div>\n </div>\n <div class="dplayer-setting-item dplayer-setting-danunlimit">\n <span class="dplayer-label">',o+=l(s("unlimited-danmaku")),o+='</span>\n <div class="dplayer-toggle">\n <input class="dplayer-danunlimit-setting-input" type="checkbox" name="dplayer-toggle-danunlimit">\n <label for="dplayer-toggle-danunlimit"></label>\n </div>\n </div>\n <div class="dplayer-setting-item dplayer-setting-danmaku">\n <span class="dplayer-label">',o+=l(s("opacity-danmaku")),o+='</span>\n <div class="dplayer-danmaku-bar-wrap">\n <div class="dplayer-danmaku-bar">\n <div class="dplayer-danmaku-bar-inner">\n <span class="dplayer-thumb"></span>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class="dplayer-setting-speed-panel">\n ',c(i.playbackSpeed,(function(n,e){o+='\n <div class="dplayer-setting-speed-item" data-speed="',o+=l(n),o+='">\n <span class="dplayer-label">',o+=l(1===n?s("normal"):n),o+="</span>\n </div>\n "})),o+='\n </div>\n </div>\n </div>\n <div class="dplayer-full">\n <button class="dplayer-icon dplayer-full-in-icon" data-balloon="',o+=l(s("web-fullscreen")),o+='" data-balloon-pos="up">\n <span class="dplayer-icon-content">',o+=p.fullWeb,o+='</span>\n </button>\n <button class="dplayer-icon dplayer-full-icon" data-balloon="',o+=l(s("fullscreen")),o+='" data-balloon-pos="up">\n <span class="dplayer-icon-content">',o+=p.full,o+='</span>\n </button>\n </div>\n </div>\n <div class="dplayer-bar-wrap">\n <div class="dplayer-bar-time hidden">00:00</div>\n <div class="dplayer-bar-preview"></div>\n <div class="dplayer-bar">\n <div class="dplayer-loaded" style="width: 0;"></div>\n <div class="dplayer-played" style="width: 0; background: ',o+=l(i.theme),o+='">\n <span class="dplayer-thumb" style="background: ',o+=l(i.theme),o+='"></span>\n </div>\n </div>\n </div>\n</div>\n<div class="dplayer-info-panel dplayer-info-panel-hide">\n <div class="dplayer-info-panel-close">[x]</div>\n <div class="dplayer-info-panel-item dplayer-info-panel-item-version">\n <span class="dplayer-info-panel-item-title">Player version</span>\n <span class="dplayer-info-panel-item-data"></span>\n </div>\n <div class="dplayer-info-panel-item dplayer-info-panel-item-fps">\n <span class="dplayer-info-panel-item-title">Player FPS</span>\n <span class="dplayer-info-panel-item-data"></span>\n </div>\n <div class="dplayer-info-panel-item dplayer-info-panel-item-type">\n <span class="dplayer-info-panel-item-title">Video type</span>\n <span class="dplayer-info-panel-item-data"></span>\n </div>\n <div class="dplayer-info-panel-item dplayer-info-panel-item-url">\n <span class="dplayer-info-panel-item-title">Video url</span>\n <span class="dplayer-info-panel-item-data"></span>\n </div>\n <div class="dplayer-info-panel-item dplayer-info-panel-item-resolution">\n <span class="dplayer-info-panel-item-title">Video resolution</span>\n <span class="dplayer-info-panel-item-data"></span>\n </div>\n <div class="dplayer-info-panel-item dplayer-info-panel-item-duration">\n <span class="dplayer-info-panel-item-title">Video duration</span>\n <span class="dplayer-info-panel-item-data"></span>\n </div>\n ',i.danmaku&&(o+='\n <div class="dplayer-info-panel-item dplayer-info-panel-item-danmaku-id">\n <span class="dplayer-info-panel-item-title">Danmaku id</span>\n <span class="dplayer-info-panel-item-data"></span>\n </div>\n <div class="dplayer-info-panel-item dplayer-info-panel-item-danmaku-api">\n <span class="dplayer-info-panel-item-title">Danmaku api</span>\n <span class="dplayer-info-panel-item-data"></span>\n </div>\n <div class="dplayer-info-panel-item dplayer-info-panel-item-danmaku-amount">\n <span class="dplayer-info-panel-item-title">Danmaku amount</span>\n <span class="dplayer-info-panel-item-data"></span>\n </div>\n '),o+='\n</div>\n<div class="dplayer-menu">\n ',c(i.contextmenu,(function(n,e){o+='\n <div class="dplayer-menu-item">\n <a',n.link&&(o+=' target="_blank"'),o+=' href="',o+=l(n.link||"javascript:void(0);"),o+='">',n.key&&(o+=" ",o+=l(s(n.key))),n.text&&(o+=" ",o+=l(n.text)),o+="</a>\n </div>\n "})),o+='\n</div>\n<div class="dplayer-notice-list"></div>\n<button class="dplayer-mobile-play">\n ',o+=p.play,o+="\n</button>"}},568:(n,e,t)=>{var a=t(471);n.exports=function(n){"use strict";var e="",t=(n=n||{}).enableSubtitle,o=n.subtitle,r=n.current,i=n.airplay,l=n.pic,s=a.$escape,p=n.screenshot,d=n.preload,c=n.url;return t=o&&"webvtt"===o.type,e+='\n<video\n class="dplayer-video ',r&&(e+="dplayer-video-current"),e+='"\n webkit-playsinline\n ',i&&(e+=' x-webkit-airplay="allow" '),e+="\n playsinline\n ",l&&(e+='poster="',e+=s(l),e+='"'),e+="\n ",(p||t)&&(e+='crossorigin="anonymous"'),e+="\n ",d&&(e+='preload="',e+=s(d),e+='"'),e+="\n ",i?e+="\n nosrc\n ":c&&(e+='\n src="',e+=s(c),e+='"\n '),e+="\n >\n ",i&&(e+='\n <source src="',e+=s(c),e+='">\n '),e+="\n ",t&&(e+='\n <track class="dplayer-subtrack" kind="metadata" default src="',e+=s("string"==typeof o.url?o.url:o.url[o.index].url),e+='"></track>\n '),e+"\n</video>"}},49:(n,e,t)=>{"use strict";t.d(e,{Z:()=>l});var a=t(415),o=t.n(a),r=t(352),i=t.n(r)()(o());i.push([n.id,':root {\n --balloon-border-radius: 2px;\n --balloon-color: rgba(16, 16, 16, 0.95);\n --balloon-text-color: #fff;\n --balloon-font-size: 12px;\n --balloon-move: 4px; }\n\nbutton[aria-label][data-balloon-pos] {\n overflow: visible; }\n\n[aria-label][data-balloon-pos] {\n position: relative;\n cursor: pointer; }\n [aria-label][data-balloon-pos]:after {\n opacity: 0;\n pointer-events: none;\n transition: all 0.18s ease-out 0.18s;\n text-indent: 0;\n font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;\n font-weight: normal;\n font-style: normal;\n text-shadow: none;\n font-size: 12px;\n font-size: var(--balloon-font-size);\n background: rgba(16, 16, 16, 0.95);\n background: var(--balloon-color);\n border-radius: 2px;\n color: #fff;\n color: var(--balloon-text-color);\n border-radius: var(--balloon-border-radius);\n content: attr(aria-label);\n padding: .5em 1em;\n position: absolute;\n white-space: nowrap;\n z-index: 10; }\n [aria-label][data-balloon-pos]:before {\n width: 0;\n height: 0;\n border: 5px solid transparent;\n border-top-color: rgba(16, 16, 16, 0.95);\n border-top-color: var(--balloon-color);\n opacity: 0;\n pointer-events: none;\n transition: all 0.18s ease-out 0.18s;\n content: "";\n position: absolute;\n z-index: 10; }\n [aria-label][data-balloon-pos]:hover:before, [aria-label][data-balloon-pos]:hover:after, [aria-label][data-balloon-pos][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-visible]:after, [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:before, [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:after {\n opacity: 1;\n pointer-events: none; }\n [aria-label][data-balloon-pos].font-awesome:after {\n font-family: FontAwesome, -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, Oxygen, Ubuntu, Cantarell, \'Open Sans\', \'Helvetica Neue\', sans-serif; }\n [aria-label][data-balloon-pos][data-balloon-break]:after {\n white-space: pre; }\n [aria-label][data-balloon-pos][data-balloon-break][data-balloon-length]:after {\n white-space: pre-line;\n word-break: break-word; }\n [aria-label][data-balloon-pos][data-balloon-blunt]:before, [aria-label][data-balloon-pos][data-balloon-blunt]:after {\n transition: none; }\n [aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:after {\n transform: translate(-50%, 0); }\n [aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:before {\n transform: translate(-50%, 0); }\n [aria-label][data-balloon-pos][data-balloon-pos*="-left"]:after {\n left: 0; }\n [aria-label][data-balloon-pos][data-balloon-pos*="-left"]:before {\n left: 5px; }\n [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:after {\n right: 0; }\n [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:before {\n right: 5px; }\n [aria-label][data-balloon-pos][data-balloon-po*="-left"]:hover:after, [aria-label][data-balloon-pos][data-balloon-po*="-left"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:after {\n transform: translate(0, 0); }\n [aria-label][data-balloon-pos][data-balloon-po*="-left"]:hover:before, [aria-label][data-balloon-pos][data-balloon-po*="-left"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:before {\n transform: translate(0, 0); }\n [aria-label][data-balloon-pos][data-balloon-pos^="up"]:before, [aria-label][data-balloon-pos][data-balloon-pos^="up"]:after {\n bottom: 100%;\n transform-origin: top;\n transform: translate(0, 4px);\n transform: translate(0, var(--balloon-move)); }\n [aria-label][data-balloon-pos][data-balloon-pos^="up"]:after {\n margin-bottom: 10px; }\n [aria-label][data-balloon-pos][data-balloon-pos="up"]:before, [aria-label][data-balloon-pos][data-balloon-pos="up"]:after {\n left: 50%;\n transform: translate(-50%, 4px);\n transform: translate(-50%, var(--balloon-move)); }\n [aria-label][data-balloon-pos][data-balloon-pos^="down"]:before, [aria-label][data-balloon-pos][data-balloon-pos^="down"]:after {\n top: 100%;\n transform: translate(0, calc(4px * -1));\n transform: translate(0, calc(var(--balloon-move) * -1)); }\n [aria-label][data-balloon-pos][data-balloon-pos^="down"]:after {\n margin-top: 10px; }\n [aria-label][data-balloon-pos][data-balloon-pos^="down"]:before {\n width: 0;\n height: 0;\n border: 5px solid transparent;\n border-bottom-color: rgba(16, 16, 16, 0.95);\n border-bottom-color: var(--balloon-color); }\n [aria-label][data-balloon-pos][data-balloon-pos="down"]:after, [aria-label][data-balloon-pos][data-balloon-pos="down"]:before {\n left: 50%;\n transform: translate(-50%, calc(4px * -1));\n transform: translate(-50%, calc(var(--balloon-move) * -1)); }\n [aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:after {\n transform: translate(0, -50%); }\n [aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:before {\n transform: translate(0, -50%); }\n [aria-label][data-balloon-pos][data-balloon-pos="left"]:after, [aria-label][data-balloon-pos][data-balloon-pos="left"]:before {\n right: 100%;\n top: 50%;\n transform: translate(4px, -50%);\n transform: translate(var(--balloon-move), -50%); }\n [aria-label][data-balloon-pos][data-balloon-pos="left"]:after {\n margin-right: 10px; }\n [aria-label][data-balloon-pos][data-balloon-pos="left"]:before {\n width: 0;\n height: 0;\n border: 5px solid transparent;\n border-left-color: rgba(16, 16, 16, 0.95);\n border-left-color: var(--balloon-color); }\n [aria-label][data-balloon-pos][data-balloon-pos="right"]:after, [aria-label][data-balloon-pos][data-balloon-pos="right"]:before {\n left: 100%;\n top: 50%;\n transform: translate(calc(4px * -1), -50%);\n transform: translate(calc(var(--balloon-move) * -1), -50%); }\n [aria-label][data-balloon-pos][data-balloon-pos="right"]:after {\n margin-left: 10px; }\n [aria-label][data-balloon-pos][data-balloon-pos="right"]:before {\n width: 0;\n height: 0;\n border: 5px solid transparent;\n border-right-color: rgba(16, 16, 16, 0.95);\n border-right-color: var(--balloon-color); }\n [aria-label][data-balloon-pos][data-balloon-length]:after {\n white-space: normal; }\n [aria-label][data-balloon-pos][data-balloon-length="small"]:after {\n width: 80px; }\n [aria-label][data-balloon-pos][data-balloon-length="medium"]:after {\n width: 150px; }\n [aria-label][data-balloon-pos][data-balloon-length="large"]:after {\n width: 260px; }\n [aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after {\n width: 380px; }\n @media screen and (max-width: 768px) {\n [aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after {\n width: 90vw; } }\n [aria-label][data-balloon-pos][data-balloon-length="fit"]:after {\n width: 100%; }\n',"",{version:3,sources:["webpack://./node_modules/.pnpm/balloon-css@1.2.0/node_modules/balloon-css/balloon.css"],names:[],mappings:"AAAA;EACE,4BAA4B;EAC5B,uCAAuC;EACvC,0BAA0B;EAC1B,yBAAyB;EACzB,mBAAmB,EAAE;;AAEvB;EACE,iBAAiB,EAAE;;AAErB;EACE,kBAAkB;EAClB,eAAe,EAAE;EACjB;IACE,UAAU;IACV,oBAAoB;IACpB,oCAAoC;IACpC,cAAc;IACd,wIAAwI;IACxI,mBAAmB;IACnB,kBAAkB;IAClB,iBAAiB;IACjB,eAAmC;IAAnC,mCAAmC;IACnC,kCAAgC;IAAhC,gCAAgC;IAChC,kBAAkB;IAClB,WAAgC;IAAhC,gCAAgC;IAChC,2CAA2C;IAC3C,yBAAyB;IACzB,iBAAiB;IACjB,kBAAkB;IAClB,mBAAmB;IACnB,WAAW,EAAE;EACf;IACE,QAAQ;IACR,SAAS;IACT,6BAA6B;IAC7B,wCAAsC;IAAtC,sCAAsC;IACtC,UAAU;IACV,oBAAoB;IACpB,oCAAoC;IACpC,WAAW;IACX,kBAAkB;IAClB,WAAW,EAAE;EACf;IACE,UAAU;IACV,oBAAoB,EAAE;EACxB;IACE,qJAAqJ,EAAE;EACzJ;IACE,gBAAgB,EAAE;EACpB;IACE,qBAAqB;IACrB,sBAAsB,EAAE;EAC1B;IACE,gBAAgB,EAAE;EACpB;IACE,6BAA6B,EAAE;EACjC;IACE,6BAA6B,EAAE;EACjC;IACE,OAAO,EAAE;EACX;IACE,SAAS,EAAE;EACb;IACE,QAAQ,EAAE;EACZ;IACE,UAAU,EAAE;EACd;IACE,0BAA0B,EAAE;EAC9B;IACE,0BAA0B,EAAE;EAC9B;IACE,YAAY;IACZ,qBAAqB;IACrB,4BAA4C;IAA5C,4CAA4C,EAAE;EAChD;IACE,mBAAmB,EAAE;EACvB;IACE,SAAS;IACT,+BAA+C;IAA/C,+CAA+C,EAAE;EACnD;IACE,SAAS;IACT,uCAAuD;IAAvD,uDAAuD,EAAE;EAC3D;IACE,gBAAgB,EAAE;EACpB;IACE,QAAQ;IACR,SAAS;IACT,6BAA6B;IAC7B,2CAAyC;IAAzC,yCAAyC,EAAE;EAC7C;IACE,SAAS;IACT,0CAA0D;IAA1D,0DAA0D,EAAE;EAC9D;IACE,6BAA6B,EAAE;EACjC;IACE,6BAA6B,EAAE;EACjC;IACE,WAAW;IACX,QAAQ;IACR,+BAA+C;IAA/C,+CAA+C,EAAE;EACnD;IACE,kBAAkB,EAAE;EACtB;IACE,QAAQ;IACR,SAAS;IACT,6BAA6B;IAC7B,yCAAuC;IAAvC,uCAAuC,EAAE;EAC3C;IACE,UAAU;IACV,QAAQ;IACR,0CAA0D;IAA1D,0DAA0D,EAAE;EAC9D;IACE,iBAAiB,EAAE;EACrB;IACE,QAAQ;IACR,SAAS;IACT,6BAA6B;IAC7B,0CAAwC;IAAxC,wCAAwC,EAAE;EAC5C;IACE,mBAAmB,EAAE;EACvB;IACE,WAAW,EAAE;EACf;IACE,YAAY,EAAE;EAChB;IACE,YAAY,EAAE;EAChB;IACE,YAAY,EAAE;IACd;MACE;QACE,WAAW,EAAE,EAAE;EACrB;IACE,WAAW,EAAE",sourcesContent:[':root {\n --balloon-border-radius: 2px;\n --balloon-color: rgba(16, 16, 16, 0.95);\n --balloon-text-color: #fff;\n --balloon-font-size: 12px;\n --balloon-move: 4px; }\n\nbutton[aria-label][data-balloon-pos] {\n overflow: visible; }\n\n[aria-label][data-balloon-pos] {\n position: relative;\n cursor: pointer; }\n [aria-label][data-balloon-pos]:after {\n opacity: 0;\n pointer-events: none;\n transition: all 0.18s ease-out 0.18s;\n text-indent: 0;\n font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;\n font-weight: normal;\n font-style: normal;\n text-shadow: none;\n font-size: var(--balloon-font-size);\n background: var(--balloon-color);\n border-radius: 2px;\n color: var(--balloon-text-color);\n border-radius: var(--balloon-border-radius);\n content: attr(aria-label);\n padding: .5em 1em;\n position: absolute;\n white-space: nowrap;\n z-index: 10; }\n [aria-label][data-balloon-pos]:before {\n width: 0;\n height: 0;\n border: 5px solid transparent;\n border-top-color: var(--balloon-color);\n opacity: 0;\n pointer-events: none;\n transition: all 0.18s ease-out 0.18s;\n content: "";\n position: absolute;\n z-index: 10; }\n [aria-label][data-balloon-pos]:hover:before, [aria-label][data-balloon-pos]:hover:after, [aria-label][data-balloon-pos][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-visible]:after, [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:before, [aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:after {\n opacity: 1;\n pointer-events: none; }\n [aria-label][data-balloon-pos].font-awesome:after {\n font-family: FontAwesome, -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, Oxygen, Ubuntu, Cantarell, \'Open Sans\', \'Helvetica Neue\', sans-serif; }\n [aria-label][data-balloon-pos][data-balloon-break]:after {\n white-space: pre; }\n [aria-label][data-balloon-pos][data-balloon-break][data-balloon-length]:after {\n white-space: pre-line;\n word-break: break-word; }\n [aria-label][data-balloon-pos][data-balloon-blunt]:before, [aria-label][data-balloon-pos][data-balloon-blunt]:after {\n transition: none; }\n [aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:after {\n transform: translate(-50%, 0); }\n [aria-label][data-balloon-pos][data-balloon-pos="up"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="up"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos="down"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="down"][data-balloon-visible]:before {\n transform: translate(-50%, 0); }\n [aria-label][data-balloon-pos][data-balloon-pos*="-left"]:after {\n left: 0; }\n [aria-label][data-balloon-pos][data-balloon-pos*="-left"]:before {\n left: 5px; }\n [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:after {\n right: 0; }\n [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:before {\n right: 5px; }\n [aria-label][data-balloon-pos][data-balloon-po*="-left"]:hover:after, [aria-label][data-balloon-pos][data-balloon-po*="-left"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:after {\n transform: translate(0, 0); }\n [aria-label][data-balloon-pos][data-balloon-po*="-left"]:hover:before, [aria-label][data-balloon-pos][data-balloon-po*="-left"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos*="-right"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos*="-right"][data-balloon-visible]:before {\n transform: translate(0, 0); }\n [aria-label][data-balloon-pos][data-balloon-pos^="up"]:before, [aria-label][data-balloon-pos][data-balloon-pos^="up"]:after {\n bottom: 100%;\n transform-origin: top;\n transform: translate(0, var(--balloon-move)); }\n [aria-label][data-balloon-pos][data-balloon-pos^="up"]:after {\n margin-bottom: 10px; }\n [aria-label][data-balloon-pos][data-balloon-pos="up"]:before, [aria-label][data-balloon-pos][data-balloon-pos="up"]:after {\n left: 50%;\n transform: translate(-50%, var(--balloon-move)); }\n [aria-label][data-balloon-pos][data-balloon-pos^="down"]:before, [aria-label][data-balloon-pos][data-balloon-pos^="down"]:after {\n top: 100%;\n transform: translate(0, calc(var(--balloon-move) * -1)); }\n [aria-label][data-balloon-pos][data-balloon-pos^="down"]:after {\n margin-top: 10px; }\n [aria-label][data-balloon-pos][data-balloon-pos^="down"]:before {\n width: 0;\n height: 0;\n border: 5px solid transparent;\n border-bottom-color: var(--balloon-color); }\n [aria-label][data-balloon-pos][data-balloon-pos="down"]:after, [aria-label][data-balloon-pos][data-balloon-pos="down"]:before {\n left: 50%;\n transform: translate(-50%, calc(var(--balloon-move) * -1)); }\n [aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:after, [aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:after, [aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:after {\n transform: translate(0, -50%); }\n [aria-label][data-balloon-pos][data-balloon-pos="left"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="left"][data-balloon-visible]:before, [aria-label][data-balloon-pos][data-balloon-pos="right"]:hover:before, [aria-label][data-balloon-pos][data-balloon-pos="right"][data-balloon-visible]:before {\n transform: translate(0, -50%); }\n [aria-label][data-balloon-pos][data-balloon-pos="left"]:after, [aria-label][data-balloon-pos][data-balloon-pos="left"]:before {\n right: 100%;\n top: 50%;\n transform: translate(var(--balloon-move), -50%); }\n [aria-label][data-balloon-pos][data-balloon-pos="left"]:after {\n margin-right: 10px; }\n [aria-label][data-balloon-pos][data-balloon-pos="left"]:before {\n width: 0;\n height: 0;\n border: 5px solid transparent;\n border-left-color: var(--balloon-color); }\n [aria-label][data-balloon-pos][data-balloon-pos="right"]:after, [aria-label][data-balloon-pos][data-balloon-pos="right"]:before {\n left: 100%;\n top: 50%;\n transform: translate(calc(var(--balloon-move) * -1), -50%); }\n [aria-label][data-balloon-pos][data-balloon-pos="right"]:after {\n margin-left: 10px; }\n [aria-label][data-balloon-pos][data-balloon-pos="right"]:before {\n width: 0;\n height: 0;\n border: 5px solid transparent;\n border-right-color: var(--balloon-color); }\n [aria-label][data-balloon-pos][data-balloon-length]:after {\n white-space: normal; }\n [aria-label][data-balloon-pos][data-balloon-length="small"]:after {\n width: 80px; }\n [aria-label][data-balloon-pos][data-balloon-length="medium"]:after {\n width: 150px; }\n [aria-label][data-balloon-pos][data-balloon-length="large"]:after {\n width: 260px; }\n [aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after {\n width: 380px; }\n @media screen and (max-width: 768px) {\n [aria-label][data-balloon-pos][data-balloon-length="xlarge"]:after {\n width: 90vw; } }\n [aria-label][data-balloon-pos][data-balloon-length="fit"]:after {\n width: 100%; }\n'],sourceRoot:""}]);const l=i},685:(n,e,t)=>{"use strict";t.d(e,{Z:()=>u});var a=t(415),o=t.n(a),r=t(352),i=t.n(r),l=t(49),s=t(80),p=t.n(s),d=new URL(t(831),t.b),c=i()(o());c.i(l.Z);var A=p()(d);c.push([n.id,'@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.dplayer {\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.dplayer * {\n box-sizing: content-box;\n}\n.dplayer svg {\n width: 100%;\n height: 100%;\n}\n.dplayer svg path,\n.dplayer svg circle {\n fill: #fff;\n}\n.dplayer:-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 margin: 0;\n padding: 0;\n transform: translate(0, 0);\n}\n.dplayer.dplayer-no-danmaku .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box .dplayer-setting-showdan,\n.dplayer.dplayer-no-danmaku .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box .dplayer-setting-danmaku,\n.dplayer.dplayer-no-danmaku .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box .dplayer-setting-danunlimit {\n display: none;\n}\n.dplayer.dplayer-no-danmaku .dplayer-controller .dplayer-icons .dplayer-comment {\n display: none;\n}\n.dplayer.dplayer-no-danmaku .dplayer-danmaku {\n display: none;\n}\n.dplayer.dplayer-live .dplayer-time {\n display: none;\n}\n.dplayer.dplayer-live .dplayer-bar-wrap {\n display: none;\n}\n.dplayer.dplayer-live .dplayer-setting-speed {\n display: none;\n}\n.dplayer.dplayer-live .dplayer-setting-loop {\n display: none;\n}\n.dplayer.dplayer-live.dplayer-no-danmaku .dplayer-setting {\n display: none;\n}\n.dplayer.dplayer-arrow .dplayer-danmaku {\n font-size: 18px;\n}\n.dplayer.dplayer-arrow .dplayer-icon {\n margin: 0 -3px;\n}\n.dplayer.dplayer-playing .dplayer-danmaku .dplayer-danmaku-move {\n animation-play-state: running;\n}\n@media (min-width: 900px) {\n .dplayer.dplayer-playing .dplayer-controller-mask {\n opacity: 0;\n }\n .dplayer.dplayer-playing .dplayer-controller {\n opacity: 0;\n }\n .dplayer.dplayer-playing:hover .dplayer-controller-mask {\n opacity: 1;\n }\n .dplayer.dplayer-playing:hover .dplayer-controller {\n opacity: 1;\n }\n}\n.dplayer.dplayer-loading .dplayer-bezel .diplayer-loading-icon {\n display: block;\n}\n.dplayer.dplayer-loading .dplayer-danmaku,\n.dplayer.dplayer-paused .dplayer-danmaku,\n.dplayer.dplayer-loading .dplayer-danmaku-move,\n.dplayer.dplayer-paused .dplayer-danmaku-move {\n animation-play-state: paused;\n}\n.dplayer.dplayer-hide-controller {\n cursor: none;\n}\n.dplayer.dplayer-hide-controller .dplayer-controller-mask {\n opacity: 0;\n transform: translateY(100%);\n}\n.dplayer.dplayer-hide-controller .dplayer-controller {\n opacity: 0;\n transform: translateY(100%);\n}\n.dplayer.dplayer-show-controller .dplayer-controller-mask {\n opacity: 1;\n}\n.dplayer.dplayer-show-controller .dplayer-controller {\n opacity: 1;\n}\n.dplayer.dplayer-fulled {\n width: 100% !important;\n height: 100% !important;\n}\n.dplayer.dplayer-fulled {\n position: fixed;\n z-index: 100000;\n left: 0;\n top: 0;\n}\n.dplayer.dplayer-mobile .dplayer-controller .dplayer-icons .dplayer-volume,\n.dplayer.dplayer-mobile .dplayer-controller .dplayer-icons .dplayer-camera-icon,\n.dplayer.dplayer-mobile .dplayer-controller .dplayer-icons .dplayer-airplay-icon,\n.dplayer.dplayer-mobile .dplayer-controller .dplayer-icons .dplayer-chromecast-icon,\n.dplayer.dplayer-mobile .dplayer-controller .dplayer-icons .dplayer-play-icon {\n display: none;\n}\n.dplayer.dplayer-mobile .dplayer-controller .dplayer-icons .dplayer-full .dplayer-full-in-icon {\n position: static;\n display: inline-block;\n}\n.dplayer.dplayer-mobile .dplayer-bar-time {\n display: none;\n}\n.dplayer.dplayer-mobile.dplayer-hide-controller .dplayer-mobile-play {\n display: none;\n}\n.dplayer.dplayer-mobile .dplayer-mobile-play {\n display: block;\n}\n.dplayer-web-fullscreen-fix {\n position: fixed;\n top: 0;\n left: 0;\n margin: 0;\n padding: 0;\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.dplayer-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.dplayer-bezel .dplayer-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.dplayer-bezel .dplayer-bezel-icon.dplayer-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.dplayer-bezel .dplayer-danloading {\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.dplayer-bezel .diplayer-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.dplayer-bezel .diplayer-loading-icon .diplayer-loading-hide {\n display: none;\n}\n.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot {\n animation: diplayer-loading-dot-fade 0.8s ease infinite;\n opacity: 0;\n transform-origin: 4px 4px;\n}\n.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-1 {\n animation-delay: 0.1s;\n}\n.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-2 {\n animation-delay: 0.2s;\n}\n.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-3 {\n animation-delay: 0.3s;\n}\n.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-4 {\n animation-delay: 0.4s;\n}\n.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-5 {\n animation-delay: 0.5s;\n}\n.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-6 {\n animation-delay: 0.6s;\n}\n.dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-7 {\n animation-delay: 0.7s;\n}\n@keyframes diplayer-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.dplayer-controller-mask {\n background: url('+A+") repeat-x bottom;\n height: 98px;\n width: 100%;\n position: absolute;\n bottom: 0;\n transition: all 0.3s ease;\n}\n.dplayer-controller {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 41px;\n padding: 0 20px;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n transition: all 0.3s ease;\n}\n.dplayer-controller.dplayer-controller-comment .dplayer-icons {\n display: none;\n}\n.dplayer-controller.dplayer-controller-comment .dplayer-icons.dplayer-comment-box {\n display: block;\n}\n.dplayer-controller .dplayer-bar-wrap {\n padding: 5px 0;\n cursor: pointer;\n position: absolute;\n bottom: 33px;\n width: calc(100% - 40px);\n height: 3px;\n}\n.dplayer-controller .dplayer-bar-wrap:hover .dplayer-bar .dplayer-played .dplayer-thumb {\n transform: scale(1);\n}\n.dplayer-controller .dplayer-bar-wrap:hover .dplayer-highlight {\n display: block;\n width: 8px;\n transform: translateX(-4px);\n top: 4px;\n height: 40%;\n}\n.dplayer-controller .dplayer-bar-wrap .dplayer-highlight {\n z-index: 12;\n position: absolute;\n top: 5px;\n width: 6px;\n height: 20%;\n border-radius: 6px;\n background-color: #fff;\n text-align: center;\n transform: translateX(-3px);\n transition: all 0.2s ease-in-out;\n}\n.dplayer-controller .dplayer-bar-wrap .dplayer-highlight:hover .dplayer-highlight-text {\n display: block;\n}\n.dplayer-controller .dplayer-bar-wrap .dplayer-highlight:hover ~ .dplayer-bar-preview {\n opacity: 0;\n}\n.dplayer-controller .dplayer-bar-wrap .dplayer-highlight:hover ~ .dplayer-bar-time {\n opacity: 0;\n}\n.dplayer-controller .dplayer-bar-wrap .dplayer-highlight .dplayer-highlight-text {\n display: none;\n position: absolute;\n left: 50%;\n top: -24px;\n padding: 5px 8px;\n background-color: rgba(0, 0, 0, 0.62);\n color: #fff;\n border-radius: 4px;\n font-size: 12px;\n white-space: nowrap;\n transform: translateX(-50%);\n}\n.dplayer-controller .dplayer-bar-wrap .dplayer-bar-preview {\n position: absolute;\n background: #fff;\n pointer-events: none;\n display: none;\n background-size: 16000px 100%;\n}\n.dplayer-controller .dplayer-bar-wrap .dplayer-bar-preview-canvas {\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: 1;\n pointer-events: none;\n}\n.dplayer-controller .dplayer-bar-wrap .dplayer-bar-time {\n position: absolute;\n left: 0px;\n top: -20px;\n border-radius: 4px;\n padding: 5px 7px;\n background-color: rgba(0, 0, 0, 0.62);\n color: #fff;\n font-size: 12px;\n text-align: center;\n opacity: 1;\n transition: opacity 0.1s ease-in-out;\n word-wrap: normal;\n word-break: normal;\n z-index: 2;\n pointer-events: none;\n}\n.dplayer-controller .dplayer-bar-wrap .dplayer-bar-time.hidden {\n opacity: 0;\n}\n.dplayer-controller .dplayer-bar-wrap .dplayer-bar {\n position: relative;\n height: 3px;\n width: 100%;\n background: rgba(255, 255, 255, 0.2);\n cursor: pointer;\n}\n.dplayer-controller .dplayer-bar-wrap .dplayer-bar .dplayer-loaded {\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n background: rgba(255, 255, 255, 0.4);\n height: 3px;\n transition: all 0.5s ease;\n will-change: width;\n}\n.dplayer-controller .dplayer-bar-wrap .dplayer-bar .dplayer-played {\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n height: 3px;\n will-change: width;\n}\n.dplayer-controller .dplayer-bar-wrap .dplayer-bar .dplayer-played .dplayer-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;\n transition: all 0.3s ease-in-out;\n transform: scale(0);\n}\n.dplayer-controller .dplayer-icons {\n height: 38px;\n position: absolute;\n bottom: 0;\n}\n.dplayer-controller .dplayer-icons.dplayer-comment-box {\n display: none;\n position: absolute;\n transition: all 0.3s ease-in-out;\n z-index: 2;\n height: 38px;\n bottom: 0;\n left: 20px;\n right: 20px;\n color: #fff;\n}\n.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-icon {\n padding: 7px;\n}\n.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-icon {\n position: absolute;\n left: 0;\n top: 0;\n}\n.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-send-icon {\n position: absolute;\n right: 0;\n top: 0;\n}\n.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box {\n position: absolute;\n background: rgba(28, 28, 28, 0.9);\n bottom: 41px;\n left: 0;\n box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);\n border-radius: 4px;\n padding: 10px 10px 16px;\n font-size: 14px;\n width: 204px;\n transition: all 0.3s ease-in-out;\n transform: scale(0);\n}\n.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box.dplayer-comment-setting-open {\n transform: scale(1);\n}\n.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box input[type=radio] {\n display: none;\n}\n.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box label {\n cursor: pointer;\n}\n.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-title {\n font-size: 13px;\n color: #fff;\n line-height: 30px;\n}\n.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-type {\n font-size: 0;\n}\n.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-type .dplayer-comment-setting-title {\n margin-bottom: 6px;\n}\n.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-type label:nth-child(2) span {\n border-radius: 4px 0 0 4px;\n}\n.dplayer-controller .dplayer-icons.dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-type label:nth-ch