diff --git a/README.md b/README.md index 8a952be..20a927b 100644 --- a/README.md +++ b/README.md @@ -50,12 +50,13 @@ var option = { theme: '#FADFA3', // Optional, theme color, default: #b7daff loop: true, // Optional, loop play music, default: true lang: 'zh', // Optional, language, `zh` for Chinese, `en` for English, default: Navigator language + screenshot: true, // Optional, enable screenshot function, default: false, NOTICE: if set it to true, video and video poster must enable Cross-Origin video: { // Required, video info - url: '若能绽放光芒.mp4', // Required, video url - pic: '若能绽放光芒.png' // Optional, music picture + url: '若能绽放光芒.mp4', // Required, video url + pic: '若能绽放光芒.png' // Optional, music picture }, danmaku: { // Optional, showing danmaku - id: '9E2E3368B56CDBB4', // Required, danmaku id, MUST BE UNIQUE, CAN NOT USE THESE IN YOUR NEW PLAYER: `https://dplayer.daoapp.io/list` + id: '9E2E3368B56CDBB4', // Required, danmaku id, NOTICE: it must be unique, can not use these in your new player: `https://dplayer.daoapp.io/list` api: 'https://dplayer.daoapp.io/', // Required, danmaku api token: 'tokendemo', // Optional, danmaku token for api maximum: 1000 // Optional, maximum quantity of danmaku diff --git a/demo/index.html b/demo/index.html index 52a61d3..c5fe373 100644 --- a/demo/index.html +++ b/demo/index.html @@ -61,6 +61,7 @@ autoplay: false, theme: '#FADFA3', loop: true, + screenshot: true, video: { url: 'http://devtest.qiniudn.com/若能绽放光芒.mp4', pic: 'http://devtest.qiniudn.com/若能绽放光芒.png' diff --git a/dist/DPlayer.min.js b/dist/DPlayer.min.js index 4485d15..4c15d4e 100644 --- a/dist/DPlayer.min.js +++ b/dist/DPlayer.min.js @@ -1,4 +1,4 @@ -!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var a=t();for(var n in a)("object"==typeof exports?exports:e)[n]=a[n]}}(this,function(){return function(e){function t(n){if(a[n])return a[n].exports;var r=a[n]={exports:{},id:n,loaded:!1};return e[n].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var a={};return t.m=e,t.c=a,t.p="",t(0)}([function(e,t,a){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e},l=function(){function e(e,t){for(var a=0;a\n \n \n \n '},this.isMobile=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i),this.isMobile&&(t.autoplay=!1);var r={element:document.getElementsByClassName("dplayer")[0],autoplay:!1,theme:"#b7daff",loop:!1,lang:navigator.language.indexOf("zh")!==-1?"zh":"en"};for(var l in r)r.hasOwnProperty(l)&&!t.hasOwnProperty(l)&&(t[l]=r[l]);this.option=t,this.loop=t.loop,this.tranZH={"Danmaku is loading":"弹幕加载中",Top:"顶部",Bottom:"底部",Rolling:"滚动","Input danmaku, hit Enter":"输入弹幕，回车发送","About author":"关于作者","DPlayer feedback":"播放器意见反馈","About DPlayer":"关于 DPlay 播放器",Loop:"洗脑循环",Speed:"速度","Opacity for danmaku":"弹幕透明度",Normal:"正常","Please input danmaku!":"要输入弹幕内容啊喂！","Set danmaku color":"设置弹幕颜色","Set danmaku type":"设置弹幕类型",Danmaku:"弹幕"},this.getTran=function(e){return"en"===a.option.lang?e:"zh"===a.option.lang?a.tranZH[e]:void 0},this.secondToTime=function(e){var t=function(e){return e<10?"0"+e:""+e},a=parseInt(e/60),n=parseInt(e-60*a);return t(a)+":"+t(n)},this.updateBar=function(e,t,n){t=t>0?t:0,t=t<1?t:1,a[e+"Bar"].style[n]=100*t+"%"},this.eventTypes=["play","pause","canplay","playing","ended","error"],this.event={};for(var o=0;o\n
\n \n
\n
\n \n '+(this.option.danmaku?''+this.getTran("Danmaku is loading")+"":"")+'\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n
\n
\n
\n \n
\n \n
\n
\n
\n \n
\n
\n
\n
\n 0:00 / 0:00\n
\n
\n ')+this.getSVG("camera")+' \n
\n \n
\n \n
\n
\n
'+this.getTran("Set danmaku color")+'
\n \n \n \n \n \n \n
\n
\n
'+this.getTran("Set danmaku type")+'
\n \n \n \n
\n
\n \n \n
\n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n
'+this.getTran("About author")+'
\n
'+this.getTran("DPlayer feedback")+'
\n
'+this.getTran("About DPlayer")+"
\n
\n "),this.audio=this.element.getElementsByClassName("dplayer-video")[0],this.bezel=this.element.getElementsByClassName("dplayer-bezel-icon")[0],this.bezel.addEventListener("animationend",function(){e.bezel.classList.remove("dplayer-bezel-transition")}),this.ptime=this.element.getElementsByClassName("dplayer-ptime")[0],this.playButton=this.element.getElementsByClassName("dplayer-play-icon")[0],this.shouldpause=!0,this.toggle=function(){e.audio.paused?e.play():e.pause()},this.playButton.addEventListener("click",this.toggle);var t=this.element.getElementsByClassName("dplayer-video-wrap")[0],a=this.element.getElementsByClassName("dplayer-controller-mask")[0];if(this.isMobile){var n=function(){e.element.classList.contains("dplayer-hide-controller")?e.element.classList.remove("dplayer-hide-controller"):e.element.classList.add("dplayer-hide-controller")};t.addEventListener("click",n),a.addEventListener("click",n)}else t.addEventListener("click",this.toggle),a.addEventListener("click",this.toggle);var l=function(t){var a=t.offsetLeft,n=t.offsetParent,r=void 0;if(document.fullscreenElement||document.mozFullScreenElement||document.webkitFullscreenElement)for(;null!==n&&n!==e.element;)a+=n.offsetLeft,n=n.offsetParent;else for(;null!==n;)a+=n.offsetLeft,n=n.offsetParent;return r=document.body.scrollLeft+document.documentElement.scrollLeft,a-r};this.playedBar=this.element.getElementsByClassName("dplayer-played")[0],this.loadedBar=this.element.getElementsByClassName("dplayer-loaded")[0],this.bar=this.element.getElementsByClassName("dplayer-bar-wrap")[0];var o=void 0;this.option.danmaku&&this.audio.addEventListener("seeking",function(){for(var t=0;t=e.audio.currentTime)return void(e.danIndex=t);e.danIndex=e.dan.length}});var i=0,s=0,d=!1;this.setTime=function(){e.playedTime=setInterval(function(){s=e.audio.currentTime,!d&&si+.01&&!e.audio.paused&&(e.element.classList.remove("dplayer-loading"),d=!1),i=s,e.updateBar("played",e.audio.currentTime/e.audio.duration,"width"),e.ptime.innerHTML=e.secondToTime(e.audio.currentTime),e.trigger("playing")},100),e.option.danmaku&&(e.danmakuTime=setInterval(function(){for(var t=e.dan[e.danIndex];t&&e.audio.currentTime>=parseFloat(t.time);)e.danmakuIn(t.text,t.color,t.type),t=e.dan[++e.danIndex]},0))},this.clearTime=function(){clearInterval(e.playedTime),e.option.danmaku&&clearInterval(e.danmakuTime)},this.bar.addEventListener("click",function(t){var a=t||window.event;o=e.bar.clientWidth;var n=(a.clientX-l(e.bar))/o;n=n>0?n:0,n=n<1?n:1,e.updateBar("played",n,"width"),e.audio.currentTime=parseFloat(e.playedBar.style.width)/100*e.audio.duration});var p=function(t){var a=t||window.event,n=(a.clientX-l(e.bar))/o;n=n>0?n:0,n=n<1?n:1,e.updateBar("played",n,"width"),e.element.getElementsByClassName("dplayer-ptime")[0].innerHTML=e.secondToTime(n*e.audio.duration)},m=function K(){document.removeEventListener("mouseup",K),document.removeEventListener("mousemove",p),e.audio.currentTime=parseFloat(e.playedBar.style.width)/100*e.audio.duration,e.setTime()};this.bar.addEventListener("mousedown",function(){o=e.bar.clientWidth,e.clearTime(),document.addEventListener("mousemove",p),document.addEventListener("mouseup",m)}),this.volumeBar=this.element.getElementsByClassName("dplayer-volume-bar-inner")[0];var c=this.element.getElementsByClassName("dplayer-volume")[0],y=this.element.getElementsByClassName("dplayer-volume-bar-wrap")[0],u=this.element.getElementsByClassName("dplayer-volume-bar")[0],g=this.element.getElementsByClassName("dplayer-volume-icon")[0],f=35,b=function(){e.audio.volume>=.8?g.innerHTML=e.getSVG("volume-up"):e.audio.volume>0?g.innerHTML=e.getSVG("volume-down"):g.innerHTML=e.getSVG("volume-off")},h=function(t){var a=t||window.event,n=(a.clientX-l(u)-5.5)/f;n=n>0?n:0,n=n<1?n:1,e.updateBar("volume",n,"width"),e.audio.volume=n,e.audio.muted&&(e.audio.muted=!1),b()},v=function $(){document.removeEventListener("mouseup",$),document.removeEventListener("mousemove",h),c.classList.remove("dplayer-volume-active")};y.addEventListener("click",function(t){var a=t||window.event,n=(a.clientX-l(u)-5.5)/f;n=n>0?n:0,n=n<1?n:1,e.updateBar("volume",n,"width"),e.audio.volume=n,e.audio.muted&&(e.audio.muted=!1),b()}),y.addEventListener("mousedown",function(){document.addEventListener("mousemove",h),document.addEventListener("mouseup",v),c.classList.add("dplayer-volume-active")}),g.addEventListener("click",function(){e.audio.muted?(e.audio.muted=!1,b(),e.updateBar("volume",e.audio.volume,"width")):(e.audio.muted=!0,g.innerHTML=e.getSVG("volume-off"),e.updateBar("volume",0,"width"))}),this.isMobile||!function(){var t=0,a=function(){e.element.classList.remove("dplayer-hide-controller"),clearTimeout(t),t=setTimeout(function(){e.audio.played.length&&(e.element.classList.add("dplayer-hide-controller"),L(),J())},2e3)};e.element.addEventListener("mousemove",a),e.element.addEventListener("click",a)}(),this.danOpacity=.7;var x={original:'\n
\n '+this.getTran("Speed")+'\n
'+this.getSVG("right")+('
\n
\n
\n '+this.getTran("Loop")+'\n
\n \n \n
\n
\n
\n '+this.getTran("Danmaku")+'\n
\n \n \n
\n
\n
\n '+this.getTran("Opacity for danmaku")+'\n
\n
\n
\n \n
\n
\n
\n
'),speed:'\n
\n 0.5\n
\n
\n 0.75\n
\n
\n '+this.getTran("Normal")+'\n
\n
\n 1.25\n
\n
\n 1.5\n
\n
\n 2\n
'},k=this.element.getElementsByClassName("dplayer-setting-icon")[0],w=this.element.getElementsByClassName("dplayer-setting-box")[0],Y=this.element.getElementsByClassName("dplayer-mask")[0];w.innerHTML=x.original;var L=function(){w.classList.contains("dplayer-setting-box-open")&&(w.classList.remove("dplayer-setting-box-open"),Y.classList.remove("dplayer-mask-show"),setTimeout(function(){w.classList.remove("dplayer-setting-box-narrow"),w.innerHTML=x.original,T()},300))},E=function(){w.classList.add("dplayer-setting-box-open"),Y.classList.add("dplayer-mask-show")};Y.addEventListener("click",function(){L()}),k.addEventListener("click",function(){E()});var z=this.element.getElementsByClassName("dplayer-danmaku")[0];this.showdan=!0;var T=function(){var t=e.element.getElementsByClassName("dplayer-setting-loop")[0],a=t.getElementsByClassName("dplayer-toggle-setting-input")[0];a.checked=e.loop,t.addEventListener("click",function(){console.log("loop1"),a.checked=!a.checked,a.checked?(e.loop=!0,e.audio.loop=e.loop):(e.loop=!1,e.audio.loop=e.loop),L()});var n=e.element.getElementsByClassName("dplayer-setting-showdan")[0],r=n.getElementsByClassName("dplayer-showdan-setting-input")[0];r.checked=e.showdan,n.addEventListener("click",function(){if(r.checked=!r.checked,r.checked){if(e.showdan=!0,e.option.danmaku){for(var t=0;t=e.audio.currentTime){e.danIndex=t;break}e.danIndex=e.dan.length}e.danmakuTime=setInterval(function(){for(var t=e.dan[e.danIndex];t&&e.audio.currentTime>=parseFloat(t.time);)e.danmakuIn(t.text,t.color,t.type),t=e.dan[++e.danIndex]},0)}}else e.showdan=!1,e.option.danmaku&&(clearInterval(e.danmakuTime),z.innerHTML="");L()});var o=e.element.getElementsByClassName("dplayer-setting-speed")[0];o.addEventListener("click",function(){w.classList.add("dplayer-setting-box-narrow"),w.innerHTML=x.speed;for(var t=w.getElementsByClassName("dplayer-setting-speed-item"),a=function(a){t[a].addEventListener("click",function(){e.audio.playbackRate=t[a].dataset.speed,L()})},n=0;n0?o:0, -o=o<1?o:1,e.updateBar("danmaku",o,"width");for(var i=e.element.getElementsByClassName("dplayer-danmaku-item"),s=0;s0?o:0,o=o<1?o:1,e.updateBar("danmaku",o,"width");for(var i=e.element.getElementsByClassName("dplayer-danmaku-item"),s=0;s=200&&t.status<300||304===t.status){var a=JSON.parse(t.responseText);1!==a.code?alert(a.msg):(e.dan=a.danmaku.sort(function(e,t){return e.time-t.time}),e.element.getElementsByClassName("dplayer-danloading")[0].style.display="none",e.option.autoplay&&!e.isMobile?e.play():e.isMobile&&e.pause())}else console.log("Request was unsuccessful: "+t.status)};var a=void 0;a=e.option.danmaku.maximum?e.option.danmaku.api+"?id="+e.option.danmaku.id+"&max="+e.option.danmaku.maximum:e.option.danmaku.api+"?id="+e.option.danmaku.id,t.open("get",a,!0),t.send(null)}():this.option.autoplay&&!this.isMobile?this.play():this.isMobile&&this.pause();var R=this.element.getElementsByClassName("dplayer-comment-input")[0],F=this.element.getElementsByClassName("dplayer-comment-icon")[0],D=this.element.getElementsByClassName("dplayer-comment-box")[0],O=this.element.getElementsByClassName("dplayer-comment-setting-icon")[0],H=this.element.getElementsByClassName("dplayer-comment-setting-box")[0],X=this.element.getElementsByClassName("dplayer-send-icon")[0],P=function(e){return e.replace(/&/g,"&").replace(//g,">").replace(/"/g,""").replace(/'/g,"'").replace(/\//g,"/")},V=function(){if(R.blur(),!R.value.replace(/^\s+|\s+$/g,""))return void alert(e.getTran("Please input danmaku!"));var t={token:e.option.danmaku.token,player:e.option.danmaku.id,author:"DIYgod",time:e.audio.currentTime,text:R.value,color:e.element.querySelector('input[name="dplayer-danmaku-color"]:checked').value,type:e.element.querySelector('input[name="dplayer-danmaku-type"]:checked').value},a=new XMLHttpRequest;a.onreadystatechange=function(){if(4===a.readyState)if(a.status>=200&&a.status<300||304===a.status){var e=JSON.parse(a.responseText);1!==e.code?alert(e.msg):console.log("Post danmaku: ",JSON.parse(a.responseText))}else console.log("Request was unsuccessful: "+a.status)},a.open("post",e.option.danmaku.api,!0),a.send(JSON.stringify(t)),R.value="",J(),e.dan.splice(e.danIndex,0,t),e.danIndex++,e.danmakuIn(P(t.text),t.color,t.type)},G=function(){H.classList.contains("dplayer-comment-setting-open")&&H.classList.remove("dplayer-comment-setting-open")},U=function(){H.classList.contains("dplayer-comment-setting-open")?H.classList.remove("dplayer-comment-setting-open"):H.classList.add("dplayer-comment-setting-open")},j=0,J=function(){D.classList.contains("dplayer-comment-box-open")&&(D.classList.remove("dplayer-comment-box-open"),Y.classList.remove("dplayer-mask-show"),clearInterval(j),e.element.classList.remove("dplayer-show-controller"),G(),document.addEventListener("keydown",_))},W=function(){D.classList.add("dplayer-comment-box-open"),Y.classList.add("dplayer-mask-show"),j=setInterval(function(){clearTimeout(hideTime)},1e3),e.element.classList.add("dplayer-show-controller"),document.removeEventListener("keydown",_)};Y.addEventListener("click",function(){J()}),F.addEventListener("click",function(){W(),setTimeout(function(){R.focus()},300)}),O.addEventListener("click",function(){U()}),this.element.getElementsByClassName("dplayer-comment-setting-color")[0].addEventListener("click",function(){var t=e.element.querySelector('input[name="dplayer-danmaku-color"]:checked+span');t&&(O.getElementsByClassName("dplayer-fill")[0].style.fill=e.element.querySelector('input[name="dplayer-danmaku-color"]:checked').value)}),R.addEventListener("click",function(){G()}),R.addEventListener("keydown",function(e){var t=e||window.event;13===t.keyCode&&V()}),X.addEventListener("click",V);var Q=function(){C=z.offsetWidth;for(var t=e.element.getElementsByClassName("dplayer-danmaku-item"),a=0;a0?n:0,n=n<1?n:1,e.updateBar("volume",n,"width"),e.audio.volume=n,e.audio.muted&&(e.audio.muted=!1),b();break;case 40:a.preventDefault(),n=e.audio.volume-.1,n=n>0?n:0,n=n<1?n:1,e.updateBar("volume",n,"width"),e.audio.volume=n,e.audio.muted&&(e.audio.muted=!1),b()}};document.addEventListener("keydown",_),this.menu=this.element.getElementsByClassName("dplayer-menu")[0],this.element.addEventListener("contextmenu",function(t){var a=t||window.event;a.preventDefault(),e.menu.style.left=a.clientX-e.element.getBoundingClientRect().left+"px",e.menu.style.top=a.clientY-e.element.getBoundingClientRect().top+"px",e.menu.classList.add("dplayer-menu-show"),Y.classList.add("dplayer-mask-show"),Y.addEventListener("click",function(){Y.classList.remove("dplayer-mask-show"),e.menu.classList.remove("dplayer-menu-show")})});var Z=this.element.getElementsByClassName("dplayer-camera-icon")[0];Z.addEventListener("click",function(){var t=document.createElement("canvas");t.width=e.audio.videoWidth,t.height=e.audio.videoHeight,t.getContext("2d").drawImage(e.audio,0,0,t.width,t.height),Z.href=t.toDataURL(),Z.download="Screenshot_from_DPlayer.png"})}},{key:"play",value:function(e){"[object Number]"===Object.prototype.toString.call(e)&&(this.audio.currentTime=e),this.audio.paused&&(this.shouldpause=!1,this.bezel.innerHTML=this.getSVG("play"),this.bezel.classList.add("dplayer-bezel-transition"),this.playButton.innerHTML=this.getSVG("pause"),this.audio.play(),this.playedTime&&this.clearTime(),this.setTime(),this.element.classList.add("dplayer-playing"),this.trigger("play"))}},{key:"pause",value:function(){this.shouldpause&&!this.ended||(this.shouldpause=!0,this.element.classList.remove("dplayer-loading"),this.bezel.innerHTML=this.getSVG("pause"),this.bezel.classList.add("dplayer-bezel-transition"),this.ended=!1,this.playButton.innerHTML=this.getSVG("play"),this.audio.pause(),this.clearTime(),this.element.classList.remove("dplayer-playing"),this.trigger("pause"))}},{key:"on",value:function(e,t){"function"==typeof t&&this.event[e].push(t)}}]),e}();t.DPlayer=o},function(e,t,a){var n=a(2);"string"==typeof n&&(n=[[e.id,n,""]]);a(4)(n,{});n.locals&&(e.exports=n.locals)},function(e,t,a){t=e.exports=a(3)(),t.push([e.id,'.dplayer{position:relative;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;line-height:1}.dplayer:-webkit-full-screen{width:100%;height:100%;background:#000}.dplayer:-webkit-full-screen .dplayer-danmaku .dplayer-danmaku-bottom.dplayer-danmaku-move,.dplayer:-webkit-full-screen .dplayer-danmaku .dplayer-danmaku-top.dplayer-danmaku-move{-webkit-animation:danmaku-center 6s linear;animation:danmaku-center 6s linear;-webkit-animation-play-state:paused;animation-play-state:paused}.dplayer:-webkit-full-screen .dplayer-danmaku .dplayer-danmaku-right.dplayer-danmaku-move{-webkit-animation:danmaku 8s linear;animation:danmaku 8s linear;-webkit-animation-play-state:paused;animation-play-state:paused}.dplayer.dplayer-no-danmaku .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box{height:60px}.dplayer.dplayer-no-danmaku .dplayer-controller .dplayer-icons .dplayer-comment,.dplayer.dplayer-no-danmaku .dplayer-danmaku{display:none}.dplayer.dplayer-playing .dplayer-danmaku .dplayer-danmaku-move{-webkit-animation-play-state:running!important;animation-play-state:running!important}@media (min-width:900px){.dplayer.dplayer-playing .dplayer-controller,.dplayer.dplayer-playing .dplayer-controller-mask{opacity:0}.dplayer.dplayer-playing:hover .dplayer-controller,.dplayer.dplayer-playing:hover .dplayer-controller-mask{opacity:1}}.dplayer.dplayer-loading .dplayer-bezel .diplayer-loading-icon{display:block}.dplayer.dplayer-loading .dplayer-danmaku .dplayer-danmaku-move{-webkit-animation-play-state:paused!important;animation-play-state:paused!important}.dplayer.dplayer-hide-controller .dplayer-controller,.dplayer.dplayer-hide-controller .dplayer-controller-mask{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}.dplayer.dplayer-show-controller .dplayer-controller,.dplayer.dplayer-show-controller .dplayer-controller-mask{opacity:1}.dplayer .dplayer-mask{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1;display:none}.dplayer .dplayer-mask.dplayer-mask-show{display:block}.dplayer .dplayer-video-wrap{position:relative;background:#000;font-size:0;width:100%;height:100%}.dplayer .dplayer-video-wrap .dplayer-video{width:100%;height:100%}.dplayer .dplayer-danmaku{position:absolute;left:0;right:0;top:0;bottom:0;font-size:22px;color:#fff}.dplayer .dplayer-danmaku .dplayer-danmaku-item{display:inline-block;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;white-space:nowrap;font-weight:bolder;text-shadow:.5px .5px .5px rgba(0,0,0,.5)}.dplayer .dplayer-danmaku .dplayer-danmaku-right{position:absolute;right:0;-webkit-transform:translateX(100%);transform:translateX(100%)}.dplayer .dplayer-danmaku .dplayer-danmaku-right.dplayer-danmaku-move{will-change:transform;-webkit-animation:danmaku 5s linear;animation:danmaku 5s linear;-webkit-animation-play-state:paused;animation-play-state:paused}@-webkit-keyframes danmaku{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes danmaku{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}}.dplayer .dplayer-danmaku .dplayer-danmaku-bottom,.dplayer .dplayer-danmaku .dplayer-danmaku-top{position:absolute;width:100%;text-align:center;visibility:hidden}.dplayer .dplayer-danmaku .dplayer-danmaku-bottom.dplayer-danmaku-move,.dplayer .dplayer-danmaku .dplayer-danmaku-top.dplayer-danmaku-move{will-change:visibility;-webkit-animation:danmaku-center 4s linear;animation:danmaku-center 4s linear;-webkit-animation-play-state:paused;animation-play-state:paused}@-webkit-keyframes danmaku-center{0%{visibility:visible}to{visibility:visible}}@keyframes danmaku-center{0%{visibility:visible}to{visibility:visible}}.dplayer .dplayer-bezel{position:absolute;left:0;right:0;top:0;bottom:0;font-size:22px;color:#fff;pointer-events:none}.dplayer .dplayer-bezel .dplayer-fill{fill:hsla(0,0%,100%,.8)}.dplayer .dplayer-bezel .dplayer-bezel-icon{position:absolute;top:50%;left:50%;margin:-26px 0 0 -26px;height:52px;width:52px;padding:12px;box-sizing:border-box;background:rgba(0,0,0,.5);border-radius:50%;opacity:0;pointer-events:none}.dplayer .dplayer-bezel .dplayer-bezel-icon.dplayer-bezel-transition{-webkit-animation:bezel-hide .5s linear;animation:bezel-hide .5s linear}@-webkit-keyframes bezel-hide{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}to{opacity:0;-webkit-transform:scale(2);transform:scale(2)}}@keyframes bezel-hide{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}to{opacity:0;-webkit-transform:scale(2);transform:scale(2)}}.dplayer .dplayer-bezel .dplayer-danloading{position:absolute;top:50%;margin-top:-7px;width:100%;text-align:center;font-size:14px;line-height:14px;-webkit-animation:my-face 5s infinite ease-in-out;animation:my-face 5s infinite ease-in-out}.dplayer .dplayer-bezel .diplayer-loading-icon{display:none;position:absolute;top:50%;left:50%;margin:-18px 0 0 -18px;height:36px;width:36px;pointer-events:none}.dplayer .dplayer-bezel .diplayer-loading-icon .diplayer-loading-hide{display:none}.dplayer .dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot{-webkit-animation:diplayer-loading-dot-fade .8s ease infinite;animation:diplayer-loading-dot-fade .8s ease infinite;opacity:0;fill:#fff;-webkit-transform-origin:4px 4px;transform-origin:4px 4px}.dplayer .dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-7{-webkit-animation-delay:.7s;animation-delay:.7s}.dplayer .dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-6{-webkit-animation-delay:.6s;animation-delay:.6s}.dplayer .dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-5{-webkit-animation-delay:.5s;animation-delay:.5s}.dplayer .dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-4{-webkit-animation-delay:.4s;animation-delay:.4s}.dplayer .dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-3{-webkit-animation-delay:.3s;animation-delay:.3s}.dplayer .dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-2{-webkit-animation-delay:.2s;animation-delay:.2s}.dplayer .dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-1{-webkit-animation-delay:.1s;animation-delay:.1s}@-webkit-keyframes diplayer-loading-dot-fade{0%{opacity:.7;-webkit-transform:scale(1.2);transform:scale(1.2)}50%{opacity:.25;-webkit-transform:scale(.9);transform:scale(.9)}to{opacity:.25;-webkit-transform:scale(.85);transform:scale(.85)}}@keyframes diplayer-loading-dot-fade{0%{opacity:.7;-webkit-transform:scale(1.2);transform:scale(1.2)}50%{opacity:.25;-webkit-transform:scale(.9);transform:scale(.9)}to{opacity:.25;-webkit-transform:scale(.85);transform:scale(.85)}}.dplayer .dplayer-controller-mask{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom;height:98px;width:100%}.dplayer .dplayer-controller,.dplayer .dplayer-controller-mask{position:absolute;bottom:0;-webkit-transition:all .3s ease;transition:all .3s ease}.dplayer .dplayer-controller{left:0;right:0;height:41px;padding:0 20px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.dplayer .dplayer-controller .dplayer-bar-wrap{padding:5px 0;cursor:pointer;position:absolute;bottom:33px;width:calc(100% - 40px);height:3px}.dplayer .dplayer-controller .dplayer-bar-wrap:hover .dplayer-thumb{-webkit-transform:scale(1)!important;transform:scale(1)!important}.dplayer .dplayer-controller .dplayer-bar-wrap .dplayer-bar{position:relative;height:3px;width:100%;background:hsla(0,0%,100%,.2);cursor:pointer!important}.dplayer .dplayer-controller .dplayer-bar-wrap .dplayer-bar .dplayer-loaded{position:absolute;left:0;top:0;bottom:0;background:hsla(0,0%,100%,.4);height:3px;-webkit-transition:all .5s ease;transition:all .5s ease;will-change:width}.dplayer .dplayer-controller .dplayer-bar-wrap .dplayer-bar .dplayer-played{position:absolute;left:0;top:0;bottom:0;height:3px;will-change:width}.dplayer .dplayer-controller .dplayer-bar-wrap .dplayer-bar .dplayer-played .dplayer-thumb{position:absolute;top:0;right:5px;margin-top:-4px;margin-right:-10px;height:11px;width:11px;border-radius:50%;cursor:pointer!important;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-transform:scale(0);transform:scale(0)}.dplayer .dplayer-controller .dplayer-icons{height:38px;position:absolute;bottom:0}.dplayer .dplayer-controller .dplayer-icons.dplayer-icons-left .dplayer-icon{padding:7px}.dplayer .dplayer-controller .dplayer-icons.dplayer-icons-right{right:20px}.dplayer .dplayer-controller .dplayer-icons.dplayer-icons-right .dplayer-icon{padding:8px}.dplayer .dplayer-controller .dplayer-icons #dplayer-menu{stroke:#ddd;stroke-width:1px}.dplayer .dplayer-controller .dplayer-icons .dplayer-time{line-height:38px;color:#eee;text-shadow:0 0 2px rgba(0,0,0,.5);vertical-align:middle;font-size:13px;cursor:default}.dplayer .dplayer-controller .dplayer-icons .dplayer-icon{width:46px;height:100%;border:none;background-color:transparent;outline:none;cursor:pointer;opacity:.8;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;vertical-align:middle;box-sizing:border-box;display:inline-block}.dplayer .dplayer-controller .dplayer-icons .dplayer-icon:hover{opacity:1}.dplayer .dplayer-controller .dplayer-icons .dplayer-icon.dplayer-comment-icon{padding:10px 9px 9px}.dplayer .dplayer-controller .dplayer-icons .dplayer-icon.dplayer-setting-icon{padding-top:8.5px}.dplayer .dplayer-controller .dplayer-icons .dplayer-fill{fill:#fff}.dplayer .dplayer-controller .dplayer-icons .dplayer-volume{position:relative;display:inline-block;cursor:pointer!important;height:100%}.dplayer .dplayer-controller .dplayer-icons .dplayer-volume:hover .dplayer-volume-bar{width:45px!important}.dplayer .dplayer-controller .dplayer-icons .dplayer-volume:hover .dplayer-thumb{-webkit-transform:scale(1)!important;transform:scale(1)!important}.dplayer .dplayer-controller .dplayer-icons .dplayer-volume.dplayer-volume-active .dplayer-volume-bar{width:45px!important}.dplayer .dplayer-controller .dplayer-icons .dplayer-volume.dplayer-volume-active .dplayer-thumb{-webkit-transform:scale(1)!important;transform:scale(1)!important}.dplayer .dplayer-controller .dplayer-icons .dplayer-volume .dplayer-volume-bar-wrap{display:inline-block;margin:0 5px 0 -5px;vertical-align:middle;height:100%}.dplayer .dplayer-controller .dplayer-icons .dplayer-volume .dplayer-volume-bar-wrap .dplayer-volume-bar{position:relative;top:17px;width:0;height:3px;background:#aaa;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.dplayer .dplayer-controller .dplayer-icons .dplayer-volume .dplayer-volume-bar-wrap .dplayer-volume-bar .dplayer-volume-bar-inner{position:absolute;bottom:0;left:0;height:100%;-webkit-transition:all .1s ease;transition:all .1s ease;will-change:width}.dplayer .dplayer-controller .dplayer-icons .dplayer-volume .dplayer-volume-bar-wrap .dplayer-volume-bar .dplayer-volume-bar-inner .dplayer-thumb{position:absolute;top:0;right:5px;margin-top:-4px;margin-right:-10px;height:11px;width:11px;border-radius:50%;cursor:pointer!important;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-transform:scale(0);transform:scale(0)}.dplayer .dplayer-controller .dplayer-icons .dplayer-setting{display:inline-block;height:100%}.dplayer .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box{position:absolute;right:0;bottom:50px;-webkit-transform:translateX(170px);transform:translateX(170px);width:150px;height:120px;border-radius:2px;background:rgba(28,28,28,.9);padding:7px 0;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;overflow:hidden;z-index:2}.dplayer .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box.dplayer-setting-box-open{-webkit-transform:translateX(0);transform:translateX(0)}.dplayer .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box.dplayer-setting-box-narrow{width:70px;height:180px;text-align:center}.dplayer .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-item,.dplayer .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-speed-item{height:30px;padding:5px 10px;box-sizing:border-box;cursor:pointer}.dplayer .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-item:hover,.dplayer .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-speed-item:hover{background-color:hsla(0,0%,100%,.1)}.dplayer .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku{padding:5px 0}.dplayer .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku .dplayer-label{padding:0 10px;display:inline}.dplayer .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku:hover .dplayer-label{display:none}.dplayer .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku:hover .dplayer-danmaku-bar-wrap{display:inline-block}.dplayer .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku.dplayer-setting-danmaku-active .dplayer-label{display:none}.dplayer .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku.dplayer-setting-danmaku-active .dplayer-danmaku-bar-wrap{display:inline-block}.dplayer .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku .dplayer-danmaku-bar-wrap{padding:0 10px;box-sizing:border-box;display:none;vertical-align:middle;height:100%;width:100%}.dplayer .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku .dplayer-danmaku-bar-wrap .dplayer-danmaku-bar{position:relative;top:8.5px;width:100%;height:3px;background:#fff;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.dplayer .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku .dplayer-danmaku-bar-wrap .dplayer-danmaku-bar .dplayer-danmaku-bar-inner{position:absolute;bottom:0;left:0;height:100%;-webkit-transition:all .1s ease;transition:all .1s ease;background:#aaa;will-change:width}.dplayer .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku .dplayer-danmaku-bar-wrap .dplayer-danmaku-bar .dplayer-danmaku-bar-inner .dplayer-thumb{position:absolute;top:0;right:5px;margin-top:-4px;margin-right:-10px;height:11px;width:11px;border-radius:50%;cursor:pointer!important;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;background:#aaa}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment{display:inline-block;height:100%}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box{position:absolute;right:0;bottom:50px;-webkit-transform:translateX(382px);transform:translateX(382px);border-radius:2px;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;z-index:2}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box.dplayer-comment-box-open{-webkit-transform:translateX(0);transform:translateX(0)}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-comment-setting-icon{height:24px;width:24px;position:absolute;top:5px;left:7px;padding:0;opacity:1}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-comment-setting-icon:hover .dplayer-fill{fill:#aaa}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-comment-setting-icon .dplayer-fill{-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;fill:#ddd}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-comment-setting-box{position:absolute;background:#fff;bottom:40px;left:-93px;box-shadow:0 0 25px rgba(0,0,0,.3);border-radius:4px;padding:10px 10px 16px;font-size:14px;width:204px;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-transform:scale(0);transform:scale(0)}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-comment-setting-box.dplayer-comment-setting-open{-webkit-transform:scale(1);transform:scale(1)}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-comment-setting-box:after{content:\'\';position:absolute;top:100%;left:50%;margin-left:-12px;background:url(\'data:image/svg+xml;utf8,\');width:24px;height:12px}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-comment-setting-box input[type=radio]{display:none}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-comment-setting-box label{cursor:pointer}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-title{font-size:14px;color:#555;padding:6px}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-type{font-size:0}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-type label:nth-child(2) span{border-radius:4px 0 0 4px}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-type label:nth-child(4) span{border-radius:0 4px 4px 0}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-type span{width:33%;padding:4px 6px;line-height:16px;display:inline-block;font-size:12px;color:#555;border:1px solid #e4e4e6;margin-right:-1px;box-sizing:border-box;text-align:center;cursor:pointer}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-type input:checked+span{background:#e4e4e6}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-color{font-size:0}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-color label{font-size:0;padding:6px;display:inline-block}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-color span{width:22px;height:22px;display:inline-block;border-radius:50%;box-sizing:border-box;cursor:pointer}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-color span:hover{-webkit-animation:my-face 5s infinite ease-in-out;animation:my-face 5s infinite ease-in-out;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12)}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-color input:checked+span{box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);border:none!important}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-comment-input{outline:none;border:none;padding:8px 31px;font-size:14px;line-height:18px;text-align:center;border-radius:4px;width:300px}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-send-icon{height:22px;width:22px;position:absolute;top:6px;right:7px;padding:0;opacity:1}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-send-icon:hover .dplayer-fill{fill:#aaa}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-send-icon .dplayer-fill{-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;fill:#ddd}.dplayer .dplayer-controller .dplayer-icons .dplayer-label{color:#eee;font-size:13px;display:inline-block;vertical-align:middle}.dplayer .dplayer-controller .dplayer-icons .dplayer-toggle{width:32px;height:100%;text-align:center;display:inline-block;font-size:0;vertical-align:middle;float:right}.dplayer .dplayer-controller .dplayer-icons .dplayer-toggle input{max-height:0;max-width:0;display:none}.dplayer .dplayer-controller .dplayer-icons .dplayer-toggle input+label{display:inline-block;position:relative;box-shadow:inset 0 0 0 0 #dfdfdf;border:1px solid #dfdfdf;height:20px;width:32px;border-radius:10px;box-sizing:border-box;cursor:pointer;-webkit-transition:.2s ease-in-out;transition:.2s ease-in-out}.dplayer .dplayer-controller .dplayer-icons .dplayer-toggle input+label:after,.dplayer .dplayer-controller .dplayer-icons .dplayer-toggle input+label:before{content:"";position:absolute;display:block;height:18px;width:18px;top:0;left:0;border-radius:15px;-webkit-transition:.2s ease-in-out;transition:.2s ease-in-out}.dplayer .dplayer-controller .dplayer-icons .dplayer-toggle input+label:after{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.4)}.dplayer .dplayer-controller .dplayer-icons .dplayer-toggle input:checked+label{border-color:hsla(0,0%,100%,.5)}.dplayer .dplayer-controller .dplayer-icons .dplayer-toggle input:checked+label:before{width:30px;background:hsla(0,0%,100%,.5)}.dplayer .dplayer-controller .dplayer-icons .dplayer-toggle input:checked+label:after{left:12px}.dplayer .dplayer-menu{position:absolute;width:150px;border-radius:2px;background:rgba(28,28,28,.9);padding:5px 0;overflow:hidden;z-index:3;display:none}.dplayer .dplayer-menu.dplayer-menu-show{display:block}.dplayer .dplayer-menu .dplayer-menu-item{height:30px;padding:5px 10px;box-sizing:border-box;cursor:pointer}.dplayer .dplayer-menu .dplayer-menu-item:hover{background-color:hsla(0,0%,100%,.1)}.dplayer .dplayer-menu .dplayer-menu-item .dplayer-menu-label a{color:#eee;font-size:13px;display:inline-block;vertical-align:middle}@-webkit-keyframes my-face{2%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}4%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}6%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}8%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}10%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}12%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}14%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}16%{-webkit-transform:translateY(-.5px) rotate(-1.5deg);transform:translateY(-.5px) rotate(-1.5deg)}18%{-webkit-transform:translateY(.5px) rotate(-1.5deg);transform:translateY(.5px) rotate(-1.5deg)}20%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}22%{-webkit-transform:translateY(.5px) rotate(-1.5deg);transform:translateY(.5px) rotate(-1.5deg)}24%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}26%{-webkit-transform:translateY(.5px) rotate(.5deg);transform:translateY(.5px) rotate(.5deg)}28%{-webkit-transform:translateY(.5px) rotate(1.5deg);transform:translateY(.5px) rotate(1.5deg)}30%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}32%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}34%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}36%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}38%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}40%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}42%{-webkit-transform:translateY(2.5px) rotate(-1.5deg);transform:translateY(2.5px) rotate(-1.5deg)}44%{-webkit-transform:translateY(1.5px) rotate(.5deg);transform:translateY(1.5px) rotate(.5deg)}46%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}48%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}50%{-webkit-transform:translateY(.5px) rotate(.5deg);transform:translateY(.5px) rotate(.5deg)}52%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}54%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}56%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}58%{-webkit-transform:translateY(.5px) rotate(2.5deg);transform:translateY(.5px) rotate(2.5deg)}60%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}62%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}64%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}66%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}68%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}70%{-webkit-transform:translateY(1.5px) rotate(.5deg);transform:translateY(1.5px) rotate(.5deg)}72%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}74%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}76%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}78%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}80%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}82%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}84%{-webkit-transform:translateY(1.5px) rotate(2.5deg);transform:translateY(1.5px) rotate(2.5deg)}86%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}88%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}90%{-webkit-transform:translateY(2.5px) rotate(-.5deg);transform:translateY(2.5px) rotate(-.5deg)}92%{-webkit-transform:translateY(.5px) rotate(-.5deg);transform:translateY(.5px) rotate(-.5deg)}94%{-webkit-transform:translateY(2.5px) rotate(.5deg);transform:translateY(2.5px) rotate(.5deg)}96%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}98%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}0%,to{-webkit-transform:translate(0) rotate(0deg);transform:translate(0) rotate(0deg)}}@keyframes my-face{2%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}4%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}6%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}8%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}10%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}12%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}14%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}16%{-webkit-transform:translateY(-.5px) rotate(-1.5deg);transform:translateY(-.5px) rotate(-1.5deg)}18%{-webkit-transform:translateY(.5px) rotate(-1.5deg);transform:translateY(.5px) rotate(-1.5deg)}20%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}22%{-webkit-transform:translateY(.5px) rotate(-1.5deg);transform:translateY(.5px) rotate(-1.5deg)}24%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}26%{-webkit-transform:translateY(.5px) rotate(.5deg);transform:translateY(.5px) rotate(.5deg)}28%{-webkit-transform:translateY(.5px) rotate(1.5deg);transform:translateY(.5px) rotate(1.5deg)}30%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}32%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}34%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}36%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}38%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}40%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}42%{-webkit-transform:translateY(2.5px) rotate(-1.5deg);transform:translateY(2.5px) rotate(-1.5deg)}44%{-webkit-transform:translateY(1.5px) rotate(.5deg);transform:translateY(1.5px) rotate(.5deg)}46%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}48%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}50%{-webkit-transform:translateY(.5px) rotate(.5deg);transform:translateY(.5px) rotate(.5deg)}52%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}54%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}56%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}58%{-webkit-transform:translateY(.5px) rotate(2.5deg);transform:translateY(.5px) rotate(2.5deg)}60%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}62%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}64%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}66%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}68%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}70%{-webkit-transform:translateY(1.5px) rotate(.5deg);transform:translateY(1.5px) rotate(.5deg)}72%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}74%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}76%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}78%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}80%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}82%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}84%{-webkit-transform:translateY(1.5px) rotate(2.5deg);transform:translateY(1.5px) rotate(2.5deg)}86%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}88%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}90%{-webkit-transform:translateY(2.5px) rotate(-.5deg);transform:translateY(2.5px) rotate(-.5deg)}92%{-webkit-transform:translateY(.5px) rotate(-.5deg);transform:translateY(.5px) rotate(-.5deg)}94%{-webkit-transform:translateY(2.5px) rotate(.5deg);transform:translateY(2.5px) rotate(.5deg)}96%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}98%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}0%,to{-webkit-transform:translate(0) rotate(0deg);transform:translate(0) rotate(0deg)}}',""]); -},function(e,t){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],t=0;t=0&&v.splice(t,1)}function i(e){var t=document.createElement("style");return t.type="text/css",l(e,t),t}function s(e){var t=document.createElement("link");return t.rel="stylesheet",l(e,t),t}function d(e,t){var a,n,r;if(t.singleton){var l=h++;a=b||(b=i(t)),n=p.bind(null,a,l,!1),r=p.bind(null,a,l,!0)}else e.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(a=s(t),n=c.bind(null,a),r=function(){o(a),a.href&&URL.revokeObjectURL(a.href)}):(a=i(t),n=m.bind(null,a),r=function(){o(a)});return n(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;n(e=t)}else r()}}function p(e,t,a,n){var r=a?"":n.css;if(e.styleSheet)e.styleSheet.cssText=x(t,r);else{var l=document.createTextNode(r),o=e.childNodes;o[t]&&e.removeChild(o[t]),o.length?e.insertBefore(l,o[t]):e.appendChild(l)}}function m(e,t){var a=t.css,n=t.media;if(n&&e.setAttribute("media",n),e.styleSheet)e.styleSheet.cssText=a;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(a))}}function c(e,t){var a=t.css,n=t.sourceMap;n&&(a+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n))))+" */");var r=new Blob([a],{type:"text/css"}),l=e.href;e.href=URL.createObjectURL(r),l&&URL.revokeObjectURL(l)}var y={},u=function(e){var t;return function(){return"undefined"==typeof t&&(t=e.apply(this,arguments)),t}},g=u(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),f=u(function(){return document.head||document.getElementsByTagName("head")[0]}),b=null,h=0,v=[];e.exports=function(e,t){t=t||{},"undefined"==typeof t.singleton&&(t.singleton=g()),"undefined"==typeof t.insertAt&&(t.insertAt="bottom");var a=r(e);return n(a,t),function(e){for(var l=[],o=0;o\n \n \n \n '},this.isMobile=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i),this.isMobile&&(t.autoplay=!1);var r={element:document.getElementsByClassName("dplayer")[0],autoplay:!1,theme:"#b7daff",loop:!1,lang:navigator.language.indexOf("zh")!==-1?"zh":"en",screenshot:!1};for(var l in r)r.hasOwnProperty(l)&&!t.hasOwnProperty(l)&&(t[l]=r[l]);this.option=t,this.loop=t.loop,this.tranZH={"Danmaku is loading":"弹幕加载中",Top:"顶部",Bottom:"底部",Rolling:"滚动","Input danmaku, hit Enter":"输入弹幕，回车发送","About author":"关于作者","DPlayer feedback":"播放器意见反馈","About DPlayer":"关于 DPlay 播放器",Loop:"洗脑循环",Speed:"速度","Opacity for danmaku":"弹幕透明度",Normal:"正常","Please input danmaku!":"要输入弹幕内容啊喂！","Set danmaku color":"设置弹幕颜色","Set danmaku type":"设置弹幕类型",Danmaku:"弹幕"},this.getTran=function(e){return"en"===a.option.lang?e:"zh"===a.option.lang?a.tranZH[e]:void 0},this.secondToTime=function(e){var t=function(e){return e<10?"0"+e:""+e},a=parseInt(e/60),n=parseInt(e-60*a);return t(a)+":"+t(n)},this.updateBar=function(e,t,n){t=t>0?t:0,t=t<1?t:1,a[e+"Bar"].style[n]=100*t+"%"},this.eventTypes=["play","pause","canplay","playing","ended","error"],this.event={};for(var o=0;o\n
\n \n
\n
\n \n '+(this.option.danmaku?''+this.getTran("Danmaku is loading")+"":"")+'\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n
\n
\n
\n \n
\n \n
\n
\n
\n \n
\n
\n
\n
\n 0:00 / 0:00\n
\n
\n '+(this.option.screenshot?'\n '+this.getSVG("camera")+" \n ":"")+'\n
\n \n
\n \n
\n
\n
'+this.getTran("Set danmaku color")+'
\n \n \n \n \n \n \n
\n
\n
'+this.getTran("Set danmaku type")+'
\n \n \n \n
\n
\n \n \n
\n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n
'+this.getTran("About author")+'
\n
'+this.getTran("DPlayer feedback")+'
\n
'+this.getTran("About DPlayer")+"
\n
\n "),this.audio=this.element.getElementsByClassName("dplayer-video")[0],this.bezel=this.element.getElementsByClassName("dplayer-bezel-icon")[0],this.bezel.addEventListener("animationend",function(){e.bezel.classList.remove("dplayer-bezel-transition")}),this.ptime=this.element.getElementsByClassName("dplayer-ptime")[0],this.playButton=this.element.getElementsByClassName("dplayer-play-icon")[0],this.shouldpause=!0,this.toggle=function(){e.audio.paused?e.play():e.pause()},this.playButton.addEventListener("click",this.toggle);var t=this.element.getElementsByClassName("dplayer-video-wrap")[0],a=this.element.getElementsByClassName("dplayer-controller-mask")[0];if(this.isMobile){var n=function(){e.element.classList.contains("dplayer-hide-controller")?e.element.classList.remove("dplayer-hide-controller"):e.element.classList.add("dplayer-hide-controller")};t.addEventListener("click",n),a.addEventListener("click",n)}else t.addEventListener("click",this.toggle),a.addEventListener("click",this.toggle);var l=function(t){var a=t.offsetLeft,n=t.offsetParent,r=void 0;if(document.fullscreenElement||document.mozFullScreenElement||document.webkitFullscreenElement)for(;null!==n&&n!==e.element;)a+=n.offsetLeft,n=n.offsetParent;else for(;null!==n;)a+=n.offsetLeft,n=n.offsetParent;return r=document.body.scrollLeft+document.documentElement.scrollLeft,a-r};this.playedBar=this.element.getElementsByClassName("dplayer-played")[0],this.loadedBar=this.element.getElementsByClassName("dplayer-loaded")[0],this.bar=this.element.getElementsByClassName("dplayer-bar-wrap")[0];var o=void 0;this.option.danmaku&&this.audio.addEventListener("seeking",function(){for(var t=0;t=e.audio.currentTime)return void(e.danIndex=t);e.danIndex=e.dan.length}});var i=0,s=0,d=!1;this.setTime=function(){e.playedTime=setInterval(function(){s=e.audio.currentTime,!d&&si+.01&&!e.audio.paused&&(e.element.classList.remove("dplayer-loading"),d=!1),i=s,e.updateBar("played",e.audio.currentTime/e.audio.duration,"width"),e.ptime.innerHTML=e.secondToTime(e.audio.currentTime),e.trigger("playing")},100),e.option.danmaku&&(e.danmakuTime=setInterval(function(){for(var t=e.dan[e.danIndex];t&&e.audio.currentTime>=parseFloat(t.time);)e.danmakuIn(t.text,t.color,t.type),t=e.dan[++e.danIndex]},0))},this.clearTime=function(){clearInterval(e.playedTime),e.option.danmaku&&clearInterval(e.danmakuTime)},this.bar.addEventListener("click",function(t){var a=t||window.event;o=e.bar.clientWidth;var n=(a.clientX-l(e.bar))/o;n=n>0?n:0,n=n<1?n:1,e.updateBar("played",n,"width"),e.audio.currentTime=parseFloat(e.playedBar.style.width)/100*e.audio.duration});var p=function(t){var a=t||window.event,n=(a.clientX-l(e.bar))/o;n=n>0?n:0,n=n<1?n:1,e.updateBar("played",n,"width"),e.element.getElementsByClassName("dplayer-ptime")[0].innerHTML=e.secondToTime(n*e.audio.duration)},c=function $(){document.removeEventListener("mouseup",$),document.removeEventListener("mousemove",p),e.audio.currentTime=parseFloat(e.playedBar.style.width)/100*e.audio.duration,e.setTime()};this.bar.addEventListener("mousedown",function(){o=e.bar.clientWidth,e.clearTime(),document.addEventListener("mousemove",p),document.addEventListener("mouseup",c)}),this.volumeBar=this.element.getElementsByClassName("dplayer-volume-bar-inner")[0];var m=this.element.getElementsByClassName("dplayer-volume")[0],y=this.element.getElementsByClassName("dplayer-volume-bar-wrap")[0],u=this.element.getElementsByClassName("dplayer-volume-bar")[0],g=this.element.getElementsByClassName("dplayer-volume-icon")[0],f=35,b=function(){e.audio.volume>=.8?g.innerHTML=e.getSVG("volume-up"):e.audio.volume>0?g.innerHTML=e.getSVG("volume-down"):g.innerHTML=e.getSVG("volume-off")},h=function(t){var a=t||window.event,n=(a.clientX-l(u)-5.5)/f;n=n>0?n:0,n=n<1?n:1,e.updateBar("volume",n,"width"),e.audio.volume=n,e.audio.muted&&(e.audio.muted=!1),b()},v=function ee(){document.removeEventListener("mouseup",ee),document.removeEventListener("mousemove",h),m.classList.remove("dplayer-volume-active")};y.addEventListener("click",function(t){var a=t||window.event,n=(a.clientX-l(u)-5.5)/f;n=n>0?n:0,n=n<1?n:1,e.updateBar("volume",n,"width"),e.audio.volume=n,e.audio.muted&&(e.audio.muted=!1),b()}),y.addEventListener("mousedown",function(){document.addEventListener("mousemove",h),document.addEventListener("mouseup",v),m.classList.add("dplayer-volume-active")}),g.addEventListener("click",function(){e.audio.muted?(e.audio.muted=!1,b(),e.updateBar("volume",e.audio.volume,"width")):(e.audio.muted=!0,g.innerHTML=e.getSVG("volume-off"),e.updateBar("volume",0,"width"))});var x=0;if(!this.isMobile){var k=function(){e.element.classList.remove("dplayer-hide-controller"),clearTimeout(x),x=setTimeout(function(){e.audio.played.length&&(e.element.classList.add("dplayer-hide-controller"),z(),Q())},2e3)};this.element.addEventListener("mousemove",k),this.element.addEventListener("click",k)}this.danOpacity=.7;var w={original:'\n
\n '+this.getTran("Speed")+'\n
'+this.getSVG("right")+('
\n
\n
\n '+this.getTran("Loop")+'\n
\n \n \n
\n
\n
\n '+this.getTran("Danmaku")+'\n
\n \n \n
\n
\n
\n '+this.getTran("Opacity for danmaku")+'\n
\n
\n
\n \n
\n
\n
\n
'),speed:'\n
\n 0.5\n
\n
\n 0.75\n
\n
\n '+this.getTran("Normal")+'\n
\n
\n 1.25\n
\n
\n 1.5\n
\n
\n 2\n
'},Y=this.element.getElementsByClassName("dplayer-setting-icon")[0],L=this.element.getElementsByClassName("dplayer-setting-box")[0],E=this.element.getElementsByClassName("dplayer-mask")[0];L.innerHTML=w.original;var z=function(){L.classList.contains("dplayer-setting-box-open")&&(L.classList.remove("dplayer-setting-box-open"),E.classList.remove("dplayer-mask-show"),setTimeout(function(){L.classList.remove("dplayer-setting-box-narrow"),L.innerHTML=w.original,C()},300))},T=function(){L.classList.add("dplayer-setting-box-open"),E.classList.add("dplayer-mask-show")};E.addEventListener("click",function(){z()}),Y.addEventListener("click",function(){T()});var B=this.element.getElementsByClassName("dplayer-danmaku")[0];this.showdan=!0;var C=function(){var t=e.element.getElementsByClassName("dplayer-setting-loop")[0],a=t.getElementsByClassName("dplayer-toggle-setting-input")[0];a.checked=e.loop,t.addEventListener("click",function(){a.checked=!a.checked,a.checked?(e.loop=!0,e.audio.loop=e.loop):(e.loop=!1,e.audio.loop=e.loop),z()});var n=e.element.getElementsByClassName("dplayer-setting-showdan")[0],r=n.getElementsByClassName("dplayer-showdan-setting-input")[0];r.checked=e.showdan,n.addEventListener("click",function(){if(r.checked=!r.checked,r.checked){if(e.showdan=!0,e.option.danmaku){for(var t=0;t=e.audio.currentTime){e.danIndex=t;break}e.danIndex=e.dan.length}e.danmakuTime=setInterval(function(){for(var t=e.dan[e.danIndex];t&&e.audio.currentTime>=parseFloat(t.time);)e.danmakuIn(t.text,t.color,t.type),t=e.dan[++e.danIndex]},0)}}else e.showdan=!1,e.option.danmaku&&(clearInterval(e.danmakuTime),B.innerHTML="");z()});var o=e.element.getElementsByClassName("dplayer-setting-speed")[0];o.addEventListener("click",function(){L.classList.add("dplayer-setting-box-narrow"),L.innerHTML=w.speed;for(var t=L.getElementsByClassName("dplayer-setting-speed-item"),a=function(a){t[a].addEventListener("click",function(){e.audio.playbackRate=t[a].dataset.speed,z()})},n=0;n0?o:0,o=o<1?o:1,e.updateBar("danmaku",o,"width");for(var i=e.element.getElementsByClassName("dplayer-danmaku-item"),s=0;s0?o:0,o=o<1?o:1,e.updateBar("danmaku",o,"width");for(var i=e.element.getElementsByClassName("dplayer-danmaku-item"),s=0;s=200&&t.status<300||304===t.status){var a=JSON.parse(t.responseText);1!==a.code?alert(a.msg):(e.dan=a.danmaku.sort(function(e,t){return e.time-t.time}),e.element.getElementsByClassName("dplayer-danloading")[0].style.display="none",e.option.autoplay&&!e.isMobile?e.play():e.isMobile&&e.pause())}else console.log("Request was unsuccessful: "+t.status)};var a=void 0;a=e.option.danmaku.maximum?e.option.danmaku.api+"?id="+e.option.danmaku.id+"&max="+e.option.danmaku.maximum:e.option.danmaku.api+"?id="+e.option.danmaku.id,t.open("get",a,!0),t.send(null)}():this.option.autoplay&&!this.isMobile?this.play():this.isMobile&&this.pause();var D=this.element.getElementsByClassName("dplayer-comment-input")[0],O=this.element.getElementsByClassName("dplayer-comment-icon")[0],H=this.element.getElementsByClassName("dplayer-comment-box")[0],X=this.element.getElementsByClassName("dplayer-comment-setting-icon")[0],P=this.element.getElementsByClassName("dplayer-comment-setting-box")[0],U=this.element.getElementsByClassName("dplayer-send-icon")[0],V=function(e){return e.replace(/&/g,"&").replace(//g,">").replace(/"/g,""").replace(/'/g,"'").replace(/\//g,"/")},G=function(){if(D.blur(),!D.value.replace(/^\s+|\s+$/g,""))return void alert(e.getTran("Please input danmaku!"));var t={token:e.option.danmaku.token,player:e.option.danmaku.id,author:"DIYgod",time:e.audio.currentTime,text:D.value,color:e.element.querySelector('input[name="dplayer-danmaku-color"]:checked').value,type:e.element.querySelector('input[name="dplayer-danmaku-type"]:checked').value},a=new XMLHttpRequest;a.onreadystatechange=function(){if(4===a.readyState)if(a.status>=200&&a.status<300||304===a.status){var e=JSON.parse(a.responseText);1!==e.code?alert(e.msg):console.log("Post danmaku: ",JSON.parse(a.responseText))}else console.log("Request was unsuccessful: "+a.status)},a.open("post",e.option.danmaku.api,!0),a.send(JSON.stringify(t)),D.value="",Q(),e.dan.splice(e.danIndex,0,t),e.danIndex++,e.danmakuIn(V(t.text),t.color,t.type)},j=function(){P.classList.contains("dplayer-comment-setting-open")&&P.classList.remove("dplayer-comment-setting-open")},J=function(){P.classList.contains("dplayer-comment-setting-open")?P.classList.remove("dplayer-comment-setting-open"):P.classList.add("dplayer-comment-setting-open")},W=0,Q=function(){H.classList.contains("dplayer-comment-box-open")&&(H.classList.remove("dplayer-comment-box-open"),E.classList.remove("dplayer-mask-show"),clearInterval(W),e.element.classList.remove("dplayer-show-controller"),j())},_=function(){H.classList.add("dplayer-comment-box-open"),E.classList.add("dplayer-mask-show"),W=setInterval(function(){clearTimeout(x)},1e3),e.element.classList.add("dplayer-show-controller")};E.addEventListener("click",function(){Q()}),O.addEventListener("click",function(){_(),setTimeout(function(){D.focus()},300)}),X.addEventListener("click",function(){J()}),this.element.getElementsByClassName("dplayer-comment-setting-color")[0].addEventListener("click",function(){var t=e.element.querySelector('input[name="dplayer-danmaku-color"]:checked+span');t&&(X.getElementsByClassName("dplayer-fill")[0].style.fill=e.element.querySelector('input[name="dplayer-danmaku-color"]:checked').value)}),D.addEventListener("click",function(){j()}),D.addEventListener("keydown",function(e){var t=e||window.event;13===t.keyCode&&G()}),U.addEventListener("click",G);var Z=function(){q=B.offsetWidth;for(var t=e.element.getElementsByClassName("dplayer-danmaku-item"),a=0;a0?n:0,n=n<1?n:1,e.updateBar("volume",n,"width"),e.audio.volume=n,e.audio.muted&&(e.audio.muted=!1),b();break;case 40:a.preventDefault(),n=e.audio.volume-.1,n=n>0?n:0,n=n<1?n:1,e.updateBar("volume",n,"width"),e.audio.volume=n,e.audio.muted&&(e.audio.muted=!1),b()}}};document.addEventListener("keydown",K),this.menu=this.element.getElementsByClassName("dplayer-menu")[0],this.element.addEventListener("contextmenu",function(t){var a=t||window.event;a.preventDefault(),e.menu.style.left=a.clientX-e.element.getBoundingClientRect().left+"px",e.menu.style.top=a.clientY-e.element.getBoundingClientRect().top+"px",e.menu.classList.add("dplayer-menu-show"),E.classList.add("dplayer-mask-show"),E.addEventListener("click",function(){E.classList.remove("dplayer-mask-show"),e.menu.classList.remove("dplayer-menu-show")})}),this.option.screenshot&&!function(){var t=e.element.getElementsByClassName("dplayer-camera-icon")[0];t.addEventListener("click",function(){var a=document.createElement("canvas");a.width=e.audio.videoWidth,a.height=e.audio.videoHeight,a.getContext("2d").drawImage(e.audio,0,0,a.width,a.height),t.href=a.toDataURL(),t.download="Screenshot_from_DPlayer.png"})}()}},{key:"play",value:function(e){"[object Number]"===Object.prototype.toString.call(e)&&(this.audio.currentTime=e),this.audio.paused&&(this.shouldpause=!1,this.bezel.innerHTML=this.getSVG("play"),this.bezel.classList.add("dplayer-bezel-transition"),this.playButton.innerHTML=this.getSVG("pause"),this.audio.play(),this.playedTime&&this.clearTime(),this.setTime(),this.element.classList.add("dplayer-playing"),this.trigger("play"))}},{key:"pause",value:function(){this.shouldpause&&!this.ended||(this.shouldpause=!0,this.element.classList.remove("dplayer-loading"),this.bezel.innerHTML=this.getSVG("pause"),this.bezel.classList.add("dplayer-bezel-transition"),this.ended=!1,this.playButton.innerHTML=this.getSVG("play"),this.audio.pause(),this.clearTime(),this.element.classList.remove("dplayer-playing"),this.trigger("pause"))}},{key:"on",value:function(e,t){"function"==typeof t&&this.event[e].push(t)}}]),e}();t.DPlayer=o},function(e,t,a){var n=a(2);"string"==typeof n&&(n=[[e.id,n,""]]);a(4)(n,{});n.locals&&(e.exports=n.locals)},function(e,t,a){t=e.exports=a(3)(),t.push([e.id,'.dplayer{position:relative;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;line-height:1}.dplayer:-webkit-full-screen{width:100%;height:100%;background:#000}.dplayer:-webkit-full-screen .dplayer-danmaku .dplayer-danmaku-bottom.dplayer-danmaku-move,.dplayer:-webkit-full-screen .dplayer-danmaku .dplayer-danmaku-top.dplayer-danmaku-move{-webkit-animation:danmaku-center 6s linear;animation:danmaku-center 6s linear;-webkit-animation-play-state:paused;animation-play-state:paused}.dplayer:-webkit-full-screen .dplayer-danmaku .dplayer-danmaku-right.dplayer-danmaku-move{-webkit-animation:danmaku 8s linear;animation:danmaku 8s linear;-webkit-animation-play-state:paused;animation-play-state:paused}.dplayer.dplayer-no-danmaku .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box{height:60px}.dplayer.dplayer-no-danmaku .dplayer-controller .dplayer-icons .dplayer-comment,.dplayer.dplayer-no-danmaku .dplayer-danmaku{display:none}.dplayer.dplayer-playing .dplayer-danmaku .dplayer-danmaku-move{-webkit-animation-play-state:running!important;animation-play-state:running!important}@media (min-width:900px){.dplayer.dplayer-playing .dplayer-controller,.dplayer.dplayer-playing .dplayer-controller-mask{opacity:0}.dplayer.dplayer-playing:hover .dplayer-controller,.dplayer.dplayer-playing:hover .dplayer-controller-mask{opacity:1}}.dplayer.dplayer-loading .dplayer-bezel .diplayer-loading-icon{display:block}.dplayer.dplayer-loading .dplayer-danmaku .dplayer-danmaku-move{-webkit-animation-play-state:paused!important;animation-play-state:paused!important}.dplayer.dplayer-hide-controller .dplayer-controller,.dplayer.dplayer-hide-controller .dplayer-controller-mask{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}.dplayer.dplayer-show-controller .dplayer-controller,.dplayer.dplayer-show-controller .dplayer-controller-mask{opacity:1}.dplayer .dplayer-mask{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1;display:none}.dplayer .dplayer-mask.dplayer-mask-show{display:block}.dplayer .dplayer-video-wrap{position:relative;background:#000;font-size:0;width:100%;height:100%}.dplayer .dplayer-video-wrap .dplayer-video{width:100%;height:100%}.dplayer .dplayer-danmaku{position:absolute;left:0;right:0;top:0;bottom:0;font-size:22px;color:#fff}.dplayer .dplayer-danmaku .dplayer-danmaku-item{display:inline-block;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;white-space:nowrap;font-weight:bolder;text-shadow:.5px .5px .5px rgba(0,0,0,.5)}.dplayer .dplayer-danmaku .dplayer-danmaku-right{position:absolute;right:0;-webkit-transform:translateX(100%);transform:translateX(100%)}.dplayer .dplayer-danmaku .dplayer-danmaku-right.dplayer-danmaku-move{will-change:transform;-webkit-animation:danmaku 5s linear;animation:danmaku 5s linear;-webkit-animation-play-state:paused;animation-play-state:paused}@-webkit-keyframes danmaku{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes danmaku{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}}.dplayer .dplayer-danmaku .dplayer-danmaku-bottom,.dplayer .dplayer-danmaku .dplayer-danmaku-top{position:absolute;width:100%;text-align:center;visibility:hidden}.dplayer .dplayer-danmaku .dplayer-danmaku-bottom.dplayer-danmaku-move,.dplayer .dplayer-danmaku .dplayer-danmaku-top.dplayer-danmaku-move{will-change:visibility;-webkit-animation:danmaku-center 4s linear;animation:danmaku-center 4s linear;-webkit-animation-play-state:paused;animation-play-state:paused}@-webkit-keyframes danmaku-center{0%{visibility:visible}to{visibility:visible}}@keyframes danmaku-center{0%{visibility:visible}to{visibility:visible}}.dplayer .dplayer-bezel{position:absolute;left:0;right:0;top:0;bottom:0;font-size:22px;color:#fff;pointer-events:none}.dplayer .dplayer-bezel .dplayer-fill{fill:hsla(0,0%,100%,.8)}.dplayer .dplayer-bezel .dplayer-bezel-icon{position:absolute;top:50%;left:50%;margin:-26px 0 0 -26px;height:52px;width:52px;padding:12px;box-sizing:border-box;background:rgba(0,0,0,.5);border-radius:50%;opacity:0;pointer-events:none}.dplayer .dplayer-bezel .dplayer-bezel-icon.dplayer-bezel-transition{-webkit-animation:bezel-hide .5s linear;animation:bezel-hide .5s linear}@-webkit-keyframes bezel-hide{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}to{opacity:0;-webkit-transform:scale(2);transform:scale(2)}}@keyframes bezel-hide{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}to{opacity:0;-webkit-transform:scale(2);transform:scale(2)}}.dplayer .dplayer-bezel .dplayer-danloading{position:absolute;top:50%;margin-top:-7px;width:100%;text-align:center;font-size:14px;line-height:14px;-webkit-animation:my-face 5s infinite ease-in-out;animation:my-face 5s infinite ease-in-out}.dplayer .dplayer-bezel .diplayer-loading-icon{display:none;position:absolute;top:50%;left:50%;margin:-18px 0 0 -18px;height:36px;width:36px;pointer-events:none}.dplayer .dplayer-bezel .diplayer-loading-icon .diplayer-loading-hide{display:none}.dplayer .dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot{-webkit-animation:diplayer-loading-dot-fade .8s ease infinite;animation:diplayer-loading-dot-fade .8s ease infinite;opacity:0;fill:#fff;-webkit-transform-origin:4px 4px;transform-origin:4px 4px}.dplayer .dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-7{-webkit-animation-delay:.7s;animation-delay:.7s}.dplayer .dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-6{-webkit-animation-delay:.6s;animation-delay:.6s}.dplayer .dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-5{-webkit-animation-delay:.5s;animation-delay:.5s}.dplayer .dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-4{-webkit-animation-delay:.4s;animation-delay:.4s}.dplayer .dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-3{-webkit-animation-delay:.3s;animation-delay:.3s}.dplayer .dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-2{-webkit-animation-delay:.2s;animation-delay:.2s}.dplayer .dplayer-bezel .diplayer-loading-icon .diplayer-loading-dot.diplayer-loading-dot-1{-webkit-animation-delay:.1s;animation-delay:.1s}@-webkit-keyframes diplayer-loading-dot-fade{0%{opacity:.7;-webkit-transform:scale(1.2);transform:scale(1.2)}50%{opacity:.25;-webkit-transform:scale(.9);transform:scale(.9)}to{opacity:.25;-webkit-transform:scale(.85);transform:scale(.85)}}@keyframes diplayer-loading-dot-fade{0%{opacity:.7;-webkit-transform:scale(1.2);transform:scale(1.2)}50%{opacity:.25;-webkit-transform:scale(.9);transform:scale(.9)}to{opacity:.25;-webkit-transform:scale(.85);transform:scale(.85)}}.dplayer .dplayer-controller-mask{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom;height:98px;width:100%}.dplayer .dplayer-controller,.dplayer .dplayer-controller-mask{position:absolute;bottom:0;-webkit-transition:all .3s ease;transition:all .3s ease}.dplayer .dplayer-controller{left:0;right:0;height:41px;padding:0 20px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.dplayer .dplayer-controller .dplayer-bar-wrap{padding:5px 0;cursor:pointer;position:absolute;bottom:33px;width:calc(100% - 40px);height:3px}.dplayer .dplayer-controller .dplayer-bar-wrap:hover .dplayer-thumb{-webkit-transform:scale(1)!important;transform:scale(1)!important}.dplayer .dplayer-controller .dplayer-bar-wrap .dplayer-bar{position:relative;height:3px;width:100%;background:hsla(0,0%,100%,.2);cursor:pointer!important}.dplayer .dplayer-controller .dplayer-bar-wrap .dplayer-bar .dplayer-loaded{position:absolute;left:0;top:0;bottom:0;background:hsla(0,0%,100%,.4);height:3px;-webkit-transition:all .5s ease;transition:all .5s ease;will-change:width}.dplayer .dplayer-controller .dplayer-bar-wrap .dplayer-bar .dplayer-played{position:absolute;left:0;top:0;bottom:0;height:3px;will-change:width}.dplayer .dplayer-controller .dplayer-bar-wrap .dplayer-bar .dplayer-played .dplayer-thumb{position:absolute;top:0;right:5px;margin-top:-4px;margin-right:-10px;height:11px;width:11px;border-radius:50%;cursor:pointer!important;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-transform:scale(0);transform:scale(0)}.dplayer .dplayer-controller .dplayer-icons{height:38px;position:absolute;bottom:0}.dplayer .dplayer-controller .dplayer-icons.dplayer-icons-left .dplayer-icon{padding:7px}.dplayer .dplayer-controller .dplayer-icons.dplayer-icons-right{right:20px}.dplayer .dplayer-controller .dplayer-icons.dplayer-icons-right .dplayer-icon{padding:8px}.dplayer .dplayer-controller .dplayer-icons #dplayer-menu{stroke:#ddd;stroke-width:1px}.dplayer .dplayer-controller .dplayer-icons .dplayer-time{line-height:38px;color:#eee;text-shadow:0 0 2px rgba(0,0,0,.5);vertical-align:middle;font-size:13px;cursor:default}.dplayer .dplayer-controller .dplayer-icons .dplayer-icon{width:46px;height:100%;border:none;background-color:transparent;outline:none;cursor:pointer;opacity:.8;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;vertical-align:middle;box-sizing:border-box;display:inline-block}.dplayer .dplayer-controller .dplayer-icons .dplayer-icon:hover{opacity:1}.dplayer .dplayer-controller .dplayer-icons .dplayer-icon.dplayer-comment-icon{padding:10px 9px 9px}.dplayer .dplayer-controller .dplayer-icons .dplayer-icon.dplayer-setting-icon{padding-top:8.5px}.dplayer .dplayer-controller .dplayer-icons .dplayer-fill{fill:#fff}.dplayer .dplayer-controller .dplayer-icons .dplayer-volume{position:relative;display:inline-block;cursor:pointer!important;height:100%}.dplayer .dplayer-controller .dplayer-icons .dplayer-volume:hover .dplayer-volume-bar{width:45px!important}.dplayer .dplayer-controller .dplayer-icons .dplayer-volume:hover .dplayer-thumb{-webkit-transform:scale(1)!important;transform:scale(1)!important}.dplayer .dplayer-controller .dplayer-icons .dplayer-volume.dplayer-volume-active .dplayer-volume-bar{width:45px!important}.dplayer .dplayer-controller .dplayer-icons .dplayer-volume.dplayer-volume-active .dplayer-thumb{-webkit-transform:scale(1)!important;transform:scale(1)!important}.dplayer .dplayer-controller .dplayer-icons .dplayer-volume .dplayer-volume-bar-wrap{display:inline-block;margin:0 5px 0 -5px;vertical-align:middle;height:100%}.dplayer .dplayer-controller .dplayer-icons .dplayer-volume .dplayer-volume-bar-wrap .dplayer-volume-bar{position:relative;top:17px;width:0;height:3px;background:#aaa;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.dplayer .dplayer-controller .dplayer-icons .dplayer-volume .dplayer-volume-bar-wrap .dplayer-volume-bar .dplayer-volume-bar-inner{position:absolute;bottom:0;left:0;height:100%;-webkit-transition:all .1s ease;transition:all .1s ease;will-change:width}.dplayer .dplayer-controller .dplayer-icons .dplayer-volume .dplayer-volume-bar-wrap .dplayer-volume-bar .dplayer-volume-bar-inner .dplayer-thumb{position:absolute;top:0;right:5px;margin-top:-4px;margin-right:-10px;height:11px;width:11px;border-radius:50%;cursor:pointer!important;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-transform:scale(0);transform:scale(0)}.dplayer .dplayer-controller .dplayer-icons .dplayer-setting{display:inline-block;height:100%}.dplayer .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box{position:absolute;right:0;bottom:50px;-webkit-transform:translateX(170px);transform:translateX(170px);width:150px;height:120px;border-radius:2px;background:rgba(28,28,28,.9);padding:7px 0;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;overflow:hidden;z-index:2}.dplayer .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box.dplayer-setting-box-open{-webkit-transform:translateX(0);transform:translateX(0)}.dplayer .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box.dplayer-setting-box-narrow{width:70px;height:180px;text-align:center}.dplayer .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-item,.dplayer .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-speed-item{height:30px;padding:5px 10px;box-sizing:border-box;cursor:pointer}.dplayer .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-item:hover,.dplayer .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-speed-item:hover{background-color:hsla(0,0%,100%,.1)}.dplayer .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku{padding:5px 0}.dplayer .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku .dplayer-label{padding:0 10px;display:inline}.dplayer .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku:hover .dplayer-label{display:none}.dplayer .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku:hover .dplayer-danmaku-bar-wrap{display:inline-block}.dplayer .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku.dplayer-setting-danmaku-active .dplayer-label{display:none}.dplayer .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku.dplayer-setting-danmaku-active .dplayer-danmaku-bar-wrap{display:inline-block}.dplayer .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku .dplayer-danmaku-bar-wrap{padding:0 10px;box-sizing:border-box;display:none;vertical-align:middle;height:100%;width:100%}.dplayer .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku .dplayer-danmaku-bar-wrap .dplayer-danmaku-bar{position:relative;top:8.5px;width:100%;height:3px;background:#fff;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.dplayer .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku .dplayer-danmaku-bar-wrap .dplayer-danmaku-bar .dplayer-danmaku-bar-inner{position:absolute;bottom:0;left:0;height:100%;-webkit-transition:all .1s ease;transition:all .1s ease;background:#aaa;will-change:width}.dplayer .dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-danmaku .dplayer-danmaku-bar-wrap .dplayer-danmaku-bar .dplayer-danmaku-bar-inner .dplayer-thumb{position:absolute;top:0;right:5px;margin-top:-4px;margin-right:-10px;height:11px;width:11px;border-radius:50%;cursor:pointer!important;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;background:#aaa}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment{display:inline-block;height:100%}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box{position:absolute;right:0;bottom:50px;-webkit-transform:translateX(382px);transform:translateX(382px);border-radius:2px;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;z-index:2}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box.dplayer-comment-box-open{-webkit-transform:translateX(0);transform:translateX(0)}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-comment-setting-icon{height:24px;width:24px;position:absolute;top:5px;left:7px;padding:0;opacity:1}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-comment-setting-icon:hover .dplayer-fill{fill:#aaa}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-comment-setting-icon .dplayer-fill{-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;fill:#ddd}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-comment-setting-box{position:absolute;background:#fff;bottom:40px;left:-93px;box-shadow:0 0 25px rgba(0,0,0,.3);border-radius:4px;padding:10px 10px 16px;font-size:14px;width:204px;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-transform:scale(0);transform:scale(0)}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-comment-setting-box.dplayer-comment-setting-open{-webkit-transform:scale(1);transform:scale(1)}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-comment-setting-box:after{content:\'\';position:absolute;top:100%;left:50%;margin-left:-12px;background:url(\'data:image/svg+xml;utf8,\');width:24px;height:12px}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-comment-setting-box input[type=radio]{display:none}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-comment-setting-box label{cursor:pointer}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-title{font-size:14px;color:#555;padding:6px}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-type{font-size:0}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-type label:nth-child(2) span{border-radius:4px 0 0 4px}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-type label:nth-child(4) span{border-radius:0 4px 4px 0}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-type span{width:33%;padding:4px 6px;line-height:16px;display:inline-block;font-size:12px;color:#555;border:1px solid #e4e4e6;margin-right:-1px;box-sizing:border-box;text-align:center;cursor:pointer}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-type input:checked+span{background:#e4e4e6}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-color{font-size:0}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-color label{font-size:0;padding:6px;display:inline-block}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-color span{width:22px;height:22px;display:inline-block;border-radius:50%;box-sizing:border-box;cursor:pointer}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-color span:hover{-webkit-animation:my-face 5s infinite ease-in-out;animation:my-face 5s infinite ease-in-out;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12)}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-comment-setting-box .dplayer-comment-setting-color input:checked+span{box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);border:none!important}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-comment-input{outline:none;border:none;padding:8px 31px;font-size:14px;line-height:18px;text-align:center;border-radius:4px;width:300px}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-send-icon{height:22px;width:22px;position:absolute;top:6px;right:7px;padding:0;opacity:1}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-send-icon:hover .dplayer-fill{fill:#aaa}.dplayer .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-send-icon .dplayer-fill{-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;fill:#ddd}.dplayer .dplayer-controller .dplayer-icons .dplayer-label{color:#eee;font-size:13px;display:inline-block;vertical-align:middle}.dplayer .dplayer-controller .dplayer-icons .dplayer-toggle{width:32px;height:100%;text-align:center;display:inline-block;font-size:0;vertical-align:middle;float:right}.dplayer .dplayer-controller .dplayer-icons .dplayer-toggle input{max-height:0;max-width:0;display:none}.dplayer .dplayer-controller .dplayer-icons .dplayer-toggle input+label{display:inline-block;position:relative;box-shadow:inset 0 0 0 0 #dfdfdf;border:1px solid #dfdfdf;height:20px;width:32px;border-radius:10px;box-sizing:border-box;cursor:pointer;-webkit-transition:.2s ease-in-out;transition:.2s ease-in-out}.dplayer .dplayer-controller .dplayer-icons .dplayer-toggle input+label:after,.dplayer .dplayer-controller .dplayer-icons .dplayer-toggle input+label:before{content:"";position:absolute;display:block;height:18px;width:18px;top:0;left:0;border-radius:15px;-webkit-transition:.2s ease-in-out;transition:.2s ease-in-out}.dplayer .dplayer-controller .dplayer-icons .dplayer-toggle input+label:after{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.4)}.dplayer .dplayer-controller .dplayer-icons .dplayer-toggle input:checked+label{border-color:hsla(0,0%,100%,.5)}.dplayer .dplayer-controller .dplayer-icons .dplayer-toggle input:checked+label:before{width:30px;background:hsla(0,0%,100%,.5)}.dplayer .dplayer-controller .dplayer-icons .dplayer-toggle input:checked+label:after{left:12px}.dplayer .dplayer-menu{position:absolute;width:150px;border-radius:2px;background:rgba(28,28,28,.9);padding:5px 0;overflow:hidden;z-index:3;display:none}.dplayer .dplayer-menu.dplayer-menu-show{display:block}.dplayer .dplayer-menu .dplayer-menu-item{height:30px;padding:5px 10px;box-sizing:border-box;cursor:pointer}.dplayer .dplayer-menu .dplayer-menu-item:hover{background-color:hsla(0,0%,100%,.1)}.dplayer .dplayer-menu .dplayer-menu-item .dplayer-menu-label a{color:#eee;font-size:13px;display:inline-block;vertical-align:middle}@-webkit-keyframes my-face{2%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}4%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}6%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}8%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}10%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}12%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}14%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}16%{-webkit-transform:translateY(-.5px) rotate(-1.5deg);transform:translateY(-.5px) rotate(-1.5deg)}18%{-webkit-transform:translateY(.5px) rotate(-1.5deg);transform:translateY(.5px) rotate(-1.5deg)}20%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}22%{-webkit-transform:translateY(.5px) rotate(-1.5deg);transform:translateY(.5px) rotate(-1.5deg)}24%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}26%{-webkit-transform:translateY(.5px) rotate(.5deg);transform:translateY(.5px) rotate(.5deg)}28%{-webkit-transform:translateY(.5px) rotate(1.5deg);transform:translateY(.5px) rotate(1.5deg)}30%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}32%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}34%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}36%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}38%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}40%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}42%{-webkit-transform:translateY(2.5px) rotate(-1.5deg);transform:translateY(2.5px) rotate(-1.5deg)}44%{-webkit-transform:translateY(1.5px) rotate(.5deg);transform:translateY(1.5px) rotate(.5deg)}46%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}48%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}50%{-webkit-transform:translateY(.5px) rotate(.5deg);transform:translateY(.5px) rotate(.5deg)}52%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}54%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}56%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}58%{-webkit-transform:translateY(.5px) rotate(2.5deg);transform:translateY(.5px) rotate(2.5deg)}60%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}62%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}64%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}66%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}68%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}70%{-webkit-transform:translateY(1.5px) rotate(.5deg);transform:translateY(1.5px) rotate(.5deg)}72%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}74%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}76%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}78%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}80%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}82%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}84%{-webkit-transform:translateY(1.5px) rotate(2.5deg);transform:translateY(1.5px) rotate(2.5deg)}86%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}88%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}90%{-webkit-transform:translateY(2.5px) rotate(-.5deg);transform:translateY(2.5px) rotate(-.5deg)}92%{-webkit-transform:translateY(.5px) rotate(-.5deg);transform:translateY(.5px) rotate(-.5deg)}94%{-webkit-transform:translateY(2.5px) rotate(.5deg);transform:translateY(2.5px) rotate(.5deg)}96%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}98%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}0%,to{-webkit-transform:translate(0) rotate(0deg);transform:translate(0) rotate(0deg)}}@keyframes my-face{2%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}4%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}6%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}8%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}10%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}12%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}14%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}16%{-webkit-transform:translateY(-.5px) rotate(-1.5deg);transform:translateY(-.5px) rotate(-1.5deg)}18%{-webkit-transform:translateY(.5px) rotate(-1.5deg);transform:translateY(.5px) rotate(-1.5deg)}20%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}22%{-webkit-transform:translateY(.5px) rotate(-1.5deg);transform:translateY(.5px) rotate(-1.5deg)}24%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}26%{-webkit-transform:translateY(.5px) rotate(.5deg);transform:translateY(.5px) rotate(.5deg)}28%{-webkit-transform:translateY(.5px) rotate(1.5deg);transform:translateY(.5px) rotate(1.5deg)}30%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}32%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}34%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}36%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}38%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}40%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}42%{-webkit-transform:translateY(2.5px) rotate(-1.5deg);transform:translateY(2.5px) rotate(-1.5deg)}44%{-webkit-transform:translateY(1.5px) rotate(.5deg);transform:translateY(1.5px) rotate(.5deg)}46%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}48%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}50%{-webkit-transform:translateY(.5px) rotate(.5deg);transform:translateY(.5px) rotate(.5deg)}52%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}54%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}56%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}58%{-webkit-transform:translateY(.5px) rotate(2.5deg);transform:translateY(.5px) rotate(2.5deg)}60%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}62%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}64%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}66%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}68%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}70%{-webkit-transform:translateY(1.5px) rotate(.5deg);transform:translateY(1.5px) rotate(.5deg)}72%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}74%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}76%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}78%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}80%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}82%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}84%{-webkit-transform:translateY(1.5px) rotate(2.5deg);transform:translateY(1.5px) rotate(2.5deg)}86%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}88%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}90%{-webkit-transform:translateY(2.5px) rotate(-.5deg);transform:translateY(2.5px) rotate(-.5deg)}92%{-webkit-transform:translateY(.5px) rotate(-.5deg);transform:translateY(.5px) rotate(-.5deg)}94%{-webkit-transform:translateY(2.5px) rotate(.5deg);transform:translateY(2.5px) rotate(.5deg)}96%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}98%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}0%,to{-webkit-transform:translate(0) rotate(0deg);transform:translate(0) rotate(0deg)}}',""]); +},function(e,t){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],t=0;t=0&&v.splice(t,1)}function i(e){var t=document.createElement("style");return t.type="text/css",l(e,t),t}function s(e){var t=document.createElement("link");return t.rel="stylesheet",l(e,t),t}function d(e,t){var a,n,r;if(t.singleton){var l=h++;a=b||(b=i(t)),n=p.bind(null,a,l,!1),r=p.bind(null,a,l,!0)}else e.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(a=s(t),n=m.bind(null,a),r=function(){o(a),a.href&&URL.revokeObjectURL(a.href)}):(a=i(t),n=c.bind(null,a),r=function(){o(a)});return n(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;n(e=t)}else r()}}function p(e,t,a,n){var r=a?"":n.css;if(e.styleSheet)e.styleSheet.cssText=x(t,r);else{var l=document.createTextNode(r),o=e.childNodes;o[t]&&e.removeChild(o[t]),o.length?e.insertBefore(l,o[t]):e.appendChild(l)}}function c(e,t){var a=t.css,n=t.media;if(n&&e.setAttribute("media",n),e.styleSheet)e.styleSheet.cssText=a;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(a))}}function m(e,t){var a=t.css,n=t.sourceMap;n&&(a+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n))))+" */");var r=new Blob([a],{type:"text/css"}),l=e.href;e.href=URL.createObjectURL(r),l&&URL.revokeObjectURL(l)}var y={},u=function(e){var t;return function(){return"undefined"==typeof t&&(t=e.apply(this,arguments)),t}},g=u(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),f=u(function(){return document.head||document.getElementsByTagName("head")[0]}),b=null,h=0,v=[];e.exports=function(e,t){t=t||{},"undefined"==typeof t.singleton&&(t.singleton=g()),"undefined"==typeof t.insertAt&&(t.insertAt="bottom");var a=r(e);return n(a,t),function(e){for(var l=[],o=0;o\\n \\n \\n \\n ';\n\t };\n\t\n\t this.isMobile = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i);\n\t // compatibility: some mobile browsers don't suppose autoplay\n\t if (this.isMobile) {\n\t option.autoplay = false;\n\t }\n\t\n\t // default options\n\t var defaultOption = {\n\t element: document.getElementsByClassName('dplayer')[0],\n\t autoplay: false,\n\t theme: '#b7daff',\n\t loop: false,\n\t lang: navigator.language.indexOf('zh') !== -1 ? 'zh' : 'en'\n\t };\n\t for (var defaultKey in defaultOption) {\n\t if (defaultOption.hasOwnProperty(defaultKey) && !option.hasOwnProperty(defaultKey)) {\n\t option[defaultKey] = defaultOption[defaultKey];\n\t }\n\t }\n\t\n\t this.option = option;\n\t this.loop = option.loop;\n\t\n\t this.tranZH = {\n\t 'Danmaku is loading': '弹幕加载中',\n\t 'Top': '顶部',\n\t 'Bottom': '底部',\n\t 'Rolling': '滚动',\n\t 'Input danmaku, hit Enter': '输入弹幕，回车发送',\n\t 'About author': '关于作者',\n\t 'DPlayer feedback': '播放器意见反馈',\n\t 'About DPlayer': '关于 DPlay 播放器',\n\t 'Loop': '洗脑循环',\n\t 'Speed': '速度',\n\t 'Opacity for danmaku': '弹幕透明度',\n\t 'Normal': '正常',\n\t 'Please input danmaku!': '要输入弹幕内容啊喂！',\n\t 'Set danmaku color': '设置弹幕颜色',\n\t 'Set danmaku type': '设置弹幕类型',\n\t 'Danmaku': '弹幕'\n\t };\n\t this.getTran = function (text) {\n\t if (_this.option.lang === 'en') {\n\t return text;\n\t } else if (_this.option.lang === 'zh') {\n\t return _this.tranZH[text];\n\t }\n\t };\n\t\n\t /**\n\t * Parse second to 00:00 format\n\t *\n\t * @param {Number} second\n\t * @return {String} 00:00 format\n\t */\n\t this.secondToTime = function (second) {\n\t var add0 = function add0(num) {\n\t return num < 10 ? '0' + num : '' + num;\n\t };\n\t var min = parseInt(second / 60);\n\t var sec = parseInt(second - min * 60);\n\t return add0(min) + ':' + add0(sec);\n\t };\n\t\n\t /**\n\t * Update progress bar, including loading progress bar and play progress bar\n\t *\n\t * @param {String} type - Point out which bar it is, should be played loaded or volume\n\t * @param {Number} percentage\n\t * @param {String} direction - Point out the direction of this bar, Should be height or width\n\t */\n\t this.updateBar = function (type, percentage, direction) {\n\t percentage = percentage > 0 ? percentage : 0;\n\t percentage = percentage < 1 ? percentage : 1;\n\t _this[type + 'Bar'].style[direction] = percentage * 100 + '%';\n\t };\n\t\n\t // define DPlayer events\n\t this.eventTypes = ['play', 'pause', 'canplay', 'playing', 'ended', 'error'];\n\t this.event = {};\n\t for (var i = 0; i < this.eventTypes.length; i++) {\n\t this.event[this.eventTypes[i]] = [];\n\t }\n\t this.trigger = function (type) {\n\t for (var _i = 0; _i < _this.event[type].length; _i++) {\n\t _this.event[type][_i]();\n\t }\n\t };\n\t }\n\t\n\t /**\n\t * AutoLink initialization function\n\t */\n\t\n\t\n\t _createClass(DPlayer, [{\n\t key: 'init',\n\t value: function init() {\n\t var _this2 = this;\n\t\n\t this.element = this.option.element;\n\t if (!this.option.danmaku) {\n\t this.element.classList.add('dplayer-no-danmaku');\n\t }\n\t\n\t this.element.innerHTML = '\\n
\\n
\\n \\n
\\n
\\n \\n ' + (this.option.danmaku ? '' + this.getTran('Danmaku is loading') + '' : '') + '\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n
\\n
\\n
\\n
\\n
\\n \\n
\\n \\n
\\n
\\n
\\n \\n
\\n
\\n
\\n
\\n 0:00 / 0:00\\n
\\n
\\n ') + this.getSVG('camera') + ' \\n
\\n \\n
\\n \\n
\\n
\\n
' + this.getTran('Set danmaku color') + '
\\n \\n \\n \\n \\n \\n \\n
\\n
\\n
' + this.getTran('Set danmaku type') + '
\\n \\n \\n \\n
\\n
\\n \\n \\n
\\n
\\n
\\n \\n
\\n
\\n \\n
\\n
\\n
\\n
\\n
\\n \\n
\\n
\\n
\\n
\\n
\\n
' + this.getTran('About author') + '
\\n
' + this.getTran('DPlayer feedback') + '
\\n
' + this.getTran('About DPlayer') + '
\\n
\\n ');\n\t\n\t // get this audio object\n\t this.audio = this.element.getElementsByClassName('dplayer-video')[0];\n\t\n\t // Support HTTP Live Streaming\n\t // if (this.option.video.url.match(/(m3u8)$/i) || Hls.isSupported()) {\n\t // const hls = new Hls();\n\t // hls.attachMedia(this.audio);\n\t // hls.on(Hls.Events.MEDIA_ATTACHED, () => {\n\t // hls.loadSource(this.option.video.url);\n\t // hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {\n\t // console.log(\"manifest loaded, found \" + data.levels.length + \" quality level\");\n\t // });\n\t // });\n\t // }\n\t\n\t this.bezel = this.element.getElementsByClassName('dplayer-bezel-icon')[0];\n\t this.bezel.addEventListener('animationend', function () {\n\t _this2.bezel.classList.remove('dplayer-bezel-transition');\n\t });\n\t\n\t this.ptime = this.element.getElementsByClassName('dplayer-ptime')[0];\n\t\n\t // play and pause button\n\t this.playButton = this.element.getElementsByClassName('dplayer-play-icon')[0];\n\t this.shouldpause = true;\n\t this.toggle = function () {\n\t if (_this2.audio.paused) {\n\t _this2.play();\n\t } else {\n\t _this2.pause();\n\t }\n\t };\n\t this.playButton.addEventListener('click', this.toggle);\n\t\n\t var videoWrap = this.element.getElementsByClassName('dplayer-video-wrap')[0];\n\t var conMask = this.element.getElementsByClassName('dplayer-controller-mask')[0];\n\t if (!this.isMobile) {\n\t videoWrap.addEventListener('click', this.toggle);\n\t conMask.addEventListener('click', this.toggle);\n\t } else {\n\t var toggleController = function toggleController() {\n\t if (_this2.element.classList.contains('dplayer-hide-controller')) {\n\t _this2.element.classList.remove('dplayer-hide-controller');\n\t } else {\n\t _this2.element.classList.add('dplayer-hide-controller');\n\t }\n\t };\n\t videoWrap.addEventListener('click', toggleController);\n\t conMask.addEventListener('click', toggleController);\n\t }\n\t\n\t /**\n\t * control play progress\n\t */\n\t // get element's view position\n\t var getElementViewLeft = function getElementViewLeft(element) {\n\t var actualLeft = element.offsetLeft;\n\t var current = element.offsetParent;\n\t var elementScrollLeft = void 0;\n\t if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement) {\n\t while (current !== null) {\n\t actualLeft += current.offsetLeft;\n\t current = current.offsetParent;\n\t }\n\t } else {\n\t while (current !== null && current !== _this2.element) {\n\t actualLeft += current.offsetLeft;\n\t current = current.offsetParent;\n\t }\n\t }\n\t elementScrollLeft = document.body.scrollLeft + document.documentElement.scrollLeft;\n\t return actualLeft - elementScrollLeft;\n\t };\n\t\n\t var getElementViewTop = function getElementViewTop(element) {\n\t var actualTop = element.offsetTop;\n\t var current = element.offsetParent;\n\t var elementScrollTop = void 0;\n\t if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement) {\n\t while (current !== null) {\n\t actualTop += current.offsetTop;\n\t current = current.offsetParent;\n\t }\n\t } else {\n\t while (current !== null && current !== _this2.element) {\n\t actualTop += current.offsetTop;\n\t current = current.offsetParent;\n\t }\n\t }\n\t elementScrollTop = document.body.scrollTop + document.documentElement.scrollTop;\n\t return actualTop - elementScrollTop;\n\t };\n\t\n\t this.playedBar = this.element.getElementsByClassName('dplayer-played')[0];\n\t this.loadedBar = this.element.getElementsByClassName('dplayer-loaded')[0];\n\t this.bar = this.element.getElementsByClassName('dplayer-bar-wrap')[0];\n\t var barWidth = void 0;\n\t\n\t if (this.option.danmaku) {\n\t this.audio.addEventListener('seeking', function () {\n\t for (var i = 0; i < _this2.dan.length; i++) {\n\t if (_this2.dan[i].time >= _this2.audio.currentTime) {\n\t _this2.danIndex = i;\n\t return;\n\t }\n\t _this2.danIndex = _this2.dan.length;\n\t }\n\t });\n\t }\n\t\n\t var lastPlayPos = 0;\n\t var currentPlayPos = 0;\n\t var bufferingDetected = false;\n\t this.setTime = function () {\n\t _this2.playedTime = setInterval(function () {\n\t // whether the video is buffering\n\t currentPlayPos = _this2.audio.currentTime;\n\t if (!bufferingDetected && currentPlayPos < lastPlayPos + 0.01 && !_this2.audio.paused) {\n\t _this2.element.classList.add('dplayer-loading');\n\t bufferingDetected = true;\n\t }\n\t if (bufferingDetected && currentPlayPos > lastPlayPos + 0.01 && !_this2.audio.paused) {\n\t _this2.element.classList.remove('dplayer-loading');\n\t bufferingDetected = false;\n\t }\n\t lastPlayPos = currentPlayPos;\n\t\n\t _this2.updateBar('played', _this2.audio.currentTime / _this2.audio.duration, 'width');\n\t _this2.ptime.innerHTML = _this2.secondToTime(_this2.audio.currentTime);\n\t _this2.trigger('playing');\n\t }, 100);\n\t if (_this2.option.danmaku) {\n\t _this2.danmakuTime = setInterval(function () {\n\t var item = _this2.dan[_this2.danIndex];\n\t while (item && _this2.audio.currentTime >= parseFloat(item.time)) {\n\t _this2.danmakuIn(item.text, item.color, item.type);\n\t item = _this2.dan[++_this2.danIndex];\n\t }\n\t }, 0);\n\t }\n\t };\n\t this.clearTime = function () {\n\t clearInterval(_this2.playedTime);\n\t if (_this2.option.danmaku) {\n\t clearInterval(_this2.danmakuTime);\n\t }\n\t };\n\t\n\t this.bar.addEventListener('click', function (event) {\n\t var e = event || window.event;\n\t barWidth = _this2.bar.clientWidth;\n\t var percentage = (e.clientX - getElementViewLeft(_this2.bar)) / barWidth;\n\t percentage = percentage > 0 ? percentage : 0;\n\t percentage = percentage < 1 ? percentage : 1;\n\t _this2.updateBar('played', percentage, 'width');\n\t _this2.audio.currentTime = parseFloat(_this2.playedBar.style.width) / 100 * _this2.audio.duration;\n\t });\n\t\n\t var thumbMove = function thumbMove(event) {\n\t var e = event || window.event;\n\t var percentage = (e.clientX - getElementViewLeft(_this2.bar)) / barWidth;\n\t percentage = percentage > 0 ? percentage : 0;\n\t percentage = percentage < 1 ? percentage : 1;\n\t _this2.updateBar('played', percentage, 'width');\n\t _this2.element.getElementsByClassName('dplayer-ptime')[0].innerHTML = _this2.secondToTime(percentage * _this2.audio.duration);\n\t };\n\t\n\t var thumbUp = function thumbUp() {\n\t document.removeEventListener('mouseup', thumbUp);\n\t document.removeEventListener('mousemove', thumbMove);\n\t _this2.audio.currentTime = parseFloat(_this2.playedBar.style.width) / 100 * _this2.audio.duration;\n\t _this2.setTime();\n\t };\n\t\n\t this.bar.addEventListener('mousedown', function () {\n\t barWidth = _this2.bar.clientWidth;\n\t _this2.clearTime();\n\t document.addEventListener('mousemove', thumbMove);\n\t document.addEventListener('mouseup', thumbUp);\n\t });\n\t\n\t /**\n\t * control volume\n\t */\n\t this.volumeBar = this.element.getElementsByClassName('dplayer-volume-bar-inner')[0];\n\t var volumeEle = this.element.getElementsByClassName('dplayer-volume')[0];\n\t var volumeBarWrapWrap = this.element.getElementsByClassName('dplayer-volume-bar-wrap')[0];\n\t var volumeBarWrap = this.element.getElementsByClassName('dplayer-volume-bar')[0];\n\t var volumeicon = this.element.getElementsByClassName('dplayer-volume-icon')[0];\n\t var vWidth = 35;\n\t var switchVolumeIcon = function switchVolumeIcon() {\n\t if (_this2.audio.volume >= 0.8) {\n\t volumeicon.innerHTML = _this2.getSVG('volume-up');\n\t } else if (_this2.audio.volume > 0) {\n\t volumeicon.innerHTML = _this2.getSVG('volume-down');\n\t } else {\n\t volumeicon.innerHTML = _this2.getSVG('volume-off');\n\t }\n\t };\n\t var volumeMove = function volumeMove(event) {\n\t var e = event || window.event;\n\t var percentage = (e.clientX - getElementViewLeft(volumeBarWrap) - 5.5) / vWidth;\n\t percentage = percentage > 0 ? percentage : 0;\n\t percentage = percentage < 1 ? percentage : 1;\n\t _this2.updateBar('volume', percentage, 'width');\n\t _this2.audio.volume = percentage;\n\t if (_this2.audio.muted) {\n\t _this2.audio.muted = false;\n\t }\n\t switchVolumeIcon();\n\t };\n\t var volumeUp = function volumeUp() {\n\t document.removeEventListener('mouseup', volumeUp);\n\t document.removeEventListener('mousemove', volumeMove);\n\t volumeEle.classList.remove('dplayer-volume-active');\n\t };\n\t\n\t volumeBarWrapWrap.addEventListener('click', function (event) {\n\t var e = event || window.event;\n\t var percentage = (e.clientX - getElementViewLeft(volumeBarWrap) - 5.5) / vWidth;\n\t percentage = percentage > 0 ? percentage : 0;\n\t percentage = percentage < 1 ? percentage : 1;\n\t _this2.updateBar('volume', percentage, 'width');\n\t _this2.audio.volume = percentage;\n\t if (_this2.audio.muted) {\n\t _this2.audio.muted = false;\n\t }\n\t switchVolumeIcon();\n\t });\n\t volumeBarWrapWrap.addEventListener('mousedown', function () {\n\t document.addEventListener('mousemove', volumeMove);\n\t document.addEventListener('mouseup', volumeUp);\n\t volumeEle.classList.add('dplayer-volume-active');\n\t });\n\t volumeicon.addEventListener('click', function () {\n\t if (_this2.audio.muted) {\n\t _this2.audio.muted = false;\n\t switchVolumeIcon();\n\t _this2.updateBar('volume', _this2.audio.volume, 'width');\n\t } else {\n\t _this2.audio.muted = true;\n\t volumeicon.innerHTML = _this2.getSVG('volume-off');\n\t _this2.updateBar('volume', 0, 'width');\n\t }\n\t });\n\t\n\t /**\n\t * auto hide controller\n\t */\n\t if (!this.isMobile) {\n\t (function () {\n\t var hideTime = 0;\n\t var hideController = function hideController() {\n\t _this2.element.classList.remove('dplayer-hide-controller');\n\t clearTimeout(hideTime);\n\t hideTime = setTimeout(function () {\n\t if (_this2.audio.played.length) {\n\t _this2.element.classList.add('dplayer-hide-controller');\n\t closeSetting();\n\t closeComment();\n\t }\n\t }, 2000);\n\t };\n\t _this2.element.addEventListener('mousemove', hideController);\n\t _this2.element.addEventListener('click', hideController);\n\t })();\n\t }\n\t\n\t /***\n\t * setting\n\t */\n\t this.danOpacity = 0.7;\n\t var settingHTML = {\n\t 'original': '\\n
\\n ' + this.getTran('Speed') + '\\n
' + this.getSVG('right') + ('
\\n
\\n
\\n ' + this.getTran('Loop') + '\\n
\\n \\n \\n
\\n
\\n
\\n ' + this.getTran('Danmaku') + '\\n
\\n \\n \\n
\\n
\\n
\\n ' + this.getTran('Opacity for danmaku') + '\\n
\\n
\\n
\\n \\n
\\n
\\n
\\n
'),\n\t 'speed': '\\n
\\n 0.5\\n
\\n
\\n 0.75\\n
\\n
\\n ' + this.getTran('Normal') + '\\n
\\n
\\n 1.25\\n
\\n
\\n 1.5\\n
\\n
\\n 2\\n
'\n\t };\n\t\n\t // toggle setting box\n\t var settingIcon = this.element.getElementsByClassName('dplayer-setting-icon')[0];\n\t var settingBox = this.element.getElementsByClassName('dplayer-setting-box')[0];\n\t var mask = this.element.getElementsByClassName('dplayer-mask')[0];\n\t settingBox.innerHTML = settingHTML.original;\n\t\n\t var closeSetting = function closeSetting() {\n\t if (settingBox.classList.contains('dplayer-setting-box-open')) {\n\t settingBox.classList.remove('dplayer-setting-box-open');\n\t mask.classList.remove('dplayer-mask-show');\n\t setTimeout(function () {\n\t settingBox.classList.remove('dplayer-setting-box-narrow');\n\t settingBox.innerHTML = settingHTML.original;\n\t settingEvent();\n\t }, 300);\n\t }\n\t };\n\t var openSetting = function openSetting() {\n\t settingBox.classList.add('dplayer-setting-box-open');\n\t mask.classList.add('dplayer-mask-show');\n\t };\n\t\n\t mask.addEventListener('click', function () {\n\t closeSetting();\n\t });\n\t settingIcon.addEventListener('click', function () {\n\t openSetting();\n\t });\n\t\n\t var danContainer = this.element.getElementsByClassName('dplayer-danmaku')[0];\n\t this.showdan = true;\n\t var settingEvent = function settingEvent() {\n\t // loop control\n\t var loopEle = _this2.element.getElementsByClassName('dplayer-setting-loop')[0];\n\t var loopToggle = loopEle.getElementsByClassName('dplayer-toggle-setting-input')[0];\n\t\n\t loopToggle.checked = _this2.loop;\n\t\n\t loopEle.addEventListener('click', function () {\n\t console.log('loop1');\n\t loopToggle.checked = !loopToggle.checked;\n\t if (loopToggle.checked) {\n\t _this2.loop = true;\n\t _this2.audio.loop = _this2.loop;\n\t } else {\n\t _this2.loop = false;\n\t _this2.audio.loop = _this2.loop;\n\t }\n\t closeSetting();\n\t });\n\t\n\t // show danmaku control\n\t var showDanEle = _this2.element.getElementsByClassName('dplayer-setting-showdan')[0];\n\t var showDanToggle = showDanEle.getElementsByClassName('dplayer-showdan-setting-input')[0];\n\t\n\t showDanToggle.checked = _this2.showdan;\n\t\n\t showDanEle.addEventListener('click', function () {\n\t showDanToggle.checked = !showDanToggle.checked;\n\t if (showDanToggle.checked) {\n\t _this2.showdan = true;\n\t if (_this2.option.danmaku) {\n\t for (var i = 0; i < _this2.dan.length; i++) {\n\t if (_this2.dan[i].time >= _this2.audio.currentTime) {\n\t _this2.danIndex = i;\n\t break;\n\t }\n\t _this2.danIndex = _this2.dan.length;\n\t }\n\t _this2.danmakuTime = setInterval(function () {\n\t var item = _this2.dan[_this2.danIndex];\n\t while (item && _this2.audio.currentTime >= parseFloat(item.time)) {\n\t _this2.danmakuIn(item.text, item.color, item.type);\n\t item = _this2.dan[++_this2.danIndex];\n\t }\n\t }, 0);\n\t }\n\t } else {\n\t _this2.showdan = false;\n\t if (_this2.option.danmaku) {\n\t clearInterval(_this2.danmakuTime);\n\t danContainer.innerHTML = '';\n\t }\n\t }\n\t closeSetting();\n\t });\n\t\n\t // speed control\n\t var speedEle = _this2.element.getElementsByClassName('dplayer-setting-speed')[0];\n\t speedEle.addEventListener('click', function () {\n\t settingBox.classList.add('dplayer-setting-box-narrow');\n\t settingBox.innerHTML = settingHTML.speed;\n\t\n\t var speedItem = settingBox.getElementsByClassName('dplayer-setting-speed-item');\n\t\n\t var _loop = function _loop(i) {\n\t speedItem[i].addEventListener('click', function () {\n\t _this2.audio.playbackRate = speedItem[i].dataset.speed;\n\t closeSetting();\n\t });\n\t };\n\t\n\t for (var i = 0; i < speedItem.length; i++) {\n\t _loop(i);\n\t }\n\t });\n\t\n\t if (_this2.option.danmaku) {\n\t (function () {\n\t // danmaku opacity\n\t _this2.danmakuBar = _this2.element.getElementsByClassName('dplayer-danmaku-bar-inner')[0];\n\t var danmakuBarWrapWrap = _this2.element.getElementsByClassName('dplayer-danmaku-bar-wrap')[0];\n\t var danmakuBarWrap = _this2.element.getElementsByClassName('dplayer-danmaku-bar')[0];\n\t var danmakuSettingBox = _this2.element.getElementsByClassName('dplayer-setting-danmaku')[0];\n\t var dWidth = 130;\n\t _this2.updateBar('danmaku', _this2.danOpacity, 'width');\n\t\n\t var danmakuMove = function danmakuMove(event) {\n\t var e = event || window.event;\n\t var percentage = (e.clientX - getElementViewLeft(danmakuBarWrap)) / dWidth;\n\t percentage = percentage > 0 ? percentage : 0;\n\t percentage = percentage < 1 ? percentage : 1;\n\t _this2.updateBar('danmaku', percentage, 'width');\n\t var items = _this2.element.getElementsByClassName('dplayer-danmaku-item');\n\t for (var i = 0; i < items.length; i++) {\n\t items[i].style.opacity = percentage;\n\t }\n\t _this2.danOpacity = percentage;\n\t };\n\t var danmakuUp = function danmakuUp() {\n\t document.removeEventListener('mouseup', danmakuUp);\n\t document.removeEventListener('mousemove', danmakuMove);\n\t danmakuSettingBox.classList.remove('dplayer-setting-danmaku-active');\n\t };\n\t\n\t danmakuBarWrapWrap.addEventListener('click', function (event) {\n\t var e = event || window.event;\n\t var percentage = (e.clientX - getElementViewLeft(danmakuBarWrap)) / dWidth;\n\t percentage = percentage > 0 ? percentage : 0;\n\t percentage = percentage < 1 ? percentage : 1;\n\t _this2.updateBar('danmaku', percentage, 'width');\n\t var items = _this2.element.getElementsByClassName('dplayer-danmaku-item');\n\t for (var i = 0; i < items.length; i++) {\n\t items[i].style.opacity = percentage;\n\t }\n\t _this2.danOpacity = percentage;\n\t });\n\t danmakuBarWrapWrap.addEventListener('mousedown', function () {\n\t document.addEventListener('mousemove', danmakuMove);\n\t document.addEventListener('mouseup', danmakuUp);\n\t danmakuSettingBox.classList.add('dplayer-setting-danmaku-active');\n\t });\n\t })();\n\t }\n\t };\n\t settingEvent();\n\t\n\t /**\n\t * audio events\n\t */\n\t // show audio time: the metadata has loaded or changed\n\t this.audio.addEventListener('durationchange', function () {\n\t if (_this2.audio.duration !== 1) {\n\t // compatibility: Android browsers will output 1 at first\n\t _this2.element.getElementsByClassName('dplayer-dtime')[0].innerHTML = _this2.secondToTime(_this2.audio.duration);\n\t }\n\t });\n\t\n\t // show audio loaded bar: to inform interested parties of progress downloading the media\n\t this.audio.addEventListener('progress', function () {\n\t var percentage = _this2.audio.buffered.length ? _this2.audio.buffered.end(_this2.audio.buffered.length - 1) / _this2.audio.duration : 0;\n\t _this2.updateBar('loaded', percentage, 'width');\n\t });\n\t\n\t // audio download error: an error occurs\n\t this.audio.addEventListener('error', function () {\n\t _this2.element.getElementsByClassName('dplayer-ptime')[0].innerHTML = 'Error happens ╥﹏╥';\n\t _this2.trigger('pause');\n\t });\n\t\n\t // audio can play: enough data is available that the media can be played\n\t this.audio.addEventListener('canplay', function () {\n\t _this2.trigger('canplay');\n\t });\n\t\n\t // music end\n\t this.ended = false;\n\t this.audio.addEventListener('ended', function () {\n\t _this2.updateBar('played', 1, 'width');\n\t if (!_this2.loop) {\n\t _this2.ended = true;\n\t _this2.pause();\n\t _this2.trigger('ended');\n\t }\n\t });\n\t\n\t // control volume\n\t this.audio.volume = parseInt(this.element.getElementsByClassName('dplayer-volume-bar-inner')[0].style.width) / 100;\n\t\n\t // loop\n\t this.audio.loop = this.loop;\n\t\n\t // set duration time\n\t if (this.audio.duration !== 1) {\n\t // compatibility: Android browsers will output 1 at first\n\t this.element.getElementsByClassName('dplayer-dtime')[0].innerHTML = this.audio.duration ? this.secondToTime(this.audio.duration) : '00:00';\n\t }\n\t\n\t /**\n\t * danmaku display\n\t */\n\t var itemHeight = 30;\n\t var danWidth = void 0;\n\t var danHeight = void 0;\n\t var itemY = void 0;\n\t var danTunnel = {\n\t right: {},\n\t top: {},\n\t bottom: {}\n\t };\n\t\n\t var danItemRight = function danItemRight(ele) {\n\t return danContainer.getBoundingClientRect().right - ele.getBoundingClientRect().right;\n\t };\n\t\n\t var danSpeed = function danSpeed(ele) {\n\t return (danWidth + ele.offsetWidth) / 5;\n\t };\n\t\n\t var getTunnel = function getTunnel(ele, type) {\n\t var tmp = danWidth / danSpeed(ele);\n\t\n\t var _loop2 = function _loop2(i) {\n\t var item = danTunnel[type][i + ''];\n\t if (item && item.length) {\n\t for (var j = 0; j < item.length; j++) {\n\t var danRight = danItemRight(item[j]) - 10;\n\t if (danRight <= danWidth - tmp * danSpeed(item[j]) || danRight <= 0) {\n\t break;\n\t }\n\t if (j === item.length - 1) {\n\t danTunnel[type][i + ''].push(ele);\n\t ele.addEventListener('animationend', function () {\n\t danTunnel[type][i + ''].splice(0, 1);\n\t });\n\t return {\n\t v: i % itemY\n\t };\n\t }\n\t }\n\t } else {\n\t danTunnel[type][i + ''] = [ele];\n\t ele.addEventListener('animationend', function () {\n\t danTunnel[type][i + ''].splice(0, 1);\n\t });\n\t return {\n\t v: i % itemY\n\t };\n\t }\n\t };\n\t\n\t for (var i = 0;; i++) {\n\t var _ret4 = _loop2(i);\n\t\n\t if ((typeof _ret4 === 'undefined' ? 'undefined' : _typeof(_ret4)) === \"object\") return _ret4.v;\n\t }\n\t };\n\t\n\t this.danmakuIn = function (text, color, type) {\n\t danWidth = danContainer.offsetWidth;\n\t danHeight = danContainer.offsetHeight;\n\t itemY = parseInt(danHeight / itemHeight);\n\t var item = document.createElement('div');\n\t item.classList.add('dplayer-danmaku-item');\n\t item.classList.add('dplayer-danmaku-' + type);\n\t item.innerHTML = text;\n\t item.style.opacity = _this2.danOpacity;\n\t item.style.color = color;\n\t\n\t // insert\n\t danContainer.appendChild(item);\n\t\n\t // adjust\n\t switch (type) {\n\t case 'right':\n\t item.style.top = itemHeight * getTunnel(item, type) + 'px';\n\t item.style.width = item.offsetWidth + 1 + 'px';\n\t item.style.transform = 'translateX(-' + danWidth + 'px)';\n\t item.addEventListener('animationend', function () {\n\t danContainer.removeChild(item);\n\t });\n\t break;\n\t case 'top':\n\t item.style.top = itemHeight * getTunnel(item, type) + 'px';\n\t item.addEventListener('animationend', function () {\n\t danContainer.removeChild(item);\n\t });\n\t break;\n\t case 'bottom':\n\t item.style.bottom = itemHeight * getTunnel(item, type) + 'px';\n\t item.addEventListener('animationend', function () {\n\t danContainer.removeChild(item);\n\t });\n\t break;\n\t default:\n\t console.error('Can\\'t handled danmaku type: ' + type);\n\t }\n\t\n\t // move\n\t item.classList.add('dplayer-danmaku-move');\n\t };\n\t\n\t // danmaku\n\t if (this.option.danmaku) {\n\t (function () {\n\t _this2.danIndex = 0;\n\t var xhr = new XMLHttpRequest();\n\t xhr.onreadystatechange = function () {\n\t if (xhr.readyState === 4) {\n\t if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {\n\t var response = JSON.parse(xhr.responseText);\n\t if (response.code !== 1) {\n\t alert(response.msg);\n\t } else {\n\t _this2.dan = response.danmaku.sort(function (a, b) {\n\t return a.time - b.time;\n\t });\n\t _this2.element.getElementsByClassName('dplayer-danloading')[0].style.display = 'none';\n\t\n\t // autoplay\n\t if (_this2.option.autoplay && !_this2.isMobile) {\n\t _this2.play();\n\t } else if (_this2.isMobile) {\n\t _this2.pause();\n\t }\n\t }\n\t } else {\n\t console.log('Request was unsuccessful: ' + xhr.status);\n\t }\n\t }\n\t };\n\t var apiurl = void 0;\n\t if (_this2.option.danmaku.maximum) {\n\t apiurl = _this2.option.danmaku.api + '?id=' + _this2.option.danmaku.id + '&max=' + _this2.option.danmaku.maximum;\n\t } else {\n\t apiurl = _this2.option.danmaku.api + '?id=' + _this2.option.danmaku.id;\n\t }\n\t xhr.open('get', apiurl, true);\n\t xhr.send(null);\n\t })();\n\t } else {\n\t // autoplay\n\t if (this.option.autoplay && !this.isMobile) {\n\t this.play();\n\t } else if (this.isMobile) {\n\t this.pause();\n\t }\n\t }\n\t\n\t /**\n\t * comment\n\t */\n\t var commentInput = this.element.getElementsByClassName('dplayer-comment-input')[0];\n\t var commentIcon = this.element.getElementsByClassName('dplayer-comment-icon')[0];\n\t var commentBox = this.element.getElementsByClassName('dplayer-comment-box')[0];\n\t var commentSettingIcon = this.element.getElementsByClassName('dplayer-comment-setting-icon')[0];\n\t var commentSettingBox = this.element.getElementsByClassName('dplayer-comment-setting-box')[0];\n\t var commentSendIcon = this.element.getElementsByClassName('dplayer-send-icon')[0];\n\t\n\t var htmlEncode = function htmlEncode(str) {\n\t return str.replace(/&/g, \"&\").replace(//g, \">\").replace(/\"/g, \""\").replace(/'/g, \"'\").replace(/\\//g, \"/\");\n\t };\n\t\n\t var sendComment = function sendComment() {\n\t commentInput.blur();\n\t\n\t // text can't be empty\n\t if (!commentInput.value.replace(/^\\s+|\\s+$/g, '')) {\n\t alert(_this2.getTran('Please input danmaku!'));\n\t return;\n\t }\n\t\n\t var danmakuData = {\n\t token: _this2.option.danmaku.token,\n\t player: _this2.option.danmaku.id,\n\t author: 'DIYgod',\n\t time: _this2.audio.currentTime,\n\t text: commentInput.value,\n\t color: _this2.element.querySelector('input[name=\"dplayer-danmaku-color\"]:checked').value,\n\t type: _this2.element.querySelector('input[name=\"dplayer-danmaku-type\"]:checked').value\n\t };\n\t var xhr = new XMLHttpRequest();\n\t xhr.onreadystatechange = function () {\n\t if (xhr.readyState === 4) {\n\t if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {\n\t var response = JSON.parse(xhr.responseText);\n\t if (response.code !== 1) {\n\t alert(response.msg);\n\t } else {\n\t console.log('Post danmaku: ', JSON.parse(xhr.responseText));\n\t }\n\t } else {\n\t console.log('Request was unsuccessful: ' + xhr.status);\n\t }\n\t }\n\t };\n\t xhr.open('post', _this2.option.danmaku.api, true);\n\t xhr.send(JSON.stringify(danmakuData));\n\t\n\t commentInput.value = '';\n\t closeComment();\n\t _this2.dan.splice(_this2.danIndex, 0, danmakuData);\n\t _this2.danIndex++;\n\t _this2.danmakuIn(htmlEncode(danmakuData.text), danmakuData.color, danmakuData.type);\n\t };\n\t\n\t var closeCommentSetting = function closeCommentSetting() {\n\t if (commentSettingBox.classList.contains('dplayer-comment-setting-open')) {\n\t commentSettingBox.classList.remove('dplayer-comment-setting-open');\n\t }\n\t };\n\t var toggleCommentSetting = function toggleCommentSetting() {\n\t if (commentSettingBox.classList.contains('dplayer-comment-setting-open')) {\n\t commentSettingBox.classList.remove('dplayer-comment-setting-open');\n\t } else {\n\t commentSettingBox.classList.add('dplayer-comment-setting-open');\n\t }\n\t };\n\t\n\t var disableHide = 0;\n\t var closeComment = function closeComment() {\n\t if (commentBox.classList.contains('dplayer-comment-box-open')) {\n\t commentBox.classList.remove('dplayer-comment-box-open');\n\t mask.classList.remove('dplayer-mask-show');\n\t clearInterval(disableHide);\n\t _this2.element.classList.remove('dplayer-show-controller');\n\t closeCommentSetting();\n\t document.addEventListener('keydown', handleKeyDown);\n\t }\n\t };\n\t var openComment = function openComment() {\n\t commentBox.classList.add('dplayer-comment-box-open');\n\t mask.classList.add('dplayer-mask-show');\n\t disableHide = setInterval(function () {\n\t clearTimeout(hideTime);\n\t }, 1000);\n\t _this2.element.classList.add('dplayer-show-controller');\n\t document.removeEventListener('keydown', handleKeyDown);\n\t };\n\t\n\t mask.addEventListener('click', function () {\n\t closeComment();\n\t });\n\t commentIcon.addEventListener('click', function () {\n\t openComment();\n\t setTimeout(function () {\n\t commentInput.focus();\n\t }, 300);\n\t });\n\t commentSettingIcon.addEventListener('click', function () {\n\t toggleCommentSetting();\n\t });\n\t\n\t // comment setting box\n\t this.element.getElementsByClassName('dplayer-comment-setting-color')[0].addEventListener('click', function () {\n\t var sele = _this2.element.querySelector('input[name=\"dplayer-danmaku-color\"]:checked+span');\n\t if (sele) {\n\t commentSettingIcon.getElementsByClassName('dplayer-fill')[0].style.fill = _this2.element.querySelector('input[name=\"dplayer-danmaku-color\"]:checked').value;\n\t }\n\t });\n\t\n\t commentInput.addEventListener('click', function () {\n\t closeCommentSetting();\n\t });\n\t commentInput.addEventListener('keydown', function (e) {\n\t var event = e || window.event;\n\t if (event.keyCode === 13) {\n\t sendComment();\n\t }\n\t });\n\t\n\t commentSendIcon.addEventListener('click', sendComment);\n\t\n\t /**\n\t * full screen\n\t */\n\t var resetAnimation = function resetAnimation() {\n\t danWidth = danContainer.offsetWidth;\n\t var items = _this2.element.getElementsByClassName('dplayer-danmaku-item');\n\t for (var i = 0; i < items.length; i++) {\n\t items[i].style.transform = 'translateX(-' + danWidth + 'px)';\n\t }\n\t };\n\t\n\t this.element.addEventListener('fullscreenchange', function () {\n\t resetAnimation();\n\t });\n\t this.element.addEventListener('mozfullscreenchange', function () {\n\t resetAnimation();\n\t });\n\t this.element.addEventListener('webkitfullscreenchange', function () {\n\t resetAnimation();\n\t });\n\t this.element.getElementsByClassName('dplayer-full-icon')[0].addEventListener('click', function () {\n\t if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement) {\n\t if (_this2.element.requestFullscreen) {\n\t _this2.element.requestFullscreen();\n\t } else if (_this2.element.mozRequestFullScreen) {\n\t _this2.element.mozRequestFullScreen();\n\t } else if (_this2.element.webkitRequestFullscreen) {\n\t _this2.element.webkitRequestFullscreen();\n\t }\n\t } else {\n\t if (document.cancelFullScreen) {\n\t document.cancelFullScreen();\n\t } else if (document.mozCancelFullScreen) {\n\t document.mozCancelFullScreen();\n\t } else if (document.webkitCancelFullScreen) {\n\t document.webkitCancelFullScreen();\n\t }\n\t }\n\t resetAnimation();\n\t });\n\t\n\t /**\n\t * hot key\n\t */\n\t var handleKeyDown = function handleKeyDown(e) {\n\t var event = e || window.event;\n\t var percentage = void 0;\n\t switch (event.keyCode) {\n\t case 32:\n\t event.preventDefault();\n\t _this2.toggle();\n\t break;\n\t case 37:\n\t event.preventDefault();\n\t _this2.audio.currentTime = _this2.audio.currentTime - 5;\n\t break;\n\t case 39:\n\t event.preventDefault();\n\t _this2.audio.currentTime = _this2.audio.currentTime + 5;\n\t break;\n\t case 38:\n\t event.preventDefault();\n\t percentage = _this2.audio.volume + 0.1;\n\t percentage = percentage > 0 ? percentage : 0;\n\t percentage = percentage < 1 ? percentage : 1;\n\t _this2.updateBar('volume', percentage, 'width');\n\t _this2.audio.volume = percentage;\n\t if (_this2.audio.muted) {\n\t _this2.audio.muted = false;\n\t }\n\t switchVolumeIcon();\n\t break;\n\t case 40:\n\t event.preventDefault();\n\t percentage = _this2.audio.volume - 0.1;\n\t percentage = percentage > 0 ? percentage : 0;\n\t percentage = percentage < 1 ? percentage : 1;\n\t _this2.updateBar('volume', percentage, 'width');\n\t _this2.audio.volume = percentage;\n\t if (_this2.audio.muted) {\n\t _this2.audio.muted = false;\n\t }\n\t switchVolumeIcon();\n\t break;\n\t }\n\t };\n\t document.addEventListener('keydown', handleKeyDown);\n\t\n\t /**\n\t * right key\n\t */\n\t this.menu = this.element.getElementsByClassName('dplayer-menu')[0];\n\t this.element.addEventListener('contextmenu', function (e) {\n\t var event = e || window.event;\n\t event.preventDefault();\n\t _this2.menu.style.left = event.clientX - _this2.element.getBoundingClientRect().left + 'px';\n\t _this2.menu.style.top = event.clientY - _this2.element.getBoundingClientRect().top + 'px';\n\t _this2.menu.classList.add('dplayer-menu-show');\n\t\n\t mask.classList.add('dplayer-mask-show');\n\t mask.addEventListener('click', function () {\n\t mask.classList.remove('dplayer-mask-show');\n\t _this2.menu.classList.remove('dplayer-menu-show');\n\t });\n\t });\n\t\n\t /**\n\t * Screenshot\n\t */\n\t var camareIcon = this.element.getElementsByClassName('dplayer-camera-icon')[0];\n\t camareIcon.addEventListener('click', function () {\n\t var canvas = document.createElement(\"canvas\");\n\t canvas.width = _this2.audio.videoWidth;\n\t canvas.height = _this2.audio.videoHeight;\n\t canvas.getContext('2d').drawImage(_this2.audio, 0, 0, canvas.width, canvas.height);\n\t\n\t camareIcon.href = canvas.toDataURL();\n\t camareIcon.download = \"Screenshot_from_DPlayer.png\";\n\t });\n\t }\n\t\n\t /**\n\t * Play music\n\t */\n\t\n\t }, {\n\t key: 'play',\n\t value: function play(time) {\n\t if (Object.prototype.toString.call(time) === '[object Number]') {\n\t this.audio.currentTime = time;\n\t }\n\t if (this.audio.paused) {\n\t this.shouldpause = false;\n\t\n\t this.bezel.innerHTML = this.getSVG('play');\n\t this.bezel.classList.add('dplayer-bezel-transition');\n\t\n\t this.playButton.innerHTML = this.getSVG('pause');\n\t\n\t this.audio.play();\n\t if (this.playedTime) {\n\t this.clearTime();\n\t }\n\t this.setTime();\n\t this.element.classList.add('dplayer-playing');\n\t this.trigger('play');\n\t }\n\t }\n\t\n\t /**\n\t * Pause music\n\t */\n\t\n\t }, {\n\t key: 'pause',\n\t value: function pause() {\n\t if (!this.shouldpause || this.ended) {\n\t this.shouldpause = true;\n\t this.element.classList.remove('dplayer-loading');\n\t\n\t this.bezel.innerHTML = this.getSVG('pause');\n\t this.bezel.classList.add('dplayer-bezel-transition');\n\t\n\t this.ended = false;\n\t this.playButton.innerHTML = this.getSVG('play');\n\t this.audio.pause();\n\t this.clearTime();\n\t this.element.classList.remove('dplayer-playing');\n\t this.trigger('pause');\n\t }\n\t }\n\t\n\t /**\n\t * attach event\n\t */\n\t\n\t }, {\n\t key: 'on',\n\t value: function on(name, func) {\n\t if (typeof func === 'function') {\n\t this.event[name].push(func);\n\t }\n\t }\n\t }]);\n\t\n\t return DPlayer;\n\t}();\n\t\n\texports.DPlayer = DPlayer;\n\n/***/ },\n/* 1 */\n/***/ function(module, exports, __webpack_require__) {\n\n\t// style-loader: Adds some css to the DOM by adding a