From a70b1229aba7e32aaf911a074f2689f1020bbad7 Mon Sep 17 00:00:00 2001 From: DIYgod Date: Mon, 22 Aug 2016 20:07:31 +0800 Subject: [PATCH] New option: hotkey; Fix hotkey bug --- README.md | 1 + demo/index.html | 1 + dist/DPlayer.min.js | 4 ++-- dist/DPlayer.min.js.map | 2 +- package.json | 2 +- src/DPlayer.js | 13 +++++++++---- 6 files changed, 15 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 873f8f3..c4c39c5 100644 --- a/README.md +++ b/README.md @@ -50,6 +50,7 @@ var option = { loop: true, // Optional, loop play music, default: true lang: 'zh', // Optional, language, `zh` for Chinese, `en` for English, default: Navigator language screenshot: true, // Optional, enable screenshot function, default: false, NOTICE: if set it to true, video and video poster must enable Cross-Origin + hotkey: true, // Optional, binding hot key, including left right and Space, default: true video: { // Required, video info url: '若能绽放光芒.mp4', // Required, video url pic: '若能绽放光芒.png' // Optional, music picture diff --git a/demo/index.html b/demo/index.html index 63c59e6..bc903ce 100644 --- a/demo/index.html +++ b/demo/index.html @@ -62,6 +62,7 @@ theme: '#FADFA3', loop: true, screenshot: true, + hotkey: true, video: { url: 'http://devtest.qiniudn.com/若能绽放光芒.mp4', pic: 'http://devtest.qiniudn.com/若能绽放光芒.png' diff --git a/dist/DPlayer.min.js b/dist/DPlayer.min.js index eb21533..91d06c7 100644 --- a/dist/DPlayer.min.js +++ b/dist/DPlayer.min.js @@ -1,4 +1,4 @@ -!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var a=t();for(var r in a)("object"==typeof exports?exports:e)[r]=a[r]}}(this,function(){return function(e){function t(r){if(a[r])return a[r].exports;var n=a[r]={exports:{},id:r,loaded:!1};return e[r].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var a={};return t.m=e,t.c=a,t.p="",t(0)}([function(e,t,a){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var n="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 '};var o=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i);o&&(t.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};for(var i in s)s.hasOwnProperty(i)&&!t.hasOwnProperty(i)&&(t[i]=s[i]);var d={"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:"弹幕"},p=function(e){return"en"===t.lang?e:"zh"===t.lang?d[e]:void 0};this.updateBar=function(e,t,a){t=t>0?t:0,t=t<1?t:1,v[e+"Bar"].style[a]=100*t+"%"};var c=["play","pause","canplay","playing","ended","error"];this.event={};for(var m=0;m\n
\n \n
\n
\n
\n
\n \n '+(t.danmaku?''+p("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 '+(t.screenshot?'\n '+this.getSVG("camera")+" \n ":"")+'\n
\n \n
\n \n
\n
\n
'+p("Set danmaku color")+'
\n \n \n \n \n \n \n
\n
\n
'+p("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
'+p("About author")+'
\n
'+p("DPlayer feedback")+'
\n
'+p("About DPlayer")+"
\n
\n "),this.video=this.element.getElementsByClassName("dplayer-video")[0],t.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(t.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 y=this.element.getElementsByClassName("dplayer-video-wrap")[0],u=this.element.getElementsByClassName("dplayer-controller-mask")[0];if(o){var g=function(){a.element.classList.contains("dplayer-hide-controller")?a.element.classList.remove("dplayer-hide-controller"):a.element.classList.add("dplayer-hide-controller")};y.addEventListener("click",g),u.addEventListener("click",g)}else y.addEventListener("click",function(){a.toggle()}),u.addEventListener("click",function(){a.toggle()});var f=function(e){var t=function(e){return e<10?"0"+e:""+e},a=parseInt(e/60),r=parseInt(e-60*a);return t(a)+":"+t(r)},b=function(e){var t=e.offsetLeft,r=e.offsetParent,n=void 0;if(document.fullscreenElement||document.mozFullScreenElement||document.webkitFullscreenElement)for(;null!==r&&r!==a.element;)t+=r.offsetLeft,r=r.offsetParent;else for(;null!==r;)t+=r.offsetLeft,r=r.offsetParent;return n=document.body.scrollLeft+document.documentElement.scrollLeft,t-n},v={};v.playedBar=this.element.getElementsByClassName("dplayer-played")[0],v.loadedBar=this.element.getElementsByClassName("dplayer-loaded")[0];var h=this.element.getElementsByClassName("dplayer-bar-wrap")[0],x=void 0;t.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 k=0,w=0,Y=!1,L=void 0;this.setTime=function(){a.playedTime=setInterval(function(){w=a.video.currentTime,!Y&&wk+.01&&!a.video.paused&&(a.element.classList.remove("dplayer-loading"),Y=!1),k=w,a.updateBar("played",a.video.currentTime/a.video.duration,"width"),a.element.getElementsByClassName("dplayer-ptime")[0].innerHTML=f(a.video.currentTime),a.trigger("playing")},100),t.danmaku&&(L=setInterval(function(){for(var e=a.dan[a.danIndex];e&&a.video.currentTime>=parseFloat(e.time);)ae(e.text,e.color,e.type),e=a.dan[++a.danIndex]},0))},this.clearTime=function(){clearInterval(a.playedTime),t.danmaku&&clearInterval(L)},h.addEventListener("click",function(e){var t=e||window.event;x=h.clientWidth;var r=(t.clientX-b(h))/x;r=r>0?r:0,r=r<1?r:1,a.updateBar("played",r,"width"),a.video.currentTime=parseFloat(v.playedBar.style.width)/100*a.video.duration});var E=function(e){var t=e||window.event,r=(t.clientX-b(h))/x;r=r>0?r:0,r=r<1?r:1,a.updateBar("played",r,"width"),a.element.getElementsByClassName("dplayer-ptime")[0].innerHTML=f(r*a.video.duration)},z=function he(){document.removeEventListener("mouseup",he),document.removeEventListener("mousemove",E),a.video.currentTime=parseFloat(v.playedBar.style.width)/100*a.video.duration,a.setTime()};h.addEventListener("mousedown",function(){x=h.clientWidth,a.clearTime(),document.addEventListener("mousemove",E),document.addEventListener("mouseup",z)}),v.volumeBar=this.element.getElementsByClassName("dplayer-volume-bar-inner")[0];var B=this.element.getElementsByClassName("dplayer-volume")[0],C=this.element.getElementsByClassName("dplayer-volume-bar-wrap")[0],M=this.element.getElementsByClassName("dplayer-volume-bar")[0],N=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,r=(t.clientX-b(M)-5.5)/q;a.volume(r)},T=function xe(){document.removeEventListener("mouseup",xe),document.removeEventListener("mousemove",S),B.classList.remove("dplayer-volume-active")};C.addEventListener("click",function(e){var t=e||window.event,r=(t.clientX-b(M)-5.5)/q;a.volume(r)}),C.addEventListener("mousedown",function(){document.addEventListener("mousemove",S),document.addEventListener("mouseup",T),B.classList.add("dplayer-volume-active")}),N.addEventListener("click",function(){a.video.muted?(a.video.muted=!1,a.switchVolumeIcon(),a.updateBar("volume",a.video.volume,"width")):(a.video.muted=!0,N.innerHTML=a.getSVG("volume-off"),a.updateBar("volume",0,"width"))});var A=0;if(!o){var I=function(){a.element.classList.remove("dplayer-hide-controller"),clearTimeout(A),A=setTimeout(function(){a.video.played.length&&(a.element.classList.add("dplayer-hide-controller"),X(),ue())},2e3)};this.element.addEventListener("mousemove",I),this.element.addEventListener("click",I)}var D=localStorage.getItem("DPlayer-opacity")||.7,R={original:'\n
\n '+p("Speed")+'\n
'+this.getSVG("right")+('
\n
\n
\n '+p("Loop")+'\n
\n \n \n
\n
\n
\n '+p("Danmaku")+'\n
\n \n \n
\n
\n
\n '+p("Opacity for danmaku")+'\n
\n
\n
\n \n
\n
\n
\n
'),speed:'\n
\n 0.5\n
\n
\n 0.75\n
\n
\n '+p("Normal")+'\n
\n
\n 1.25\n
\n
\n 1.5\n
\n
\n 2\n
'},F=this.element.getElementsByClassName("dplayer-setting-icon")[0],H=this.element.getElementsByClassName("dplayer-setting-box")[0],P=this.element.getElementsByClassName("dplayer-mask")[0];H.innerHTML=R.original;var X=function(){H.classList.contains("dplayer-setting-box-open")&&(H.classList.remove("dplayer-setting-box-open"),P.classList.remove("dplayer-mask-show"),setTimeout(function(){H.classList.remove("dplayer-setting-box-narrow"),H.innerHTML=R.original,j()},300))},O=function(){H.classList.add("dplayer-setting-box-open"),P.classList.add("dplayer-mask-show")};P.addEventListener("click",function(){X()}),F.addEventListener("click",function(){O()});var V=t.loop,U=this.element.getElementsByClassName("dplayer-danmaku")[0],G=!0,j=function(){var e=a.element.getElementsByClassName("dplayer-setting-loop")[0],r=e.getElementsByClassName("dplayer-toggle-setting-input")[0];r.checked=V,e.addEventListener("click",function(){r.checked=!r.checked,r.checked?(V=!0,a.video.loop=V):(V=!1,a.video.loop=V),X()});var n=a.element.getElementsByClassName("dplayer-setting-showdan")[0],l=n.getElementsByClassName("dplayer-showdan-setting-input")[0];l.checked=G,n.addEventListener("click",function(){if(l.checked=!l.checked,l.checked){if(G=!0,t.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);)ae(e.text,e.color,e.type),e=a.dan[++a.danIndex]},0)}}else G=!1,t.danmaku&&(clearInterval(L),U.innerHTML='
');X()});var o=a.element.getElementsByClassName("dplayer-setting-speed")[0];o.addEventListener("click",function(){H.classList.add("dplayer-setting-box-narrow"),H.innerHTML=R.speed;for(var e=H.getElementsByClassName("dplayer-setting-speed-item"),t=function(t){e[t].addEventListener("click",function(){a.video.playbackRate=e[t].dataset.speed,X()})},r=0;r0?l:0,l=l<1?l:1,a.updateBar("danmaku",l,"width");for(var o=a.element.getElementsByClassName("dplayer-danmaku-item"),s=0;s0?l:0,l=l<1?l:1,a.updateBar("danmaku",l,"width");for(var o=a.element.getElementsByClassName("dplayer-danmaku-item"),s=0;s=200&&e.status<300||304===e.status){var r=JSON.parse(e.responseText);1!==r.code?alert(r.msg):(a.dan=r.danmaku.sort(function(e,t){return e.time-t.time}),a.element.getElementsByClassName("dplayer-danloading")[0].style.display="none",t.autoplay&&!o?a.play():o&&a.pause())}else console.log("Request was unsuccessful: "+e.status)};var r=void 0;r=t.danmaku.maximum?t.danmaku.api+"?id="+t.danmaku.id+"&max="+t.danmaku.maximum:t.danmaku.api+"?id="+t.danmaku.id,e.open("get",r,!0),e.send(null)}():t.autoplay&&!o?this.play():o&&this.pause();var re=this.element.getElementsByClassName("dplayer-comment-input")[0],ne=this.element.getElementsByClassName("dplayer-comment-icon")[0],le=this.element.getElementsByClassName("dplayer-comment-box")[0],oe=this.element.getElementsByClassName("dplayer-comment-setting-icon")[0],se=this.element.getElementsByClassName("dplayer-comment-setting-box")[0],ie=this.element.getElementsByClassName("dplayer-send-icon")[0],de=function(e){return e.replace(/&/g,"&").replace(//g,">").replace(/"/g,""").replace(/'/g,"'").replace(/\//g,"/")},pe=function(){if(re.blur(),!re.value.replace(/^\s+|\s+$/g,""))return void alert(p("Please input danmaku!"));var e={token:t.danmaku.token,player:t.danmaku.id,author:"DIYgod",time:a.video.currentTime,text:re.value,color:a.element.querySelector('input[name="dplayer-danmaku-color"]:checked').value,type:a.element.querySelector('input[name="dplayer-danmaku-type"]:checked').value},r=new XMLHttpRequest;r.onreadystatechange=function(){if(4===r.readyState)if(r.status>=200&&r.status<300||304===r.status){var e=JSON.parse(r.responseText);1!==e.code?alert(e.msg):console.log("Post danmaku: ",JSON.parse(r.responseText))}else console.log("Request was unsuccessful: "+r.status)},r.open("post",t.danmaku.api,!0),r.send(JSON.stringify(e)),re.value="",ue(),a.dan.splice(a.danIndex,0,e),a.danIndex++;var n=ae(de(e.text),e.color,e.type);n.style.border="2px solid "+t.theme},ce=function(){se.classList.contains("dplayer-comment-setting-open")&&se.classList.remove("dplayer-comment-setting-open")},me=function(){se.classList.contains("dplayer-comment-setting-open")?se.classList.remove("dplayer-comment-setting-open"):se.classList.add("dplayer-comment-setting-open")},ye=0,ue=function(){le.classList.contains("dplayer-comment-box-open")&&(le.classList.remove("dplayer-comment-box-open"),P.classList.remove("dplayer-mask-show"),clearInterval(ye),a.element.classList.remove("dplayer-show-controller"),ce())},ge=function(){le.classList.add("dplayer-comment-box-open"),P.classList.add("dplayer-mask-show"),ye=setInterval(function(){clearTimeout(A)},1e3),a.element.classList.add("dplayer-show-controller")};P.addEventListener("click",function(){ue()}),ne.addEventListener("click",function(){ge(),setTimeout(function(){re.focus()},300)}),oe.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"]:checked+span');e&&(oe.getElementsByClassName("dplayer-fill")[0].style.fill=a.element.querySelector('input[name="dplayer-danmaku-color"]:checked').value)}),re.addEventListener("click",function(){ce()}),re.addEventListener("keydown",function(e){var t=e||window.event;13===t.keyCode&&pe()}),ie.addEventListener("click",pe);var fe=function(){W=U.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)}}]),e}();t.DPlayer=o},function(e,t,a){var r=a(2);"string"==typeof r&&(r=[[e.id,r,""]]);a(4)(r,{});r.locals&&(e.exports=r.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}.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){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var a=t();for(var r in a)("object"==typeof exports?exports:e)[r]=a[r]}}(this,function(){return function(e){function t(r){if(a[r])return a[r].exports;var n=a[r]={exports:{},id:r,loaded:!1};return e[r].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var a={};return t.m=e,t.c=a,t.p="",t(0)}([function(e,t,a){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var n="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 '};var o=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i);o&&(t.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};for(var i in s)s.hasOwnProperty(i)&&!t.hasOwnProperty(i)&&(t[i]=s[i]);var d={"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:"弹幕"},p=function(e){return"en"===t.lang?e:"zh"===t.lang?d[e]:void 0};this.updateBar=function(e,t,a){t=t>0?t:0,t=t<1?t:1,v[e+"Bar"].style[a]=100*t+"%"};var c=["play","pause","canplay","playing","ended","error"];this.event={};for(var m=0;m\n
\n \n
\n
\n
\n
\n \n '+(t.danmaku?''+p("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 '+(t.screenshot?'\n '+this.getSVG("camera")+" \n ":"")+'\n
\n \n
\n \n
\n
\n
'+p("Set danmaku color")+'
\n \n \n \n \n \n \n
\n
\n
'+p("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
'+p("About author")+'
\n
'+p("DPlayer feedback")+'
\n
'+p("About DPlayer")+"
\n
\n "),this.video=this.element.getElementsByClassName("dplayer-video")[0],t.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(t.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 y=this.element.getElementsByClassName("dplayer-video-wrap")[0],u=this.element.getElementsByClassName("dplayer-controller-mask")[0];if(o){var g=function(){a.element.classList.contains("dplayer-hide-controller")?a.element.classList.remove("dplayer-hide-controller"):a.element.classList.add("dplayer-hide-controller")};y.addEventListener("click",g),u.addEventListener("click",g)}else y.addEventListener("click",function(){a.toggle()}),u.addEventListener("click",function(){a.toggle()});var f=function(e){var t=function(e){return e<10?"0"+e:""+e},a=parseInt(e/60),r=parseInt(e-60*a);return t(a)+":"+t(r)},b=function(e){var t=e.offsetLeft,r=e.offsetParent,n=void 0;if(document.fullscreenElement||document.mozFullScreenElement||document.webkitFullscreenElement)for(;null!==r&&r!==a.element;)t+=r.offsetLeft,r=r.offsetParent;else for(;null!==r;)t+=r.offsetLeft,r=r.offsetParent;return n=document.body.scrollLeft+document.documentElement.scrollLeft,t-n},v={};v.playedBar=this.element.getElementsByClassName("dplayer-played")[0],v.loadedBar=this.element.getElementsByClassName("dplayer-loaded")[0];var h=this.element.getElementsByClassName("dplayer-bar-wrap")[0],x=void 0;t.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 k=0,w=0,Y=!1,E=void 0;this.setTime=function(){a.playedTime=setInterval(function(){w=a.video.currentTime,!Y&&wk+.01&&!a.video.paused&&(a.element.classList.remove("dplayer-loading"),Y=!1),k=w,a.updateBar("played",a.video.currentTime/a.video.duration,"width"),a.element.getElementsByClassName("dplayer-ptime")[0].innerHTML=f(a.video.currentTime),a.trigger("playing")},100),t.danmaku&&(E=setInterval(function(){for(var e=a.dan[a.danIndex];e&&a.video.currentTime>=parseFloat(e.time);)ae(e.text,e.color,e.type),e=a.dan[++a.danIndex]},0))},this.clearTime=function(){clearInterval(a.playedTime),t.danmaku&&clearInterval(E)},h.addEventListener("click",function(e){var t=e||window.event;x=h.clientWidth;var r=(t.clientX-b(h))/x;r=r>0?r:0,r=r<1?r:1,a.updateBar("played",r,"width"),a.video.currentTime=parseFloat(v.playedBar.style.width)/100*a.video.duration});var L=function(e){var t=e||window.event,r=(t.clientX-b(h))/x;r=r>0?r:0,r=r<1?r:1,a.updateBar("played",r,"width"),a.element.getElementsByClassName("dplayer-ptime")[0].innerHTML=f(r*a.video.duration)},z=function he(){document.removeEventListener("mouseup",he),document.removeEventListener("mousemove",L),a.video.currentTime=parseFloat(v.playedBar.style.width)/100*a.video.duration,a.setTime()};h.addEventListener("mousedown",function(){x=h.clientWidth,a.clearTime(),document.addEventListener("mousemove",L),document.addEventListener("mouseup",z)}),v.volumeBar=this.element.getElementsByClassName("dplayer-volume-bar-inner")[0];var B=this.element.getElementsByClassName("dplayer-volume")[0],C=this.element.getElementsByClassName("dplayer-volume-bar-wrap")[0],M=this.element.getElementsByClassName("dplayer-volume-bar")[0],N=this.element.getElementsByClassName("dplayer-volume-icon")[0],T=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 q=function(e){var t=e||window.event,r=(t.clientX-b(M)-5.5)/T;a.volume(r)},S=function xe(){document.removeEventListener("mouseup",xe),document.removeEventListener("mousemove",q),B.classList.remove("dplayer-volume-active")};C.addEventListener("click",function(e){var t=e||window.event,r=(t.clientX-b(M)-5.5)/T;a.volume(r)}),C.addEventListener("mousedown",function(){document.addEventListener("mousemove",q),document.addEventListener("mouseup",S),B.classList.add("dplayer-volume-active")}),N.addEventListener("click",function(){a.video.muted?(a.video.muted=!1,a.switchVolumeIcon(),a.updateBar("volume",a.video.volume,"width")):(a.video.muted=!0,N.innerHTML=a.getSVG("volume-off"),a.updateBar("volume",0,"width"))});var A=0;if(!o){var I=function(){a.element.classList.remove("dplayer-hide-controller"),clearTimeout(A),A=setTimeout(function(){a.video.played.length&&(a.element.classList.add("dplayer-hide-controller"),X(),ue())},2e3)};this.element.addEventListener("mousemove",I),this.element.addEventListener("click",I)}var D=localStorage.getItem("DPlayer-opacity")||.7,R={original:'\n
\n '+p("Speed")+'\n
'+this.getSVG("right")+('
\n
\n
\n '+p("Loop")+'\n
\n \n \n
\n
\n
\n '+p("Danmaku")+'\n
\n \n \n
\n
\n
\n '+p("Opacity for danmaku")+'\n
\n
\n
\n \n
\n
\n
\n
'),speed:'\n
\n 0.5\n
\n
\n 0.75\n
\n
\n '+p("Normal")+'\n
\n
\n 1.25\n
\n
\n 1.5\n
\n
\n 2\n
'},F=this.element.getElementsByClassName("dplayer-setting-icon")[0],H=this.element.getElementsByClassName("dplayer-setting-box")[0],P=this.element.getElementsByClassName("dplayer-mask")[0];H.innerHTML=R.original;var X=function(){H.classList.contains("dplayer-setting-box-open")&&(H.classList.remove("dplayer-setting-box-open"),P.classList.remove("dplayer-mask-show"),setTimeout(function(){H.classList.remove("dplayer-setting-box-narrow"),H.innerHTML=R.original,j()},300))},O=function(){H.classList.add("dplayer-setting-box-open"),P.classList.add("dplayer-mask-show")};P.addEventListener("click",function(){X()}),F.addEventListener("click",function(){O()});var V=t.loop,U=this.element.getElementsByClassName("dplayer-danmaku")[0],G=!0,j=function(){var e=a.element.getElementsByClassName("dplayer-setting-loop")[0],r=e.getElementsByClassName("dplayer-toggle-setting-input")[0];r.checked=V,e.addEventListener("click",function(){r.checked=!r.checked,r.checked?(V=!0,a.video.loop=V):(V=!1,a.video.loop=V),X()});var n=a.element.getElementsByClassName("dplayer-setting-showdan")[0],l=n.getElementsByClassName("dplayer-showdan-setting-input")[0];l.checked=G,n.addEventListener("click",function(){if(l.checked=!l.checked,l.checked){if(G=!0,t.danmaku){for(var e=0;e=a.video.currentTime){a.danIndex=e;break}a.danIndex=a.dan.length}E=setInterval(function(){for(var e=a.dan[a.danIndex];e&&a.video.currentTime>=parseFloat(e.time);)ae(e.text,e.color,e.type),e=a.dan[++a.danIndex]},0)}}else G=!1,t.danmaku&&(clearInterval(E),U.innerHTML='
');X()});var o=a.element.getElementsByClassName("dplayer-setting-speed")[0];o.addEventListener("click",function(){H.classList.add("dplayer-setting-box-narrow"),H.innerHTML=R.speed;for(var e=H.getElementsByClassName("dplayer-setting-speed-item"),t=function(t){e[t].addEventListener("click",function(){a.video.playbackRate=e[t].dataset.speed,X()})},r=0;r0?l:0,l=l<1?l:1,a.updateBar("danmaku",l,"width");for(var o=a.element.getElementsByClassName("dplayer-danmaku-item"),s=0;s0?l:0,l=l<1?l:1,a.updateBar("danmaku",l,"width");for(var o=a.element.getElementsByClassName("dplayer-danmaku-item"),s=0;s=200&&e.status<300||304===e.status){var r=JSON.parse(e.responseText);1!==r.code?alert(r.msg):(a.dan=r.danmaku.sort(function(e,t){return e.time-t.time}),a.element.getElementsByClassName("dplayer-danloading")[0].style.display="none",t.autoplay&&!o?a.play():o&&a.pause())}else console.log("Request was unsuccessful: "+e.status)};var r=void 0;r=t.danmaku.maximum?t.danmaku.api+"?id="+t.danmaku.id+"&max="+t.danmaku.maximum:t.danmaku.api+"?id="+t.danmaku.id,e.open("get",r,!0),e.send(null)}():t.autoplay&&!o?this.play():o&&this.pause();var re=this.element.getElementsByClassName("dplayer-comment-input")[0],ne=this.element.getElementsByClassName("dplayer-comment-icon")[0],le=this.element.getElementsByClassName("dplayer-comment-box")[0],oe=this.element.getElementsByClassName("dplayer-comment-setting-icon")[0],se=this.element.getElementsByClassName("dplayer-comment-setting-box")[0],ie=this.element.getElementsByClassName("dplayer-send-icon")[0],de=function(e){return e.replace(/&/g,"&").replace(//g,">").replace(/"/g,""").replace(/'/g,"'").replace(/\//g,"/")},pe=function(){if(re.blur(),!re.value.replace(/^\s+|\s+$/g,""))return void alert(p("Please input danmaku!"));var e={token:t.danmaku.token,player:t.danmaku.id,author:"DIYgod",time:a.video.currentTime,text:re.value,color:a.element.querySelector('input[name="dplayer-danmaku-color"]:checked').value,type:a.element.querySelector('input[name="dplayer-danmaku-type"]:checked').value},r=new XMLHttpRequest;r.onreadystatechange=function(){if(4===r.readyState)if(r.status>=200&&r.status<300||304===r.status){var e=JSON.parse(r.responseText);1!==e.code?alert(e.msg):console.log("Post danmaku: ",JSON.parse(r.responseText))}else console.log("Request was unsuccessful: "+r.status)},r.open("post",t.danmaku.api,!0),r.send(JSON.stringify(e)),re.value="",ue(),a.dan.splice(a.danIndex,0,e),a.danIndex++;var n=ae(de(e.text),e.color,e.type);n.style.border="2px solid "+t.theme},ce=function(){se.classList.contains("dplayer-comment-setting-open")&&se.classList.remove("dplayer-comment-setting-open")},me=function(){se.classList.contains("dplayer-comment-setting-open")?se.classList.remove("dplayer-comment-setting-open"):se.classList.add("dplayer-comment-setting-open")},ye=0,ue=function(){le.classList.contains("dplayer-comment-box-open")&&(le.classList.remove("dplayer-comment-box-open"),P.classList.remove("dplayer-mask-show"),clearInterval(ye),a.element.classList.remove("dplayer-show-controller"),ce())},ge=function(){le.classList.add("dplayer-comment-box-open"),P.classList.add("dplayer-mask-show"),ye=setInterval(function(){clearTimeout(A)},1e3),a.element.classList.add("dplayer-show-controller")};P.addEventListener("click",function(){ue()}),ne.addEventListener("click",function(){ge(),setTimeout(function(){re.focus()},300)}),oe.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"]:checked+span');e&&(oe.getElementsByClassName("dplayer-fill")[0].style.fill=a.element.querySelector('input[name="dplayer-danmaku-color"]:checked').value)}),re.addEventListener("click",function(){ce()}),re.addEventListener("keydown",function(e){var t=e||window.event;13===t.keyCode&&pe()}),ie.addEventListener("click",pe);var fe=function(){W=U.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)}}]),e}();t.DPlayer=o},function(e,t,a){var r=a(2);"string"==typeof r&&(r=[[e.id,r,""]]);a(4)(r,{});r.locals&&(e.exports=r.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}.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 s(e){var t=document.createElement("style");return t.type="text/css",l(e,t),t}function i(e){var t=document.createElement("link");return t.rel="stylesheet",l(e,t),t}function d(e,t){var a,r,n;if(t.singleton){var l=v++;a=b||(b=s(t)),r=p.bind(null,a,l,!1),n=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=i(t),r=m.bind(null,a),n=function(){o(a),a.href&&URL.revokeObjectURL(a.href)}):(a=s(t),r=c.bind(null,a),n=function(){o(a)});return r(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;r(e=t)}else n()}}function p(e,t,a,r){var n=a?"":r.css;if(e.styleSheet)e.styleSheet.cssText=x(t,n);else{var l=document.createTextNode(n),o=e.childNodes;o[t]&&e.removeChild(o[t]),o.length?e.insertBefore(l,o[t]):e.appendChild(l)}}function c(e,t){var a=t.css,r=t.media;if(r&&e.setAttribute("media",r),e.styleSheet)e.styleSheet.cssText=a;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(a))}}function m(e,t){var a=t.css,r=t.sourceMap;r&&(a+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */");var n=new Blob([a],{type:"text/css"}),l=e.href;e.href=URL.createObjectURL(n),l&&URL.revokeObjectURL(l)}var y={},u=function(e){var t;return function(){return"undefined"==typeof t&&(t=e.apply(this,arguments)),t}},g=u(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),f=u(function(){return document.head||document.getElementsByTagName("head")[0]}),b=null,v=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=n(e);return r(a,t),function(e){for(var l=[],o=0;o\\n \\n \\n \\n \";\n\t };\n\t\n\t var isMobile = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i);\n\t // compatibility: some mobile browsers don't suppose autoplay\n\t if (isMobile) {\n\t option.autoplay = false;\n\t }\n\t\n\t // default options\n\t var defaultOption = {\n\t element: document.getElementsByClassName('dplayer')[0],\n\t autoplay: false,\n\t theme: '#b7daff',\n\t loop: false,\n\t lang: navigator.language.indexOf('zh') !== -1 ? 'zh' : 'en',\n\t screenshot: false\n\t };\n\t for (var defaultKey in defaultOption) {\n\t if (defaultOption.hasOwnProperty(defaultKey) && !option.hasOwnProperty(defaultKey)) {\n\t option[defaultKey] = defaultOption[defaultKey];\n\t }\n\t }\n\t\n\t 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 (option.lang === 'en') {\n\t return text;\n\t } else if (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 = option.element;\n\t if (!option.danmaku) {\n\t this.element.classList.add('dplayer-no-danmaku');\n\t }\n\t\n\t this.element.innerHTML = \"\\n
\\n
\\n \\n
\\n
\\n
\\n
\\n \\n \" + (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 \" + (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 (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(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 (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 (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 (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 = 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 (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 (option.danmaku) {\n\t clearInterval(danmakuTime);\n\t danContainer.innerHTML = \"
\";\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 (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 var danTunnel = {\n\t right: {},\n\t top: {},\n\t bottom: {}\n\t };\n\t\n\t var danItemRight = function danItemRight(ele) {\n\t return danContainer.getBoundingClientRect().right - ele.getBoundingClientRect().right;\n\t };\n\t\n\t var danSpeed = function danSpeed(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 = 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]) || danRight <= 0) {\n\t break;\n\t }\n\t if (j === item.length - 1) {\n\t danTunnel[type][_i7 + ''].push(ele);\n\t ele.addEventListener('animationend', function () {\n\t 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 danTunnel[type][_i7 + ''] = [ele];\n\t ele.addEventListener('animationend', function () {\n\t 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 var 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 itemDemo.innerHTML = text;\n\t var itemWidth = 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 (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 var response = JSON.parse(xhr.responseText);\n\t if (response.code !== 1) {\n\t alert(response.msg);\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 (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 var apiurl = void 0;\n\t if (option.danmaku.maximum) {\n\t apiurl = option.danmaku.api + \"?id=\" + option.danmaku.id + \"&max=\" + option.danmaku.maximum;\n\t } else {\n\t apiurl = option.danmaku.api + \"?id=\" + 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 (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: option.danmaku.token,\n\t player: option.danmaku.id,\n\t author: 'DIYgod',\n\t time: _this.video.currentTime,\n\t text: commentInput.value,\n\t color: _this.element.querySelector('input[name=\"dplayer-danmaku-color\"]:checked').value,\n\t type: _this.element.querySelector('input[name=\"dplayer-danmaku-type\"]:checked').value\n\t };\n\t var xhr = new XMLHttpRequest();\n\t xhr.onreadystatechange = function () {\n\t if (xhr.readyState === 4) {\n\t if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {\n\t var response = JSON.parse(xhr.responseText);\n\t if (response.code !== 1) {\n\t alert(response.msg);\n\t } else {\n\t console.log('Post danmaku: ', JSON.parse(xhr.responseText));\n\t }\n\t } else {\n\t console.log('Request was unsuccessful: ' + xhr.status);\n\t }\n\t }\n\t };\n\t xhr.open('post', 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 \" + 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\"]:checked+span');\n\t if (sele) {\n\t commentSettingIcon.getElementsByClassName('dplayer-fill')[0].style.fill = _this.element.querySelector('input[name=\"dplayer-danmaku-color\"]:checked').value;\n\t }\n\t });\n\t\n\t commentInput.addEventListener('click', function () {\n\t closeCommentSetting();\n\t });\n\t commentInput.addEventListener('keydown', function (e) {\n\t var event = e || window.event;\n\t if (event.keyCode === 13) {\n\t sendComment();\n\t }\n\t });\n\t\n\t commentSendIcon.addEventListener('click', sendComment);\n\t\n\t /**\n\t * full screen\n\t */\n\t var resetAnimation = function resetAnimation() {\n\t danWidth = danContainer.offsetWidth;\n\t var items = _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 if (document.activeElement.tagName.toUpperCase() !== 'INPUT') {\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 document.addEventListener('keydown', handleKeyDown);\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 (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\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 return DPlayer;\n\t}();\n\t\n\texports.DPlayer = DPlayer;\n\n/***/ },\n/* 1 */\n/***/ function(module, exports, __webpack_require__) {\n\n\t// style-loader: Adds some css to the DOM by adding a