From b31bc4c1dca1835f8ea9a76e9abf87a37c4d5702 Mon Sep 17 00:00:00 2001 From: DIYgod Date: Wed, 12 Oct 2016 01:03:36 +0800 Subject: [PATCH] optimize mobile display --- README.md | 2 +- dist/DPlayer.min.js | 4 +-- dist/DPlayer.min.js.map | 2 +- package.json | 2 +- src/DPlayer.js | 76 ++++++++++++++++++++++++++++------------- 5 files changed, 58 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index 21209f443..d13ee03cc 100644 --- a/README.md +++ b/README.md @@ -59,7 +59,7 @@ var option = { 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 + maximum: 1000, // Optional, maximum quantity of danmaku addition: ['https://dplayer.daoapp.io/bilibili?aid=4157142'] // Optional, additional danmaku, see: `Bilibili 弹幕支持` } } diff --git a/dist/DPlayer.min.js b/dist/DPlayer.min.js index 58ce98451..346bd7dce 100644 --- a/dist/DPlayer.min.js +++ b/dist/DPlayer.min.js @@ -1,4 +1,4 @@ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("DPlayer",[],t):"object"==typeof exports?exports.DPlayer=t():e.DPlayer=t()}(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")}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.option=t;var i=/mobile/i.test(window.navigator.userAgent);i&&(this.option.autoplay=!1);var s={element:document.getElementsByClassName("dplayer")[0],autoplay:!1,theme:"#b7daff",loop:!1,lang:navigator.language.indexOf("zh")!==-1?"zh":"en",screenshot:!1,hotkey:!0,preload:"auto"};for(var d in s)s.hasOwnProperty(d)&&!this.option.hasOwnProperty(d)&&(this.option[d]=s[d]);var p={"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:"弹幕"},m=function(e){return"en"===a.option.lang?e:"zh"===a.option.lang?p[e]:void 0};this.updateBar=function(e,t,a){t=t>0?t:0,t=t<1?t:1,h[e+"Bar"].style[a]=100*t+"%"};var c=["play","pause","canplay","playing","ended","error"];this.event={};for(var y=0;y\n \n \n ');this.element.innerHTML='\n
\n
\n \n
\n
\n
\n
\n \n '+(this.option.danmaku?''+m("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
'+m("Set danmaku color")+'
\n \n \n \n \n \n \n
\n
\n
'+m("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
'+m("About author")+'
\n
'+m("DPlayer feedback")+'
\n
'+m("About DPlayer")+"
\n
\n "),this.video=this.element.getElementsByClassName("dplayer-video")[0],this.option.video.url.match(/(m3u8)$/i)&&Hls.isSupported()&&!function(){a.element.getElementsByClassName("dplayer-time")[0].style.display="none";var e=new Hls;e.attachMedia(a.video),e.on(Hls.Events.MEDIA_ATTACHED,function(){e.loadSource(a.option.video.url),e.on(Hls.Events.MANIFEST_PARSED,function(e,t){console.log("manifest loaded, found "+t.levels.length+" quality level")})})}(),this.bezel=this.element.getElementsByClassName("dplayer-bezel-icon")[0],this.bezel.addEventListener("animationend",function(){a.bezel.classList.remove("dplayer-bezel-transition")}),this.playButton=this.element.getElementsByClassName("dplayer-play-icon")[0],this.shouldpause=!0,this.playButton.addEventListener("click",function(){a.toggle()});var u=this.element.getElementsByClassName("dplayer-video-wrap")[0],g=this.element.getElementsByClassName("dplayer-controller-mask")[0];if(i){var f=function(){a.element.classList.contains("dplayer-hide-controller")?a.element.classList.remove("dplayer-hide-controller"):a.element.classList.add("dplayer-hide-controller")};u.addEventListener("click",f),g.addEventListener("click",f)}else u.addEventListener("click",function(){a.toggle()}),g.addEventListener("click",function(){a.toggle()});var v=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)},b=function(e){var t=e.offsetLeft,n=e.offsetParent,r=void 0;if(document.fullscreenElement||document.mozFullScreenElement||document.webkitFullscreenElement)for(;null!==n&&n!==a.element;)t+=n.offsetLeft,n=n.offsetParent;else for(;null!==n;)t+=n.offsetLeft,n=n.offsetParent;return r=document.body.scrollLeft+document.documentElement.scrollLeft,t-r},h={};h.playedBar=this.element.getElementsByClassName("dplayer-played")[0],h.loadedBar=this.element.getElementsByClassName("dplayer-loaded")[0];var x=this.element.getElementsByClassName("dplayer-bar-wrap")[0],k=void 0;this.option.danmaku&&this.video.addEventListener("seeking",function(){for(var e=0;e=a.video.currentTime)return void(a.danIndex=e);a.danIndex=a.dan.length}});var w=0,Y=0,E=!1,L=void 0;this.setTime=function(){a.playedTime=setInterval(function(){Y=a.video.currentTime,!E&&Yw+.01&&!a.video.paused&&(a.element.classList.remove("dplayer-loading"),E=!1),w=Y,a.updateBar("played",a.video.currentTime/a.video.duration,"width"),a.element.getElementsByClassName("dplayer-ptime")[0].innerHTML=v(a.video.currentTime),a.trigger("playing")},100),a.option.danmaku&&(L=setInterval(function(){for(var e=a.dan[a.danIndex];e&&a.video.currentTime>=parseFloat(e.time);)te(e.text,e.color,e.type),e=a.dan[++a.danIndex]},0))},this.clearTime=function(){clearInterval(a.playedTime),a.option.danmaku&&clearInterval(L)},x.addEventListener("click",function(e){var t=e||window.event;k=x.clientWidth;var n=(t.clientX-b(x))/k;n=n>0?n:0,n=n<1?n:1,a.updateBar("played",n,"width"),a.video.currentTime=parseFloat(h.playedBar.style.width)/100*a.video.duration});var z=function(e){var t=e||window.event,n=(t.clientX-b(x))/k;n=n>0?n:0,n=n<1?n:1,a.updateBar("played",n,"width"),a.element.getElementsByClassName("dplayer-ptime")[0].innerHTML=v(n*a.video.duration)},B=function be(){document.removeEventListener("mouseup",be),document.removeEventListener("mousemove",z),a.video.currentTime=parseFloat(h.playedBar.style.width)/100*a.video.duration,a.setTime()};x.addEventListener("mousedown",function(){k=x.clientWidth,a.clearTime(),document.addEventListener("mousemove",z),document.addEventListener("mouseup",B)}),h.volumeBar=this.element.getElementsByClassName("dplayer-volume-bar-inner")[0];var C=this.element.getElementsByClassName("dplayer-volume")[0],T=this.element.getElementsByClassName("dplayer-volume-bar-wrap")[0],N=this.element.getElementsByClassName("dplayer-volume-bar")[0],M=this.element.getElementsByClassName("dplayer-volume-icon")[0],q=35;this.switchVolumeIcon=function(){var e=a.element.getElementsByClassName("dplayer-volume-icon")[0];a.video.volume>=.8?e.innerHTML=a.getSVG("volume-up"):a.video.volume>0?e.innerHTML=a.getSVG("volume-down"):e.innerHTML=a.getSVG("volume-off")};var S=function(e){var t=e||window.event,n=(t.clientX-b(N)-5.5)/q;a.volume(n)},A=function he(){document.removeEventListener("mouseup",he),document.removeEventListener("mousemove",S),C.classList.remove("dplayer-volume-active")};T.addEventListener("click",function(e){var t=e||window.event,n=(t.clientX-b(N)-5.5)/q;a.volume(n)}),T.addEventListener("mousedown",function(){document.addEventListener("mousemove",S),document.addEventListener("mouseup",A),C.classList.add("dplayer-volume-active")}),M.addEventListener("click",function(){a.video.muted?(a.video.muted=!1,a.switchVolumeIcon(),a.updateBar("volume",a.video.volume,"width")):(a.video.muted=!0,M.innerHTML=a.getSVG("volume-off"),a.updateBar("volume",0,"width"))});var I=0;if(!i){var D=function(){a.element.classList.remove("dplayer-hide-controller"),clearTimeout(I),I=setTimeout(function(){a.video.played.length&&(a.element.classList.add("dplayer-hide-controller"),O(),ye())},2e3)};this.element.addEventListener("mousemove",D),this.element.addEventListener("click",D)}var R=localStorage.getItem("DPlayer-opacity")||.7,H={original:'\n
\n '+m("Speed")+'\n
'+this.getSVG("right")+('
\n
\n
\n '+m("Loop")+'\n
\n \n \n
\n
\n
\n '+m("Danmaku")+'\n
\n \n \n
\n
\n
\n '+m("Opacity for danmaku")+'\n
\n
\n
\n \n
\n
\n
\n
'),speed:'\n
\n 0.5\n
\n
\n 0.75\n
\n
\n '+m("Normal")+'\n
\n
\n 1.25\n
\n
\n 1.5\n
\n
\n 2\n
'},F=this.element.getElementsByClassName("dplayer-setting-icon")[0],X=this.element.getElementsByClassName("dplayer-setting-box")[0],P=this.element.getElementsByClassName("dplayer-mask")[0];X.innerHTML=H.original;var O=function(){X.classList.contains("dplayer-setting-box-open")&&(X.classList.remove("dplayer-setting-box-open"),P.classList.remove("dplayer-mask-show"),setTimeout(function(){X.classList.remove("dplayer-setting-box-narrow"),X.innerHTML=H.original,J()},300))},V=function(){X.classList.add("dplayer-setting-box-open"),P.classList.add("dplayer-mask-show")};P.addEventListener("click",function(){O()}),F.addEventListener("click",function(){V()});var U=this.option.loop,G=this.element.getElementsByClassName("dplayer-danmaku")[0],j=!0,J=function(){var e=a.element.getElementsByClassName("dplayer-setting-loop")[0],t=e.getElementsByClassName("dplayer-toggle-setting-input")[0];t.checked=U,e.addEventListener("click",function(){t.checked=!t.checked,t.checked?(U=!0,a.video.loop=U):(U=!1,a.video.loop=U),O()});var n=a.element.getElementsByClassName("dplayer-setting-showdan")[0],r=n.getElementsByClassName("dplayer-showdan-setting-input")[0];r.checked=j,n.addEventListener("click",function(){if(r.checked=!r.checked,r.checked){if(j=!0,a.option.danmaku){for(var e=0;e=a.video.currentTime){a.danIndex=e;break}a.danIndex=a.dan.length}L=setInterval(function(){for(var e=a.dan[a.danIndex];e&&a.video.currentTime>=parseFloat(e.time);)te(e.text,e.color,e.type),e=a.dan[++a.danIndex]},0)}}else j=!1,a.option.danmaku&&(clearInterval(L),G.innerHTML='
',a.danTunnel={right:{},top:{},bottom:{}},a.itemDemo=a.element.getElementsByClassName("dplayer-danmaku-item")[0]);O()});var l=a.element.getElementsByClassName("dplayer-setting-speed")[0];l.addEventListener("click",function(){X.classList.add("dplayer-setting-box-narrow"), -X.innerHTML=H.speed;for(var e=X.getElementsByClassName("dplayer-setting-speed-item"),t=function(t){e[t].addEventListener("click",function(){a.video.playbackRate=e[t].dataset.speed,O()})},n=0;n0?l:0,l=l<1?l:1,a.updateBar("danmaku",l,"width");for(var o=a.element.getElementsByClassName("dplayer-danmaku-item"),i=0;i0?l:0,l=l<1?l:1,a.updateBar("danmaku",l,"width");for(var o=a.element.getElementsByClassName("dplayer-danmaku-item"),i=0;i=200&&e.status<300||304===e.status?!function(){var t=JSON.parse(e.responseText);1!==t.code?alert(t.msg):a.option.danmaku.addition?(e.onreadystatechange=function(){if(4===e.readyState)if(e.status>=200&&e.status<300||304===e.status){var n=JSON.parse(e.responseText);1!==n.code?alert(n.msg):(a.dan=t.danmaku.concat(n.danmaku).sort(function(e,t){return e.time-t.time}),a.element.getElementsByClassName("dplayer-danloading")[0].style.display="none",a.option.autoplay&&!i?a.play():i&&a.pause())}else console.log("Request was unsuccessful: "+e.status)},e.open("get",a.option.danmaku.addition[0],!0),e.send(null)):(a.dan=t.danmaku.sort(function(e,t){return e.time-t.time}),a.element.getElementsByClassName("dplayer-danloading")[0].style.display="none",a.option.autoplay&&!i?a.play():i&&a.pause())}():console.log("Request was unsuccessful: "+e.status))};var t=void 0;t=a.option.danmaku.maximum?a.option.danmaku.api+"?id="+a.option.danmaku.id+"&max="+a.option.danmaku.maximum:a.option.danmaku.api+"?id="+a.option.danmaku.id,e.open("get",t,!0),e.send(null)}():this.option.autoplay&&!i?this.play():i&&this.pause();var ae=this.element.getElementsByClassName("dplayer-comment-input")[0],ne=this.element.getElementsByClassName("dplayer-comment-icon")[0],re=this.element.getElementsByClassName("dplayer-comment-box")[0],le=this.element.getElementsByClassName("dplayer-comment-setting-icon")[0],oe=this.element.getElementsByClassName("dplayer-comment-setting-box")[0],ie=this.element.getElementsByClassName("dplayer-send-icon")[0],se=function(e){return e.replace(/&/g,"&").replace(//g,">").replace(/"/g,""").replace(/'/g,"'").replace(/\//g,"/")},de=function(){if(ae.blur(),!ae.value.replace(/^\s+|\s+$/g,""))return void alert(m("Please input danmaku!"));var e={token:a.option.danmaku.token,player:a.option.danmaku.id,author:"DIYgod",time:a.video.currentTime,text:ae.value,color:a.element.querySelector(".dplayer-comment-setting-color input:checked").value,type:a.element.querySelector(".dplayer-comment-setting-type input:checked").value},t=new XMLHttpRequest;t.onreadystatechange=function(){if(4===t.readyState)if(t.status>=200&&t.status<300||304===t.status){var e=JSON.parse(t.responseText);1!==e.code?alert(e.msg):console.log("Post danmaku: ",JSON.parse(t.responseText))}else console.log("Request was unsuccessful: "+t.status)},t.open("post",a.option.danmaku.api,!0),t.send(JSON.stringify(e)),ae.value="",ye(),a.dan.splice(a.danIndex,0,e),a.danIndex++;var n=te(se(e.text),e.color,e.type);n.style.border="2px solid "+a.option.theme},pe=function(){oe.classList.contains("dplayer-comment-setting-open")&&oe.classList.remove("dplayer-comment-setting-open")},me=function(){oe.classList.contains("dplayer-comment-setting-open")?oe.classList.remove("dplayer-comment-setting-open"):oe.classList.add("dplayer-comment-setting-open")},ce=0,ye=function(){re.classList.contains("dplayer-comment-box-open")&&(re.classList.remove("dplayer-comment-box-open"),P.classList.remove("dplayer-mask-show"),clearInterval(ce),a.element.classList.remove("dplayer-show-controller"),pe())},ue=function(){re.classList.add("dplayer-comment-box-open"),P.classList.add("dplayer-mask-show"),ce=setInterval(function(){clearTimeout(I)},1e3),a.element.classList.add("dplayer-show-controller")};P.addEventListener("click",function(){ye()}),ne.addEventListener("click",function(){ue(),setTimeout(function(){ae.focus()},300)}),le.addEventListener("click",function(){me()}),this.element.getElementsByClassName("dplayer-comment-setting-color")[0].addEventListener("click",function(){var e=a.element.querySelector('input[name="dplayer-danmaku-color-${index}"]:checked+span');e&&(le.getElementsByClassName("dplayer-fill")[0].style.fill=a.element.querySelector('input[name="dplayer-danmaku-color-${index}"]:checked').value)}),ae.addEventListener("click",function(){pe()}),ae.addEventListener("keydown",function(e){var t=e||window.event;13===t.keyCode&&de()}),ie.addEventListener("click",de);var ge=function(){Q=G.offsetWidth;for(var e=a.element.getElementsByClassName("dplayer-danmaku-item"),t=0;t0?e:0,e=e<1?e:1,this.updateBar("volume",e,"width"),this.video.volume=e,this.video.muted&&(this.video.muted=!1),this.switchVolumeIcon()}},{key:"toggle",value:function(){this.video.paused?this.play():this.pause()}},{key:"on",value:function(e,t){"function"==typeof t&&this.event[e].push(t)}},{key:"switchVideo",value:function(e,t){var a=this;this.video.src=e.url,this.video.poster=e.pic?e.pic:"",this.video.currentTime=0,this.pause(),t&&!function(){a.dan=[],a.danIndex=0,a.element.getElementsByClassName("dplayer-danloading")[0].style.display="block",a.updateBar("played",0,"width"),a.updateBar("loaded",0,"width"),a.element.getElementsByClassName("dplayer-ptime")[0].innerHTML="00:00",a.element.getElementsByClassName("dplayer-danmaku")[0].innerHTML='
',a.danTunnel={right:{},top:{},bottom:{}},a.itemDemo=a.element.getElementsByClassName("dplayer-danmaku-item")[0];var e=/mobile/i.test(window.navigator.userAgent);a.option.danmaku=t;var n=new XMLHttpRequest;n.onreadystatechange=function(){if(4===n.readyState)if(n.status>=200&&n.status<300||304===n.status){var t=JSON.parse(n.responseText);1!==t.code?alert(t.msg):(a.danIndex=0,a.dan=t.danmaku.sort(function(e,t){return e.time-t.time}),a.element.getElementsByClassName("dplayer-danloading")[0].style.display="none",a.option.autoplay&&!e?a.play():e&&a.pause())}else console.log("Request was unsuccessful: "+n.status)};var r=void 0;r=a.option.danmaku.maximum?a.option.danmaku.api+"?id="+a.option.danmaku.id+"&max="+a.option.danmaku.maximum:a.option.danmaku.api+"?id="+a.option.danmaku.id,n.open("get",r,!0),n.send(null)}()}}]),e}();e.exports=i},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-item--demo{position:absolute;visibility:hidden}.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;background:#fff;margin:0;height:auto}.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){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("DPlayer",[],t):"object"==typeof exports?exports.DPlayer=t():e.DPlayer=t()}(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")}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.option=t;var i=/mobile/i.test(window.navigator.userAgent);i&&(this.option.autoplay=!1);var s={element:document.getElementsByClassName("dplayer")[0],autoplay:!1,theme:"#b7daff",loop:!1,lang:navigator.language.indexOf("zh")!==-1?"zh":"en",screenshot:!1,hotkey:!0,preload:"auto"};for(var d in s)s.hasOwnProperty(d)&&!this.option.hasOwnProperty(d)&&(this.option[d]=s[d]);var p={"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:"弹幕"},m=function(e){return"en"===a.option.lang?e:"zh"===a.option.lang?p[e]:void 0};this.updateBar=function(e,t,a){t=t>0?t:0,t=t<1?t:1,k[e+"Bar"].style[a]=100*t+"%"};var c=["play","pause","canplay","playing","ended","error"];this.event={};for(var y=0;y\n
\n \n
\n
\n
\n
\n \n '+(this.option.danmaku?''+m("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
'+m("Set danmaku color")+'
\n \n \n \n \n \n \n
\n
\n
'+m("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
'+m("About author")+'
\n
'+m("DPlayer feedback")+'
\n
'+m("About DPlayer")+"
\n
\n ");var u=this.element.offsetWidth<=500;if(u){var g=document.createElement("style");g.innerHTML=".dplayer .dplayer-danmaku{font-size:18px}",document.head.appendChild(g)}this.video=this.element.getElementsByClassName("dplayer-video")[0],this.option.video.url.match(/(m3u8)$/i)&&Hls.isSupported()&&!function(){a.element.getElementsByClassName("dplayer-time")[0].style.display="none";var e=new Hls;e.attachMedia(a.video),e.on(Hls.Events.MEDIA_ATTACHED,function(){e.loadSource(a.option.video.url),e.on(Hls.Events.MANIFEST_PARSED,function(e,t){console.log("manifest loaded, found "+t.levels.length+" quality level")})})}(),this.bezel=this.element.getElementsByClassName("dplayer-bezel-icon")[0],this.bezel.addEventListener("animationend",function(){a.bezel.classList.remove("dplayer-bezel-transition")}),this.playButton=this.element.getElementsByClassName("dplayer-play-icon")[0],this.shouldpause=!0,this.playButton.addEventListener("click",function(){a.toggle()});var f=this.element.getElementsByClassName("dplayer-video-wrap")[0],v=this.element.getElementsByClassName("dplayer-controller-mask")[0];if(i){var b=function(){a.element.classList.contains("dplayer-hide-controller")?a.element.classList.remove("dplayer-hide-controller"):a.element.classList.add("dplayer-hide-controller")};f.addEventListener("click",b),v.addEventListener("click",b)}else f.addEventListener("click",function(){a.toggle()}),v.addEventListener("click",function(){a.toggle()});var h=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)},x=function(e){var t=e.offsetLeft,n=e.offsetParent,r=void 0;if(document.fullscreenElement||document.mozFullScreenElement||document.webkitFullscreenElement)for(;null!==n&&n!==a.element;)t+=n.offsetLeft,n=n.offsetParent;else for(;null!==n;)t+=n.offsetLeft,n=n.offsetParent;return r=document.body.scrollLeft+document.documentElement.scrollLeft,t-r},k={};k.playedBar=this.element.getElementsByClassName("dplayer-played")[0],k.loadedBar=this.element.getElementsByClassName("dplayer-loaded")[0];var w=this.element.getElementsByClassName("dplayer-bar-wrap")[0],Y=void 0;this.option.danmaku&&this.video.addEventListener("seeking",function(){for(var e=0;e=a.video.currentTime)return void(a.danIndex=e);a.danIndex=a.dan.length}});var E=0,L=0,z=!1,B=void 0;this.setTime=function(){a.playedTime=setInterval(function(){L=a.video.currentTime,!z&&LE+.01&&!a.video.paused&&(a.element.classList.remove("dplayer-loading"),z=!1),E=L,a.updateBar("played",a.video.currentTime/a.video.duration,"width"),a.element.getElementsByClassName("dplayer-ptime")[0].innerHTML=h(a.video.currentTime),a.trigger("playing")},100),a.option.danmaku&&(B=setInterval(function(){for(var e=a.dan[a.danIndex];e&&a.video.currentTime>=parseFloat(e.time);)ne(e.text,e.color,e.type),e=a.dan[++a.danIndex]},0))},this.clearTime=function(){clearInterval(a.playedTime),a.option.danmaku&&clearInterval(B)},w.addEventListener("click",function(e){var t=e||window.event;Y=w.clientWidth;var n=(t.clientX-x(w))/Y;n=n>0?n:0,n=n<1?n:1,a.updateBar("played",n,"width"),a.video.currentTime=parseFloat(k.playedBar.style.width)/100*a.video.duration});var C=function(e){var t=e||window.event,n=(t.clientX-x(w))/Y;n=n>0?n:0,n=n<1?n:1,a.updateBar("played",n,"width"),a.element.getElementsByClassName("dplayer-ptime")[0].innerHTML=h(n*a.video.duration)},T=function xe(){document.removeEventListener("mouseup",xe),document.removeEventListener("mousemove",C),a.video.currentTime=parseFloat(k.playedBar.style.width)/100*a.video.duration,a.setTime()};w.addEventListener("mousedown",function(){Y=w.clientWidth,a.clearTime(),document.addEventListener("mousemove",C),document.addEventListener("mouseup",T)}),k.volumeBar=this.element.getElementsByClassName("dplayer-volume-bar-inner")[0];var N=this.element.getElementsByClassName("dplayer-volume")[0],S=this.element.getElementsByClassName("dplayer-volume-bar-wrap")[0],q=this.element.getElementsByClassName("dplayer-volume-bar")[0],M=this.element.getElementsByClassName("dplayer-volume-icon")[0],A=35;this.switchVolumeIcon=function(){var e=a.element.getElementsByClassName("dplayer-volume-icon")[0];a.video.volume>=.8?e.innerHTML=a.getSVG("volume-up"):a.video.volume>0?e.innerHTML=a.getSVG("volume-down"):e.innerHTML=a.getSVG("volume-off")};var I=function(e){var t=e||window.event,n=(t.clientX-x(q)-5.5)/A;a.volume(n)},D=function ke(){document.removeEventListener("mouseup",ke),document.removeEventListener("mousemove",I),N.classList.remove("dplayer-volume-active")};S.addEventListener("click",function(e){var t=e||window.event,n=(t.clientX-x(q)-5.5)/A;a.volume(n)}),S.addEventListener("mousedown",function(){document.addEventListener("mousemove",I),document.addEventListener("mouseup",D),N.classList.add("dplayer-volume-active")}),M.addEventListener("click",function(){a.video.muted?(a.video.muted=!1,a.switchVolumeIcon(),a.updateBar("volume",a.video.volume,"width")):(a.video.muted=!0,M.innerHTML=a.getSVG("volume-off"),a.updateBar("volume",0,"width"))});var R=0;if(!i){var H=function(){a.element.classList.remove("dplayer-hide-controller"),clearTimeout(R),R=setTimeout(function(){a.video.played.length&&(a.element.classList.add("dplayer-hide-controller"),U(),ge())},2e3)};this.element.addEventListener("mousemove",H),this.element.addEventListener("click",H)}var F=localStorage.getItem("DPlayer-opacity")||.7,X={original:'\n
\n '+m("Speed")+'\n
'+this.getSVG("right")+('
\n
\n
\n '+m("Loop")+'\n
\n \n \n
\n
\n
\n '+m("Danmaku")+'\n
\n \n \n
\n
\n
\n '+m("Opacity for danmaku")+'\n
\n
\n
\n \n
\n
\n
\n
'),speed:'\n
\n 0.5\n
\n
\n 0.75\n
\n
\n '+m("Normal")+'\n
\n
\n 1.25\n
\n
\n 1.5\n
\n
\n 2\n
'},O=this.element.getElementsByClassName("dplayer-setting-icon")[0],P=this.element.getElementsByClassName("dplayer-setting-box")[0],V=this.element.getElementsByClassName("dplayer-mask")[0];P.innerHTML=X.original;var U=function(){P.classList.contains("dplayer-setting-box-open")&&(P.classList.remove("dplayer-setting-box-open"),V.classList.remove("dplayer-mask-show"),setTimeout(function(){P.classList.remove("dplayer-setting-box-narrow"),P.innerHTML=X.original,Q()},300))},G=function(){P.classList.add("dplayer-setting-box-open"),V.classList.add("dplayer-mask-show")};V.addEventListener("click",function(){U()}),O.addEventListener("click",function(){G()});var j=this.option.loop,J=this.element.getElementsByClassName("dplayer-danmaku")[0],W=!0,Q=function(){var e=a.element.getElementsByClassName("dplayer-setting-loop")[0],t=e.getElementsByClassName("dplayer-toggle-setting-input")[0];t.checked=j,e.addEventListener("click",function(){t.checked=!t.checked,t.checked?(j=!0,a.video.loop=j):(j=!1,a.video.loop=j),U()});var n=a.element.getElementsByClassName("dplayer-setting-showdan")[0],r=n.getElementsByClassName("dplayer-showdan-setting-input")[0];r.checked=W,n.addEventListener("click",function(){if(r.checked=!r.checked,r.checked){if(W=!0,a.option.danmaku){for(var e=0;e=a.video.currentTime){a.danIndex=e;break}a.danIndex=a.dan.length}B=setInterval(function(){for(var e=a.dan[a.danIndex];e&&a.video.currentTime>=parseFloat(e.time);)ne(e.text,e.color,e.type),e=a.dan[++a.danIndex]},0)}}else W=!1,a.option.danmaku&&(clearInterval(B),J.innerHTML='
',a.danTunnel={right:{},top:{},bottom:{}},a.itemDemo=a.element.getElementsByClassName("dplayer-danmaku-item")[0]);U()});var l=a.element.getElementsByClassName("dplayer-setting-speed")[0];l.addEventListener("click",function(){P.classList.add("dplayer-setting-box-narrow"),P.innerHTML=X.speed;for(var e=P.getElementsByClassName("dplayer-setting-speed-item"),t=function(t){ +e[t].addEventListener("click",function(){a.video.playbackRate=e[t].dataset.speed,U()})},n=0;n0?l:0,l=l<1?l:1,a.updateBar("danmaku",l,"width");for(var o=a.element.getElementsByClassName("dplayer-danmaku-item"),i=0;i0?l:0,l=l<1?l:1,a.updateBar("danmaku",l,"width");for(var o=a.element.getElementsByClassName("dplayer-danmaku-item"),i=0;i=200&&e.status<300||304===e.status?!function(){var t=JSON.parse(e.responseText);1!==t.code?alert(t.msg):a.option.danmaku.addition?(e.onreadystatechange=function(){if(4===e.readyState)if(e.status>=200&&e.status<300||304===e.status){var n=JSON.parse(e.responseText);1!==n.code?alert(n.msg):(a.dan=t.danmaku.concat(n.danmaku).sort(function(e,t){return e.time-t.time}),a.element.getElementsByClassName("dplayer-danloading")[0].style.display="none",a.option.autoplay&&!i?a.play():i&&a.pause())}else console.log("Request was unsuccessful: "+e.status)},e.open("get",a.option.danmaku.addition[0],!0),e.send(null)):(a.dan=t.danmaku.sort(function(e,t){return e.time-t.time}),a.element.getElementsByClassName("dplayer-danloading")[0].style.display="none",a.option.autoplay&&!i?a.play():i&&a.pause())}():console.log("Request was unsuccessful: "+e.status))};var t=void 0;t=a.option.danmaku.maximum?a.option.danmaku.api+"?id="+a.option.danmaku.id+"&max="+a.option.danmaku.maximum:a.option.danmaku.api+"?id="+a.option.danmaku.id,e.open("get",t,!0),e.send(null)}():this.option.autoplay&&!i?this.play():i&&this.pause();var re=this.element.getElementsByClassName("dplayer-comment-input")[0],le=this.element.getElementsByClassName("dplayer-comment-icon")[0],oe=this.element.getElementsByClassName("dplayer-comment-box")[0],ie=this.element.getElementsByClassName("dplayer-comment-setting-icon")[0],se=this.element.getElementsByClassName("dplayer-comment-setting-box")[0],de=this.element.getElementsByClassName("dplayer-send-icon")[0],pe=function(e){return e.replace(/&/g,"&").replace(//g,">").replace(/"/g,""").replace(/'/g,"'").replace(/\//g,"/")},me=function(){if(re.blur(),!re.value.replace(/^\s+|\s+$/g,""))return void alert(m("Please input danmaku!"));var e={token:a.option.danmaku.token,player:a.option.danmaku.id,author:"DIYgod",time:a.video.currentTime,text:re.value,color:a.element.querySelector(".dplayer-comment-setting-color input:checked").value,type:a.element.querySelector(".dplayer-comment-setting-type input:checked").value},t=new XMLHttpRequest;t.onreadystatechange=function(){if(4===t.readyState)if(t.status>=200&&t.status<300||304===t.status){var e=JSON.parse(t.responseText);1!==e.code?alert(e.msg):console.log("Post danmaku: ",JSON.parse(t.responseText))}else console.log("Request was unsuccessful: "+t.status)},t.open("post",a.option.danmaku.api,!0),t.send(JSON.stringify(e)),re.value="",ge(),a.dan.splice(a.danIndex,0,e),a.danIndex++;var n=ne(pe(e.text),e.color,e.type);n.style.border="2px solid "+a.option.theme},ce=function(){se.classList.contains("dplayer-comment-setting-open")&&se.classList.remove("dplayer-comment-setting-open")},ye=function(){se.classList.contains("dplayer-comment-setting-open")?se.classList.remove("dplayer-comment-setting-open"):se.classList.add("dplayer-comment-setting-open")},ue=0,ge=function(){oe.classList.contains("dplayer-comment-box-open")&&(oe.classList.remove("dplayer-comment-box-open"),V.classList.remove("dplayer-mask-show"),clearInterval(ue),a.element.classList.remove("dplayer-show-controller"),ce())},fe=function(){oe.classList.add("dplayer-comment-box-open"),V.classList.add("dplayer-mask-show"),ue=setInterval(function(){clearTimeout(R)},1e3),a.element.classList.add("dplayer-show-controller")};V.addEventListener("click",function(){ge()}),le.addEventListener("click",function(){fe(),setTimeout(function(){re.focus()},300)}),ie.addEventListener("click",function(){ye()}),this.element.getElementsByClassName("dplayer-comment-setting-color")[0].addEventListener("click",function(){var e=a.element.querySelector('input[name="dplayer-danmaku-color-${index}"]:checked+span');e&&(ie.getElementsByClassName("dplayer-fill")[0].style.fill=a.element.querySelector('input[name="dplayer-danmaku-color-${index}"]:checked').value)}),re.addEventListener("click",function(){ce()}),re.addEventListener("keydown",function(e){var t=e||window.event;13===t.keyCode&&me()}),de.addEventListener("click",me);var ve=function(){Z=J.offsetWidth;for(var e=a.element.getElementsByClassName("dplayer-danmaku-item"),t=0;t0?e:0,e=e<1?e:1,this.updateBar("volume",e,"width"),this.video.volume=e,this.video.muted&&(this.video.muted=!1),this.switchVolumeIcon()}},{key:"toggle",value:function(){this.video.paused?this.play():this.pause()}},{key:"on",value:function(e,t){"function"==typeof t&&this.event[e].push(t)}},{key:"switchVideo",value:function(e,t){var a=this;this.video.src=e.url,this.video.poster=e.pic?e.pic:"",this.video.currentTime=0,this.pause(),t&&!function(){a.dan=[],a.danIndex=0,a.element.getElementsByClassName("dplayer-danloading")[0].style.display="block",a.updateBar("played",0,"width"),a.updateBar("loaded",0,"width"),a.element.getElementsByClassName("dplayer-ptime")[0].innerHTML="00:00",a.element.getElementsByClassName("dplayer-danmaku")[0].innerHTML='
',a.danTunnel={right:{},top:{},bottom:{}},a.itemDemo=a.element.getElementsByClassName("dplayer-danmaku-item")[0];var e=/mobile/i.test(window.navigator.userAgent);a.option.danmaku=t;var n=new XMLHttpRequest;n.onreadystatechange=function(){4===n.readyState&&(n.status>=200&&n.status<300||304===n.status?!function(){var t=JSON.parse(n.responseText);1!==t.code?alert(t.msg):a.option.danmaku.addition?(n.onreadystatechange=function(){if(4===n.readyState)if(n.status>=200&&n.status<300||304===n.status){var r=JSON.parse(n.responseText);1!==r.code?alert(r.msg):(a.danIndex=0,a.dan=t.danmaku.concat(r.danmaku).sort(function(e,t){return e.time-t.time}),a.element.getElementsByClassName("dplayer-danloading")[0].style.display="none",a.option.autoplay&&!e?a.play():e&&a.pause())}else console.log("Request was unsuccessful: "+n.status)},n.open("get",a.option.danmaku.addition[0],!0),n.send(null)):(a.danIndex=0,a.dan=t.danmaku.sort(function(e,t){return e.time-t.time}),a.element.getElementsByClassName("dplayer-danloading")[0].style.display="none",a.option.autoplay&&!e?a.play():e&&a.pause())}():console.log("Request was unsuccessful: "+n.status))};var r=void 0;r=a.option.danmaku.maximum?a.option.danmaku.api+"?id="+a.option.danmaku.id+"&max="+a.option.danmaku.maximum:a.option.danmaku.api+"?id="+a.option.danmaku.id,n.open("get",r,!0),n.send(null)}()}}]),e}();e.exports=i},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-item--demo{position:absolute;visibility:hidden}.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;background:#fff;margin:0;height:auto}.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&&h.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=b++;a=v||(v=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]}),v=null,b=0,h=[];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.option = option;\n\t\n\t var isMobile = /mobile/i.test(window.navigator.userAgent);\n\t // compatibility: some mobile browsers don't suppose autoplay\n\t if (isMobile) {\n\t this.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 screenshot: false,\n\t hotkey: true,\n\t preload: 'auto'\n\t };\n\t for (var defaultKey in defaultOption) {\n\t if (defaultOption.hasOwnProperty(defaultKey) && !this.option.hasOwnProperty(defaultKey)) {\n\t this.option[defaultKey] = defaultOption[defaultKey];\n\t }\n\t }\n\t\n\t var 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 var getTran = function getTran(text) {\n\t if (_this.option.lang === 'en') {\n\t return text;\n\t } else if (_this.option.lang === 'zh') {\n\t return tranZH[text];\n\t }\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 bar[type + 'Bar'].style[direction] = percentage * 100 + '%';\n\t };\n\t\n\t // define DPlayer events\n\t var eventTypes = ['play', 'pause', 'canplay', 'playing', 'ended', 'error'];\n\t this.event = {};\n\t for (var i = 0; i < eventTypes.length; i++) {\n\t this.event[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 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 if (isMobile) {\n\t this.element.innerHTML = \"\\n
\\n \\n
\";\n\t return;\n\t }\n\t\n\t this.element.innerHTML = \"\\n
\\n
\\n \\n
\\n
\\n
\\n
\\n \\n \" + (this.option.danmaku ? \"\" + 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
\" + getTran('Set danmaku color') + \"
\\n \\n \\n \\n \\n \\n \\n
\\n
\\n
\" + 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
\" + getTran('About author') + \"
\\n
\" + getTran('DPlayer feedback') + \"
\\n
\" + getTran('About DPlayer') + \"
\\n
\\n \");\n\t\n\t // get this video object\n\t this.video = 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 (function () {\n\t _this.element.getElementsByClassName('dplayer-time')[0].style.display = 'none';\n\t var hls = new Hls();\n\t hls.attachMedia(_this.video);\n\t hls.on(Hls.Events.MEDIA_ATTACHED, function () {\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\n\t this.bezel = this.element.getElementsByClassName('dplayer-bezel-icon')[0];\n\t this.bezel.addEventListener('animationend', function () {\n\t _this.bezel.classList.remove('dplayer-bezel-transition');\n\t });\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.playButton.addEventListener('click', function () {\n\t _this.toggle();\n\t });\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 (!isMobile) {\n\t videoWrap.addEventListener('click', function () {\n\t _this.toggle();\n\t });\n\t conMask.addEventListener('click', function () {\n\t _this.toggle();\n\t });\n\t } else {\n\t var toggleController = function toggleController() {\n\t if (_this.element.classList.contains('dplayer-hide-controller')) {\n\t _this.element.classList.remove('dplayer-hide-controller');\n\t } else {\n\t _this.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 * Parse second to 00:00 format\n\t *\n\t * @param {Number} second\n\t * @return {String} 00:00 format\n\t */\n\t var secondToTime = function secondToTime(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 * 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 !== _this.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 !== _this.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 var bar = {};\n\t bar.playedBar = this.element.getElementsByClassName('dplayer-played')[0];\n\t bar.loadedBar = this.element.getElementsByClassName('dplayer-loaded')[0];\n\t var pbar = this.element.getElementsByClassName('dplayer-bar-wrap')[0];\n\t var barWidth = void 0;\n\t\n\t if (this.option.danmaku) {\n\t this.video.addEventListener('seeking', function () {\n\t for (var _i2 = 0; _i2 < _this.dan.length; _i2++) {\n\t if (_this.dan[_i2].time >= _this.video.currentTime) {\n\t _this.danIndex = _i2;\n\t return;\n\t }\n\t _this.danIndex = _this.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 var danmakuTime = void 0;\n\t this.setTime = function () {\n\t _this.playedTime = setInterval(function () {\n\t // whether the video is buffering\n\t currentPlayPos = _this.video.currentTime;\n\t if (!bufferingDetected && currentPlayPos < lastPlayPos + 0.01 && !_this.video.paused) {\n\t _this.element.classList.add('dplayer-loading');\n\t bufferingDetected = true;\n\t }\n\t if (bufferingDetected && currentPlayPos > lastPlayPos + 0.01 && !_this.video.paused) {\n\t _this.element.classList.remove('dplayer-loading');\n\t bufferingDetected = false;\n\t }\n\t lastPlayPos = currentPlayPos;\n\t\n\t _this.updateBar('played', _this.video.currentTime / _this.video.duration, 'width');\n\t _this.element.getElementsByClassName('dplayer-ptime')[0].innerHTML = secondToTime(_this.video.currentTime);\n\t _this.trigger('playing');\n\t }, 100);\n\t if (_this.option.danmaku) {\n\t danmakuTime = setInterval(function () {\n\t var item = _this.dan[_this.danIndex];\n\t while (item && _this.video.currentTime >= parseFloat(item.time)) {\n\t danmakuIn(item.text, item.color, item.type);\n\t item = _this.dan[++_this.danIndex];\n\t }\n\t }, 0);\n\t }\n\t };\n\t this.clearTime = function () {\n\t clearInterval(_this.playedTime);\n\t if (_this.option.danmaku) {\n\t clearInterval(danmakuTime);\n\t }\n\t };\n\t\n\t pbar.addEventListener('click', function (event) {\n\t var e = event || window.event;\n\t barWidth = pbar.clientWidth;\n\t var percentage = (e.clientX - getElementViewLeft(pbar)) / barWidth;\n\t percentage = percentage > 0 ? percentage : 0;\n\t percentage = percentage < 1 ? percentage : 1;\n\t _this.updateBar('played', percentage, 'width');\n\t _this.video.currentTime = parseFloat(bar.playedBar.style.width) / 100 * _this.video.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(pbar)) / barWidth;\n\t percentage = percentage > 0 ? percentage : 0;\n\t percentage = percentage < 1 ? percentage : 1;\n\t _this.updateBar('played', percentage, 'width');\n\t _this.element.getElementsByClassName('dplayer-ptime')[0].innerHTML = secondToTime(percentage * _this.video.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 _this.video.currentTime = parseFloat(bar.playedBar.style.width) / 100 * _this.video.duration;\n\t _this.setTime();\n\t };\n\t\n\t pbar.addEventListener('mousedown', function () {\n\t barWidth = pbar.clientWidth;\n\t _this.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 bar.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\n\t this.switchVolumeIcon = function () {\n\t var volumeicon = _this.element.getElementsByClassName('dplayer-volume-icon')[0];\n\t if (_this.video.volume >= 0.8) {\n\t volumeicon.innerHTML = _this.getSVG('volume-up');\n\t } else if (_this.video.volume > 0) {\n\t volumeicon.innerHTML = _this.getSVG('volume-down');\n\t } else {\n\t volumeicon.innerHTML = _this.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 _this.volume(percentage);\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 _this.volume(percentage);\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 (_this.video.muted) {\n\t _this.video.muted = false;\n\t _this.switchVolumeIcon();\n\t _this.updateBar('volume', _this.video.volume, 'width');\n\t } else {\n\t _this.video.muted = true;\n\t volumeicon.innerHTML = _this.getSVG('volume-off');\n\t _this.updateBar('volume', 0, 'width');\n\t }\n\t });\n\t\n\t /**\n\t * auto hide controller\n\t */\n\t var hideTime = 0;\n\t if (!isMobile) {\n\t var hideController = function hideController() {\n\t _this.element.classList.remove('dplayer-hide-controller');\n\t clearTimeout(hideTime);\n\t hideTime = setTimeout(function () {\n\t if (_this.video.played.length) {\n\t _this.element.classList.add('dplayer-hide-controller');\n\t closeSetting();\n\t closeComment();\n\t }\n\t }, 2000);\n\t };\n\t this.element.addEventListener('mousemove', hideController);\n\t this.element.addEventListener('click', hideController);\n\t }\n\t\n\t /***\n\t * setting\n\t */\n\t var danOpacity = localStorage.getItem('DPlayer-opacity') || 0.7;\n\t var settingHTML = {\n\t 'original': \"\\n
\\n \" + getTran('Speed') + \"\\n
\" + this.getSVG('right') + (\"
\\n
\\n
\\n \" + getTran('Loop') + \"\\n
\\n \\n \\n
\\n
\\n
\\n \" + getTran('Danmaku') + \"\\n
\\n \\n \\n
\\n
\\n
\\n \" + 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 \" + 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 loop = this.option.loop;\n\t var danContainer = this.element.getElementsByClassName('dplayer-danmaku')[0];\n\t var showdan = true;\n\t var settingEvent = function settingEvent() {\n\t // loop control\n\t var loopEle = _this.element.getElementsByClassName('dplayer-setting-loop')[0];\n\t var loopToggle = loopEle.getElementsByClassName('dplayer-toggle-setting-input')[0];\n\t\n\t loopToggle.checked = loop;\n\t\n\t loopEle.addEventListener('click', function () {\n\t loopToggle.checked = !loopToggle.checked;\n\t if (loopToggle.checked) {\n\t loop = true;\n\t _this.video.loop = loop;\n\t } else {\n\t loop = false;\n\t _this.video.loop = loop;\n\t }\n\t closeSetting();\n\t });\n\t\n\t // show danmaku control\n\t var showDanEle = _this.element.getElementsByClassName('dplayer-setting-showdan')[0];\n\t var showDanToggle = showDanEle.getElementsByClassName('dplayer-showdan-setting-input')[0];\n\t\n\t showDanToggle.checked = showdan;\n\t\n\t showDanEle.addEventListener('click', function () {\n\t showDanToggle.checked = !showDanToggle.checked;\n\t if (showDanToggle.checked) {\n\t showdan = true;\n\t if (_this.option.danmaku) {\n\t for (var _i3 = 0; _i3 < _this.dan.length; _i3++) {\n\t if (_this.dan[_i3].time >= _this.video.currentTime) {\n\t _this.danIndex = _i3;\n\t break;\n\t }\n\t _this.danIndex = _this.dan.length;\n\t }\n\t danmakuTime = setInterval(function () {\n\t var item = _this.dan[_this.danIndex];\n\t while (item && _this.video.currentTime >= parseFloat(item.time)) {\n\t danmakuIn(item.text, item.color, item.type);\n\t item = _this.dan[++_this.danIndex];\n\t }\n\t }, 0);\n\t }\n\t } else {\n\t showdan = false;\n\t if (_this.option.danmaku) {\n\t clearInterval(danmakuTime);\n\t danContainer.innerHTML = \"
\";\n\t _this.danTunnel = {\n\t right: {},\n\t top: {},\n\t bottom: {}\n\t };\n\t _this.itemDemo = _this.element.getElementsByClassName('dplayer-danmaku-item')[0];\n\t }\n\t }\n\t closeSetting();\n\t });\n\t\n\t // speed control\n\t var speedEle = _this.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(_i4) {\n\t speedItem[_i4].addEventListener('click', function () {\n\t _this.video.playbackRate = speedItem[_i4].dataset.speed;\n\t closeSetting();\n\t });\n\t };\n\t\n\t for (var _i4 = 0; _i4 < speedItem.length; _i4++) {\n\t _loop(_i4);\n\t }\n\t });\n\t\n\t if (_this.option.danmaku) {\n\t (function () {\n\t // danmaku opacity\n\t bar.danmakuBar = _this.element.getElementsByClassName('dplayer-danmaku-bar-inner')[0];\n\t var danmakuBarWrapWrap = _this.element.getElementsByClassName('dplayer-danmaku-bar-wrap')[0];\n\t var danmakuBarWrap = _this.element.getElementsByClassName('dplayer-danmaku-bar')[0];\n\t var danmakuSettingBox = _this.element.getElementsByClassName('dplayer-setting-danmaku')[0];\n\t var dWidth = 130;\n\t _this.updateBar('danmaku', 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 _this.updateBar('danmaku', percentage, 'width');\n\t var items = _this.element.getElementsByClassName('dplayer-danmaku-item');\n\t for (var _i5 = 0; _i5 < items.length; _i5++) {\n\t items[_i5].style.opacity = percentage;\n\t }\n\t danOpacity = percentage;\n\t localStorage.setItem('DPlayer-opacity', danOpacity);\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 _this.updateBar('danmaku', percentage, 'width');\n\t var items = _this.element.getElementsByClassName('dplayer-danmaku-item');\n\t for (var _i6 = 0; _i6 < items.length; _i6++) {\n\t items[_i6].style.opacity = percentage;\n\t }\n\t danOpacity = percentage;\n\t localStorage.setItem('DPlayer-opacity', danOpacity);\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 * video events\n\t */\n\t // show video time: the metadata has loaded or changed\n\t this.video.addEventListener('durationchange', function () {\n\t if (_this.video.duration !== 1) {\n\t // compatibility: Android browsers will output 1 at first\n\t _this.element.getElementsByClassName('dplayer-dtime')[0].innerHTML = secondToTime(_this.video.duration);\n\t }\n\t });\n\t\n\t // show video loaded bar: to inform interested parties of progress downloading the media\n\t this.video.addEventListener('progress', function () {\n\t var percentage = _this.video.buffered.length ? _this.video.buffered.end(_this.video.buffered.length - 1) / _this.video.duration : 0;\n\t _this.updateBar('loaded', percentage, 'width');\n\t });\n\t\n\t // video download error: an error occurs\n\t this.video.addEventListener('error', function () {\n\t _this.element.getElementsByClassName('dplayer-ptime')[0].innerHTML = \"Error happens ╥﹏╥\";\n\t _this.trigger('pause');\n\t });\n\t\n\t // video can play: enough data is available that the media can be played\n\t this.video.addEventListener('canplay', function () {\n\t _this.trigger('canplay');\n\t });\n\t\n\t // music end\n\t this.ended = false;\n\t this.video.addEventListener('ended', function () {\n\t _this.updateBar('played', 1, 'width');\n\t if (!loop) {\n\t _this.ended = true;\n\t _this.pause();\n\t _this.trigger('ended');\n\t }\n\t });\n\t\n\t // control volume\n\t this.video.volume = parseInt(this.element.getElementsByClassName('dplayer-volume-bar-inner')[0].style.width) / 100;\n\t\n\t // loop\n\t this.video.loop = loop;\n\t\n\t // set duration time\n\t if (this.video.duration !== 1) {\n\t // compatibility: Android browsers will output 1 at first\n\t this.element.getElementsByClassName('dplayer-dtime')[0].innerHTML = this.video.duration ? secondToTime(this.video.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 this.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(width) {\n\t return (danWidth + width) / 5;\n\t };\n\t\n\t var getTunnel = function getTunnel(ele, type, width) {\n\t var tmp = danWidth / danSpeed(width);\n\t\n\t var _loop2 = function _loop2(_i7) {\n\t var item = _this.danTunnel[type][_i7 + ''];\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].offsetWidth) || danRight <= 0) {\n\t break;\n\t }\n\t if (j === item.length - 1) {\n\t _this.danTunnel[type][_i7 + ''].push(ele);\n\t ele.addEventListener('animationend', function () {\n\t _this.danTunnel[type][_i7 + ''].splice(0, 1);\n\t });\n\t return {\n\t v: _i7 % itemY\n\t };\n\t }\n\t }\n\t } else {\n\t _this.danTunnel[type][_i7 + ''] = [ele];\n\t ele.addEventListener('animationend', function () {\n\t _this.danTunnel[type][_i7 + ''].splice(0, 1);\n\t });\n\t return {\n\t v: _i7 % itemY\n\t };\n\t }\n\t };\n\t\n\t for (var _i7 = 0;; _i7++) {\n\t var _ret4 = _loop2(_i7);\n\t\n\t if ((typeof _ret4 === \"undefined\" ? \"undefined\" : _typeof(_ret4)) === \"object\") return _ret4.v;\n\t }\n\t };\n\t\n\t this.itemDemo = this.element.getElementsByClassName('dplayer-danmaku-item')[0];\n\t\n\t var danmakuIn = function danmakuIn(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 = danOpacity;\n\t item.style.color = color;\n\t item.addEventListener('animationend', function () {\n\t danContainer.removeChild(item);\n\t });\n\t\n\t // measure\n\t _this.itemDemo.innerHTML = text;\n\t var itemWidth = _this.itemDemo.offsetWidth;\n\t\n\t // adjust\n\t switch (type) {\n\t case 'right':\n\t item.style.top = itemHeight * getTunnel(item, type, itemWidth) + 'px';\n\t item.style.width = itemWidth + 1 + 'px';\n\t item.style.transform = \"translateX(-\" + danWidth + \"px)\";\n\t break;\n\t case 'top':\n\t item.style.top = itemHeight * getTunnel(item, type) + 'px';\n\t break;\n\t case 'bottom':\n\t item.style.bottom = itemHeight * getTunnel(item, type) + 'px';\n\t break;\n\t default:\n\t console.error(\"Can't handled danmaku type: \" + type);\n\t }\n\t\n\t // insert\n\t danContainer.appendChild(item);\n\t\n\t // move\n\t item.classList.add(\"dplayer-danmaku-move\");\n\t\n\t return item;\n\t };\n\t\n\t // danmaku\n\t if (this.option.danmaku) {\n\t (function () {\n\t _this.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 (function () {\n\t var response = JSON.parse(xhr.responseText);\n\t if (response.code !== 1) {\n\t alert(response.msg);\n\t } else {\n\t if (_this.option.danmaku.addition) {\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 response2 = JSON.parse(xhr.responseText);\n\t if (response2.code !== 1) {\n\t alert(response2.msg);\n\t } else {\n\t _this.dan = response.danmaku.concat(response2.danmaku).sort(function (a, b) {\n\t return a.time - b.time;\n\t });\n\t _this.element.getElementsByClassName('dplayer-danloading')[0].style.display = 'none';\n\t\n\t // autoplay\n\t if (_this.option.autoplay && !isMobile) {\n\t _this.play();\n\t } else if (isMobile) {\n\t _this.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 xhr.open('get', _this.option.danmaku.addition[0], true);\n\t xhr.send(null);\n\t } else {\n\t _this.dan = response.danmaku.sort(function (a, b) {\n\t return a.time - b.time;\n\t });\n\t _this.element.getElementsByClassName('dplayer-danloading')[0].style.display = 'none';\n\t\n\t // autoplay\n\t if (_this.option.autoplay && !isMobile) {\n\t _this.play();\n\t } else if (isMobile) {\n\t _this.pause();\n\t }\n\t }\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 (_this.option.danmaku.maximum) {\n\t apiurl = _this.option.danmaku.api + \"?id=\" + _this.option.danmaku.id + \"&max=\" + _this.option.danmaku.maximum;\n\t } else {\n\t apiurl = _this.option.danmaku.api + \"?id=\" + _this.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 && !isMobile) {\n\t this.play();\n\t } else if (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(getTran('Please input danmaku!'));\n\t return;\n\t }\n\t\n\t var danmakuData = {\n\t token: _this.option.danmaku.token,\n\t player: _this.option.danmaku.id,\n\t author: 'DIYgod',\n\t time: _this.video.currentTime,\n\t text: commentInput.value,\n\t color: _this.element.querySelector('.dplayer-comment-setting-color input:checked').value,\n\t type: _this.element.querySelector('.dplayer-comment-setting-type input: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', _this.option.danmaku.api, true);\n\t xhr.send(JSON.stringify(danmakuData));\n\t\n\t commentInput.value = '';\n\t closeComment();\n\t _this.dan.splice(_this.danIndex, 0, danmakuData);\n\t _this.danIndex++;\n\t var item = danmakuIn(htmlEncode(danmakuData.text), danmakuData.color, danmakuData.type);\n\t item.style.border = \"2px solid \" + _this.option.theme;\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 _this.element.classList.remove('dplayer-show-controller');\n\t closeCommentSetting();\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 _this.element.classList.add('dplayer-show-controller');\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 = _this.element.querySelector('input[name=\"dplayer-danmaku-color-${index}\"]:checked+span');\n\t if (sele) {\n\t commentSettingIcon.getElementsByClassName('dplayer-fill')[0].style.fill = _this.element.querySelector('input[name=\"dplayer-danmaku-color-${index}\"]: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 = _this.element.getElementsByClassName('dplayer-danmaku-item');\n\t for (var _i8 = 0; _i8 < items.length; _i8++) {\n\t items[_i8].style.transform = \"translateX(-\" + danWidth + \"px)\";\n\t }\n\t };\n\t\n\t this.element.addEventListener('fullscreenchange', function () {\n\t resetAnimation();\n\t console.log(danContainer.offsetHeight);\n\t });\n\t this.element.addEventListener('mozfullscreenchange', function () {\n\t resetAnimation();\n\t console.log(danContainer.offsetHeight);\n\t });\n\t this.element.addEventListener('webkitfullscreenchange', function () {\n\t resetAnimation();\n\t console.log(danContainer.offsetHeight);\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 (_this.element.requestFullscreen) {\n\t _this.element.requestFullscreen();\n\t } else if (_this.element.mozRequestFullScreen) {\n\t _this.element.mozRequestFullScreen();\n\t } else if (_this.element.webkitRequestFullscreen) {\n\t _this.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 tag = document.activeElement.tagName.toUpperCase();\n\t var editable = document.activeElement.getAttribute('contenteditable');\n\t if (tag !== 'INPUT' && tag !== 'TEXTAREA' && editable !== '' && editable !== 'true') {\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 _this.toggle();\n\t break;\n\t case 37:\n\t event.preventDefault();\n\t _this.video.currentTime = _this.video.currentTime - 5;\n\t break;\n\t case 39:\n\t event.preventDefault();\n\t _this.video.currentTime = _this.video.currentTime + 5;\n\t break;\n\t case 38:\n\t event.preventDefault();\n\t percentage = _this.video.volume + 0.1;\n\t _this.volume(percentage);\n\t break;\n\t case 40:\n\t event.preventDefault();\n\t percentage = _this.video.volume - 0.1;\n\t _this.volume(percentage);\n\t break;\n\t }\n\t }\n\t };\n\t if (this.option.hotkey) {\n\t document.addEventListener('keydown', handleKeyDown);\n\t }\n\t\n\t /**\n\t * right key\n\t */\n\t var 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 menu.style.left = event.clientX - _this.element.getBoundingClientRect().left + 'px';\n\t menu.style.top = event.clientY - _this.element.getBoundingClientRect().top + 'px';\n\t 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 menu.classList.remove('dplayer-menu-show');\n\t });\n\t });\n\t\n\t /**\n\t * Screenshot\n\t */\n\t if (this.option.screenshot) {\n\t (function () {\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 = _this.video.videoWidth;\n\t canvas.height = _this.video.videoHeight;\n\t canvas.getContext('2d').drawImage(_this.video, 0, 0, canvas.width, canvas.height);\n\t\n\t camareIcon.href = canvas.toDataURL();\n\t camareIcon.download = \"DPlayer.png\";\n\t });\n\t })();\n\t }\n\t\n\t index++;\n\t }\n\t\n\t /**\n\t * Play music\n\t */\n\t\n\t\n\t _createClass(DPlayer, [{\n\t key: \"play\",\n\t value: function play(time) {\n\t if (Object.prototype.toString.call(time) === '[object Number]') {\n\t this.video.currentTime = time;\n\t }\n\t if (this.video.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.video.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.video.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 * Set volume\n\t */\n\t\n\t }, {\n\t key: \"volume\",\n\t value: function volume(percentage) {\n\t percentage = percentage > 0 ? percentage : 0;\n\t percentage = percentage < 1 ? percentage : 1;\n\t this.updateBar('volume', percentage, 'width');\n\t this.video.volume = percentage;\n\t if (this.video.muted) {\n\t this.video.muted = false;\n\t }\n\t this.switchVolumeIcon();\n\t }\n\t\n\t /**\n\t * Toggle between play and pause\n\t */\n\t\n\t }, {\n\t key: \"toggle\",\n\t value: function toggle() {\n\t if (this.video.paused) {\n\t this.play();\n\t } else {\n\t this.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 * Switch to a new video\n\t *\n\t * @param {Object} video - new video info\n\t * @param {Object} danmaku - new danmaku info\n\t */\n\t\n\t }, {\n\t key: \"switchVideo\",\n\t value: function switchVideo(video, danmaku) {\n\t var _this2 = this;\n\t\n\t this.video.src = video.url;\n\t this.video.poster = video.pic ? video.pic : '';\n\t this.video.currentTime = 0;\n\t this.pause();\n\t if (danmaku) {\n\t (function () {\n\t _this2.dan = [];\n\t _this2.danIndex = 0;\n\t _this2.element.getElementsByClassName('dplayer-danloading')[0].style.display = 'block';\n\t _this2.updateBar('played', 0, 'width');\n\t _this2.updateBar('loaded', 0, 'width');\n\t _this2.element.getElementsByClassName('dplayer-ptime')[0].innerHTML = '00:00';\n\t _this2.element.getElementsByClassName('dplayer-danmaku')[0].innerHTML = \"
\";\n\t _this2.danTunnel = {\n\t right: {},\n\t top: {},\n\t bottom: {}\n\t };\n\t _this2.itemDemo = _this2.element.getElementsByClassName('dplayer-danmaku-item')[0];\n\t\n\t var isMobile = /mobile/i.test(window.navigator.userAgent);\n\t _this2.option.danmaku = danmaku;\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.danIndex = 0;\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 && !isMobile) {\n\t _this2.play();\n\t } else if (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 }\n\t }\n\t }]);\n\t\n\t return DPlayer;\n\t}();\n\t\n\tmodule.exports = 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