diff --git a/demo/index.html b/demo/index.html index 6d77f6c..70efbcb 100644 --- a/demo/index.html +++ b/demo/index.html @@ -59,10 +59,10 @@ var dp = new DPlayer({ element: document.getElementsByClassName('dplayer')[0], autoplay: false, - theme: '#FFD740', + theme: '#FADFA3', video: { - url: 'http://o6m1pq7od.bkt.clouddn.com/demo.mp4', - pic: 'http://o6m1pq7od.bkt.clouddn.com/poster.jpg' + url: 'http://o6m1pq7od.bkt.clouddn.com/禁绝的边境线.mp4', + pic: 'http://o6m1pq7od.bkt.clouddn.com/禁绝的边境线.jpg' } }); dp.init(); diff --git a/dist/DPlayer.min.css b/dist/DPlayer.min.css index 4e44897..808cdad 100644 --- a/dist/DPlayer.min.css +++ b/dist/DPlayer.min.css @@ -1 +1 @@ -.dplayer{position:relative}.dplayer:-webkit-full-screen{width:100%;height:100%;background:#000}.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-video-wrap{background:#000;font-size:0;width:100%;height:100%}.dplayer .dplayer-video-wrap .dplayer-video{width:100%;height:100%}.dplayer .dplayer-controller-mask{background-repeat:repeat-x;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);height:98px;width:100%;background-position:bottom}.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;-ms-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}.dplayer .dplayer-controller .dplayer-bar-wrap .dplayer-bar .dplayer-played{position:absolute;left:0;top:0;bottom:0;height:3px}.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);-ms-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-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}.dplayer .dplayer-controller .dplayer-icons .dplayer-icon:hover{opacity:1}.dplayer .dplayer-controller .dplayer-icons .dplayer-svg-shadow{stroke:#000;stroke-opacity:.1;stroke-width:2px;fill:none}.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;-ms-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;-ms-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}.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);-ms-transform:scale(0);transform:scale(0)} \ No newline at end of file +.dplayer{position:relative}.dplayer:-webkit-full-screen{width:100%;height:100%;background:#000}.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-hide-controller .dplayer-controller,.dplayer.dplayer-hide-controller .dplayer-controller-mask{opacity:0!important}.dplayer .dplayer-video-wrap{background:#000;font-size:0;width:100%;height:100%}.dplayer .dplayer-video-wrap .dplayer-video{width:100%;height:100%}.dplayer .dplayer-controller-mask{background-repeat:repeat-x;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);height:98px;width:100%;background-position:bottom}.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;-ms-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}.dplayer .dplayer-controller .dplayer-bar-wrap .dplayer-bar .dplayer-played{position:absolute;left:0;top:0;bottom:0;height:3px}.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);-ms-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-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}.dplayer .dplayer-controller .dplayer-icons .dplayer-icon:hover{opacity:1}.dplayer .dplayer-controller .dplayer-icons .dplayer-svg-shadow{stroke:#000;stroke-opacity:.1;stroke-width:2px;fill:none}.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;-ms-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;-ms-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}.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);-ms-transform:scale(0);transform:scale(0)} \ No newline at end of file diff --git a/dist/DPlayer.min.js b/dist/DPlayer.min.js index 0baa498..8b94cd0 100644 --- a/dist/DPlayer.min.js +++ b/dist/DPlayer.min.js @@ -1,2 +1,2 @@ -"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var _createClass=function(){function e(e,t){for(var n=0;n\n \n \n \n '},this.isMobile=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i),this.isMobile&&(t.autoplay=!1);var a={element:document.getElementsByClassName("dplayer")[0],autoplay:!1,theme:"#b7daff",loop:!1};for(var s in a)a.hasOwnProperty(s)&&!t.hasOwnProperty(s)&&(t[s]=a[s]);this.option=t,this.loop=t.loop,this.secondToTime=function(e){var t=function(e){return 10>e?"0"+e:""+e},n=parseInt(e/60),a=parseInt(e-60*n);return t(n)+":"+t(a)},this.updateBar=function(e,t,a){t=t>0?t:0,t=1>t?t:1,n[e+"Bar"].style[a]=100*t+"%"},this.eventTypes=["play","pause","canplay","playing","ended","error"],this.event={};var i=!0,l=!1,o=void 0;try{for(var d,r=this.eventTypes[Symbol.iterator]();!(i=(d=r.next()).done);i=!0){var u=d.value;this.event[u]=[]}}catch(c){l=!0,o=c}finally{try{!i&&r["return"]&&r["return"]()}finally{if(l)throw o}}this.trigger=function(e){var t=!0,a=!1,s=void 0;try{for(var i,l=n.event[e][Symbol.iterator]();!(t=(i=l.next()).done);t=!0){var o=i.value;o()}}catch(d){a=!0,s=d}finally{try{!t&&l["return"]&&l["return"]()}finally{if(a)throw s}}}}return _createClass(e,[{key:"init",value:function(){function e(e){for(var t=e.offsetLeft,n=e.offsetParent,a=void 0;null!==n;)t+=n.offsetLeft,n=n.offsetParent;return a=document.body.scrollLeft+document.documentElement.scrollLeft,t-a}var t=this;this.element=this.option.element;var 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 \n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n ');this.element.innerHTML=n,this.audio=this.element.getElementsByClassName("dplayer-video")[0],this.playButton=this.element.getElementsByClassName("dplayer-play-icon")[0],this.toggle=function(){t.audio.paused?t.play():t.pause()},this.playButton.addEventListener("click",this.toggle),this.audio.addEventListener("click",this.toggle),this.element.getElementsByClassName("dplayer-controller-mask")[0].addEventListener("click",this.toggle),this.playedBar=this.element.getElementsByClassName("dplayer-played")[0],this.loadedBar=this.element.getElementsByClassName("dplayer-loaded")[0],this.thumb=this.element.getElementsByClassName("dplayer-thumb")[0],this.bar=this.element.getElementsByClassName("dplayer-bar-wrap")[0];var a=void 0;this.bar.addEventListener("click",function(n){var s=n||window.event;a=t.bar.clientWidth;var i=(s.clientX-e(t.bar))/a;i=i>0?i:0,i=1>i?i:1,t.updateBar("played",i,"width"),t.element.getElementsByClassName("dplayer-ptime")[0].innerHTML=t.secondToTime(i*t.audio.duration),t.audio.currentTime=parseFloat(t.playedBar.style.width)/100*t.audio.duration});var s=function(n){var s=n||window.event,i=(s.clientX-e(t.bar))/a;i=i>0?i:0,i=1>i?i:1,t.updateBar("played",i,"width"),t.element.getElementsByClassName("dplayer-ptime")[0].innerHTML=t.secondToTime(i*t.audio.duration)},i=function v(){document.removeEventListener("mouseup",v),document.removeEventListener("mousemove",s),t.audio.currentTime=parseFloat(t.playedBar.style.width)/100*t.audio.duration,t.playedTime=setInterval(function(){t.updateBar("played",t.audio.currentTime/t.audio.duration,"width"),t.element.getElementsByClassName("dplayer-ptime")[0].innerHTML=t.secondToTime(t.audio.currentTime),t.trigger("playing")},100)};this.bar.addEventListener("mousedown",function(){a=t.bar.clientWidth,clearInterval(t.playedTime),document.addEventListener("mousemove",s),document.addEventListener("mouseup",i)}),this.volumeBar=this.element.getElementsByClassName("dplayer-volume-bar-inner")[0];var l=this.element.getElementsByClassName("dplayer-volume")[0],o=this.element.getElementsByClassName("dplayer-volume-bar-wrap")[0],d=this.element.getElementsByClassName("dplayer-volume-bar")[0],r=this.element.getElementsByClassName("dplayer-volume-icon")[0],u=35,c=function(){t.audio.volume>=.8?r.innerHTML=t.getSVG("volume-up"):t.audio.volume>0?r.innerHTML=t.getSVG("volume-down"):r.innerHTML=t.getSVG("volume-off")},m=function(n){var a=n||window.event,s=(a.clientX-e(d)-5.5)/u;s=s>0?s:0,s=1>s?s:1,t.updateBar("volume",s,"width"),t.audio.volume=s,t.audio.muted&&(t.audio.muted=!1),c()},p=function h(){document.removeEventListener("mouseup",h),document.removeEventListener("mousemove",m),l.classList.remove("dplayer-volume-active")};o.addEventListener("click",function(n){var a=n||window.event,s=(a.clientX-e(d)-5.5)/u;s=s>0?s:0,s=1>s?s:1,t.updateBar("volume",s,"width"),t.audio.volume=s,t.audio.muted&&(t.audio.muted=!1),c()}),o.addEventListener("mousedown",function(){document.addEventListener("mousemove",m),document.addEventListener("mouseup",p),l.classList.add("dplayer-volume-active")}),r.addEventListener("click",function(){t.audio.muted?(t.audio.muted=!1,c(),t.updateBar("volume",t.audio.volume,"width")):(t.audio.muted=!0,r.innerHTML=t.getSVG("volume-off"),t.updateBar("volume",0,"width"))}),this.element.getElementsByClassName("dplayer-full-icon")[0].addEventListener("click",function(){t.element.requestFullscreen?t.element.requestFullscreen():t.element.mozRequestFullScreen?t.element.mozRequestFullScreen():t.element.webkitRequestFullscreen&&t.element.webkitRequestFullscreen()}),this.audio.addEventListener("durationchange",function(){1!==t.audio.duration&&(t.element.getElementsByClassName("dplayer-dtime")[0].innerHTML=t.secondToTime(t.audio.duration))}),this.audio.addEventListener("progress",function(){var e=t.audio.buffered.length?t.audio.buffered.end(t.audio.buffered.length-1)/t.audio.duration:0;t.updateBar("loaded",e,"width")}),this.audio.addEventListener("error",function(){t.element.getElementsByClassName("dplayer-author")[0].innerHTML=" - Error happens ╥﹏╥",t.trigger("pause")}),this.audio.addEventListener("canplay",function(){t.trigger("canplay")}),this.ended=!1,this.audio.addEventListener("ended",function(){t.updateBar("played",1,"width"),t.loop||(t.ended=!0,t.pause(),t.trigger("ended"))}),this.audio.volume=parseInt(this.element.getElementsByClassName("dplayer-volume-bar-inner")[0].style.width)/100,this.audio.loop=this.loop,1!==this.audio.duration&&(this.element.getElementsByClassName("dplayer-dtime")[0].innerHTML=this.audio.duration?this.secondToTime(this.audio.duration):"00:00"),this.option.autoplay&&!this.isMobile&&this.play(),this.option.autoplay=!0,this.isMobile&&this.pause()}},{key:"play",value:function(){var e=this;this.audio.paused&&(this.playButton.innerHTML=this.getSVG("pause"),this.audio.play(),this.playedTime&&clearInterval(this.playedTime),this.playedTime=setInterval(function(){e.updateBar("played",e.audio.currentTime/e.audio.duration,"width"),e.element.getElementsByClassName("dplayer-ptime")[0].innerHTML=e.secondToTime(e.audio.currentTime),e.trigger("playing")},100),this.element.classList.add("dplayer-playing"),this.trigger("play"))}},{key:"pause",value:function(){this.audio.paused&&!this.ended||(this.ended=!1,this.playButton.innerHTML=this.getSVG("play"),this.audio.pause(),clearInterval(this.playedTime),this.element.classList.remove("dplayer-playing"),this.trigger("pause"))}},{key:"on",value:function(e,t){"function"==typeof t&&this.event[e].push(t)}}]),e}();"undefined"!=typeof module&&"undefined"!=typeof module.exports?module.exports=e:window.DPlayer=e}(); +"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var _createClass=function(){function e(e,t){for(var n=0;n\n \n \n \n '},this.isMobile=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i),this.isMobile&&(t.autoplay=!1);var a={element:document.getElementsByClassName("dplayer")[0],autoplay:!1,theme:"#b7daff",loop:!1};for(var i in a)a.hasOwnProperty(i)&&!t.hasOwnProperty(i)&&(t[i]=a[i]);this.option=t,this.loop=t.loop,this.secondToTime=function(e){var t=function(e){return 10>e?"0"+e:""+e},n=parseInt(e/60),a=parseInt(e-60*n);return t(n)+":"+t(a)},this.updateBar=function(e,t,a){t=t>0?t:0,t=1>t?t:1,n[e+"Bar"].style[a]=100*t+"%"},this.eventTypes=["play","pause","canplay","playing","ended","error"],this.event={};var s=!0,l=!1,o=void 0;try{for(var d,r=this.eventTypes[Symbol.iterator]();!(s=(d=r.next()).done);s=!0){var u=d.value;this.event[u]=[]}}catch(c){l=!0,o=c}finally{try{!s&&r["return"]&&r["return"]()}finally{if(l)throw o}}this.trigger=function(e){var t=!0,a=!1,i=void 0;try{for(var s,l=n.event[e][Symbol.iterator]();!(t=(s=l.next()).done);t=!0){var o=s.value;o()}}catch(d){a=!0,i=d}finally{try{!t&&l["return"]&&l["return"]()}finally{if(a)throw i}}}}return _createClass(e,[{key:"init",value:function(){function e(e){for(var t=e.offsetLeft,n=e.offsetParent,a=void 0;null!==n;)t+=n.offsetLeft,n=n.offsetParent;return a=document.body.scrollLeft+document.documentElement.scrollLeft,t-a}var t=this;this.element=this.option.element;var 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 \n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n ');this.element.innerHTML=n,this.audio=this.element.getElementsByClassName("dplayer-video")[0];var a=0,i=function(){t.element.classList.remove("dplayer-hide-controller"),clearTimeout(a),a=setTimeout(function(){t.audio.played.length&&t.element.classList.add("dplayer-hide-controller")},3e3)};this.element.addEventListener("mousemove",i),this.element.addEventListener("click",i),this.playButton=this.element.getElementsByClassName("dplayer-play-icon")[0],this.toggle=function(){t.audio.paused?t.play():t.pause()},this.playButton.addEventListener("click",this.toggle),this.audio.addEventListener("click",this.toggle),this.element.getElementsByClassName("dplayer-controller-mask")[0].addEventListener("click",this.toggle),this.playedBar=this.element.getElementsByClassName("dplayer-played")[0],this.loadedBar=this.element.getElementsByClassName("dplayer-loaded")[0],this.thumb=this.element.getElementsByClassName("dplayer-thumb")[0],this.bar=this.element.getElementsByClassName("dplayer-bar-wrap")[0];var s=void 0;this.bar.addEventListener("click",function(n){var a=n||window.event;s=t.bar.clientWidth;var i=(a.clientX-e(t.bar))/s;i=i>0?i:0,i=1>i?i:1,t.updateBar("played",i,"width"),t.element.getElementsByClassName("dplayer-ptime")[0].innerHTML=t.secondToTime(i*t.audio.duration),t.audio.currentTime=parseFloat(t.playedBar.style.width)/100*t.audio.duration});var l=function(n){var a=n||window.event,i=(a.clientX-e(t.bar))/s;i=i>0?i:0,i=1>i?i:1,t.updateBar("played",i,"width"),t.element.getElementsByClassName("dplayer-ptime")[0].innerHTML=t.secondToTime(i*t.audio.duration)},o=function y(){document.removeEventListener("mouseup",y),document.removeEventListener("mousemove",l),t.audio.currentTime=parseFloat(t.playedBar.style.width)/100*t.audio.duration,t.playedTime=setInterval(function(){t.updateBar("played",t.audio.currentTime/t.audio.duration,"width"),t.element.getElementsByClassName("dplayer-ptime")[0].innerHTML=t.secondToTime(t.audio.currentTime),t.trigger("playing")},100)};this.bar.addEventListener("mousedown",function(){s=t.bar.clientWidth,clearInterval(t.playedTime),document.addEventListener("mousemove",l),document.addEventListener("mouseup",o)}),this.volumeBar=this.element.getElementsByClassName("dplayer-volume-bar-inner")[0];var d=this.element.getElementsByClassName("dplayer-volume")[0],r=this.element.getElementsByClassName("dplayer-volume-bar-wrap")[0],u=this.element.getElementsByClassName("dplayer-volume-bar")[0],c=this.element.getElementsByClassName("dplayer-volume-icon")[0],m=35,p=function(){t.audio.volume>=.8?c.innerHTML=t.getSVG("volume-up"):t.audio.volume>0?c.innerHTML=t.getSVG("volume-down"):c.innerHTML=t.getSVG("volume-off")},v=function(n){var a=n||window.event,i=(a.clientX-e(u)-5.5)/m;i=i>0?i:0,i=1>i?i:1,t.updateBar("volume",i,"width"),t.audio.volume=i,t.audio.muted&&(t.audio.muted=!1),p()},h=function f(){document.removeEventListener("mouseup",f),document.removeEventListener("mousemove",v),d.classList.remove("dplayer-volume-active")};r.addEventListener("click",function(n){var a=n||window.event,i=(a.clientX-e(u)-5.5)/m;i=i>0?i:0,i=1>i?i:1,t.updateBar("volume",i,"width"),t.audio.volume=i,t.audio.muted&&(t.audio.muted=!1),p()}),r.addEventListener("mousedown",function(){document.addEventListener("mousemove",v),document.addEventListener("mouseup",h),d.classList.add("dplayer-volume-active")}),c.addEventListener("click",function(){t.audio.muted?(t.audio.muted=!1,p(),t.updateBar("volume",t.audio.volume,"width")):(t.audio.muted=!0,c.innerHTML=t.getSVG("volume-off"),t.updateBar("volume",0,"width"))}),this.element.getElementsByClassName("dplayer-full-icon")[0].addEventListener("click",function(){t.element.requestFullscreen?t.element.requestFullscreen():t.element.mozRequestFullScreen?t.element.mozRequestFullScreen():t.element.webkitRequestFullscreen&&t.element.webkitRequestFullscreen()}),this.audio.addEventListener("durationchange",function(){1!==t.audio.duration&&(t.element.getElementsByClassName("dplayer-dtime")[0].innerHTML=t.secondToTime(t.audio.duration))}),this.audio.addEventListener("progress",function(){var e=t.audio.buffered.length?t.audio.buffered.end(t.audio.buffered.length-1)/t.audio.duration:0;t.updateBar("loaded",e,"width")}),this.audio.addEventListener("error",function(){t.element.getElementsByClassName("dplayer-author")[0].innerHTML=" - Error happens ╥﹏╥",t.trigger("pause")}),this.audio.addEventListener("canplay",function(){t.trigger("canplay")}),this.ended=!1,this.audio.addEventListener("ended",function(){t.updateBar("played",1,"width"),t.loop||(t.ended=!0,t.pause(),t.trigger("ended"))}),this.audio.volume=parseInt(this.element.getElementsByClassName("dplayer-volume-bar-inner")[0].style.width)/100,this.audio.loop=this.loop,1!==this.audio.duration&&(this.element.getElementsByClassName("dplayer-dtime")[0].innerHTML=this.audio.duration?this.secondToTime(this.audio.duration):"00:00"),this.option.autoplay&&!this.isMobile&&this.play(),this.option.autoplay=!0,this.isMobile&&this.pause()}},{key:"play",value:function(){var e=this;this.audio.paused&&(this.playButton.innerHTML=this.getSVG("pause"),this.audio.play(),this.playedTime&&clearInterval(this.playedTime),this.playedTime=setInterval(function(){e.updateBar("played",e.audio.currentTime/e.audio.duration,"width"),e.element.getElementsByClassName("dplayer-ptime")[0].innerHTML=e.secondToTime(e.audio.currentTime),e.trigger("playing")},100),this.element.classList.add("dplayer-playing"),this.trigger("play"))}},{key:"pause",value:function(){this.audio.paused&&!this.ended||(this.ended=!1,this.playButton.innerHTML=this.getSVG("play"),this.audio.pause(),clearInterval(this.playedTime),this.element.classList.remove("dplayer-playing"),this.trigger("pause"))}},{key:"on",value:function(e,t){"function"==typeof t&&this.event[e].push(t)}}]),e}();"undefined"!=typeof module&&"undefined"!=typeof module.exports?module.exports=e:window.DPlayer=e}(); //# sourceMappingURL=DPlayer.min.js.map diff --git a/dist/DPlayer.min.js.map b/dist/DPlayer.min.js.map index b096bc3..e0bf6c7 100644 --- a/dist/DPlayer.min.js.map +++ b/dist/DPlayer.min.js.map @@ -1 +1 @@ -{"version":3,"sources":["DPlayer.js"],"names":["_classCallCheck","instance","Constructor","TypeError","_createClass","defineProperties","target","props","i","length","descriptor","enumerable","configurable","writable","Object","defineProperty","key","protoProps","staticProps","prototype","DPlayer","option","_this","this","svg","play","pause","volume-up","volume-down","volume-off","loop","full","setting","getSVG","type","isMobile","navigator","userAgent","match","autoplay","defaultOption","element","document","getElementsByClassName","theme","defaultKey","hasOwnProperty","secondToTime","second","add0","num","min","parseInt","sec","updateBar","percentage","direction","style","eventTypes","event","_iteratorNormalCompletion","_didIteratorError","_iteratorError","undefined","_step","_iterator","Symbol","iterator","next","done","value","err","trigger","_iteratorNormalCompletion2","_didIteratorError2","_iteratorError2","_step2","_iterator2","func","getElementViewLeft","actualLeft","offsetLeft","current","offsetParent","elementScrollLeft","body","scrollLeft","documentElement","_this2","eleHTML","video","pic","url","innerHTML","audio","playButton","toggle","paused","addEventListener","playedBar","loadedBar","thumb","bar","barWidth","e","window","clientWidth","clientX","duration","currentTime","parseFloat","width","thumbMove","thumbUp","removeEventListener","playedTime","setInterval","clearInterval","volumeBar","volumeEle","volumeBarWrapWrap","volumeBarWrap","volumeicon","vWidth","switchVolumeIcon","volume","volumeMove","muted","volumeUp","classList","remove","add","requestFullscreen","mozRequestFullScreen","webkitRequestFullscreen","buffered","end","ended","_this3","name","push","module","exports"],"mappings":"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","file":"DPlayer.min.js","sourcesContent":["(() => {\n\n class DPlayer {\n /**\n * DPlayer constructor function\n *\n * @param {Object} option - See README\n * @constructor\n */\n constructor(option) {\n this.svg = {\n 'play': ['0 0 16 32', 'M15.552 15.168q0.448 0.32 0.448 0.832 0 0.448-0.448 0.768l-13.696 8.512q-0.768 0.512-1.312 0.192t-0.544-1.28v-16.448q0-0.96 0.544-1.28t1.312 0.192z'],\n 'pause': ['0 0 17 32', 'M14.080 4.8q2.88 0 2.88 2.048v18.24q0 2.112-2.88 2.112t-2.88-2.112v-18.24q0-2.048 2.88-2.048zM2.88 4.8q2.88 0 2.88 2.048v18.24q0 2.112-2.88 2.112t-2.88-2.112v-18.24q0-2.048 2.88-2.048z'],\n 'volume-up': ['0 0 21 32', 'M13.728 6.272v19.456q0 0.448-0.352 0.8t-0.8 0.32-0.8-0.32l-5.952-5.952h-4.672q-0.48 0-0.8-0.352t-0.352-0.8v-6.848q0-0.48 0.352-0.8t0.8-0.352h4.672l5.952-5.952q0.32-0.32 0.8-0.32t0.8 0.32 0.352 0.8zM20.576 16q0 1.344-0.768 2.528t-2.016 1.664q-0.16 0.096-0.448 0.096-0.448 0-0.8-0.32t-0.32-0.832q0-0.384 0.192-0.64t0.544-0.448 0.608-0.384 0.512-0.64 0.192-1.024-0.192-1.024-0.512-0.64-0.608-0.384-0.544-0.448-0.192-0.64q0-0.48 0.32-0.832t0.8-0.32q0.288 0 0.448 0.096 1.248 0.48 2.016 1.664t0.768 2.528zM25.152 16q0 2.72-1.536 5.056t-4 3.36q-0.256 0.096-0.448 0.096-0.48 0-0.832-0.352t-0.32-0.8q0-0.704 0.672-1.056 1.024-0.512 1.376-0.8 1.312-0.96 2.048-2.4t0.736-3.104-0.736-3.104-2.048-2.4q-0.352-0.288-1.376-0.8-0.672-0.352-0.672-1.056 0-0.448 0.32-0.8t0.8-0.352q0.224 0 0.48 0.096 2.496 1.056 4 3.36t1.536 5.056zM29.728 16q0 4.096-2.272 7.552t-6.048 5.056q-0.224 0.096-0.448 0.096-0.48 0-0.832-0.352t-0.32-0.8q0-0.64 0.704-1.056 0.128-0.064 0.384-0.192t0.416-0.192q0.8-0.448 1.44-0.896 2.208-1.632 3.456-4.064t1.216-5.152-1.216-5.152-3.456-4.064q-0.64-0.448-1.44-0.896-0.128-0.096-0.416-0.192t-0.384-0.192q-0.704-0.416-0.704-1.056 0-0.448 0.32-0.8t0.832-0.352q0.224 0 0.448 0.096 3.776 1.632 6.048 5.056t2.272 7.552z'],\n 'volume-down': ['0 0 21 32', 'M13.728 6.272v19.456q0 0.448-0.352 0.8t-0.8 0.32-0.8-0.32l-5.952-5.952h-4.672q-0.48 0-0.8-0.352t-0.352-0.8v-6.848q0-0.48 0.352-0.8t0.8-0.352h4.672l5.952-5.952q0.32-0.32 0.8-0.32t0.8 0.32 0.352 0.8zM20.576 16q0 1.344-0.768 2.528t-2.016 1.664q-0.16 0.096-0.448 0.096-0.448 0-0.8-0.32t-0.32-0.832q0-0.384 0.192-0.64t0.544-0.448 0.608-0.384 0.512-0.64 0.192-1.024-0.192-1.024-0.512-0.64-0.608-0.384-0.544-0.448-0.192-0.64q0-0.48 0.32-0.832t0.8-0.32q0.288 0 0.448 0.096 1.248 0.48 2.016 1.664t0.768 2.528z'],\n 'volume-off': ['0 0 21 32', 'M13.728 6.272v19.456q0 0.448-0.352 0.8t-0.8 0.32-0.8-0.32l-5.952-5.952h-4.672q-0.48 0-0.8-0.352t-0.352-0.8v-6.848q0-0.48 0.352-0.8t0.8-0.352h4.672l5.952-5.952q0.32-0.32 0.8-0.32t0.8 0.32 0.352 0.8z'],\n 'loop': ['0 0 32 32', 'M1.882 16.941c0 4.152 3.221 7.529 7.177 7.529v1.882c-4.996 0-9.060-4.222-9.060-9.412s4.064-9.412 9.060-9.412h7.96l-3.098-3.098 1.331-1.331 5.372 5.37-5.37 5.372-1.333-1.333 3.1-3.098h-7.962c-3.957 0-7.177 3.377-7.177 7.529zM22.94 7.529v1.882c3.957 0 7.177 3.377 7.177 7.529s-3.221 7.529-7.177 7.529h-7.962l3.098-3.098-1.331-1.331-5.37 5.37 5.372 5.372 1.331-1.331-3.1-3.1h7.96c4.998 0 9.062-4.222 9.062-9.412s-4.064-9.412-9.060-9.412z'],\n 'full': ['0 0 32 32', 'M6.667 28h-5.333c-0.8 0-1.333-0.533-1.333-1.333v-5.333c0-0.8 0.533-1.333 1.333-1.333s1.333 0.533 1.333 1.333v4h4c0.8 0 1.333 0.533 1.333 1.333s-0.533 1.333-1.333 1.333zM30.667 28h-5.333c-0.8 0-1.333-0.533-1.333-1.333s0.533-1.333 1.333-1.333h4v-4c0-0.8 0.533-1.333 1.333-1.333s1.333 0.533 1.333 1.333v5.333c0 0.8-0.533 1.333-1.333 1.333zM30.667 12c-0.8 0-1.333-0.533-1.333-1.333v-4h-4c-0.8 0-1.333-0.533-1.333-1.333s0.533-1.333 1.333-1.333h5.333c0.8 0 1.333 0.533 1.333 1.333v5.333c0 0.8-0.533 1.333-1.333 1.333zM1.333 12c-0.8 0-1.333-0.533-1.333-1.333v-5.333c0-0.8 0.533-1.333 1.333-1.333h5.333c0.8 0 1.333 0.533 1.333 1.333s-0.533 1.333-1.333 1.333h-4v4c0 0.8-0.533 1.333-1.333 1.333z'],\n 'setting': ['0 0 32 27', 'M28.633 17.104c0.035 0.21 0.026 0.463-0.026 0.76s-0.14 0.598-0.262 0.904c-0.122 0.306-0.271 0.581-0.445 0.825s-0.367 0.419-0.576 0.524c-0.209 0.105-0.393 0.157-0.55 0.157s-0.332-0.035-0.524-0.105c-0.175-0.052-0.393-0.1-0.655-0.144s-0.528-0.052-0.799-0.026c-0.271 0.026-0.541 0.083-0.812 0.17s-0.502 0.236-0.694 0.445c-0.419 0.437-0.664 0.934-0.734 1.493s0.009 1.092 0.236 1.598c0.175 0.349 0.148 0.699-0.079 1.048-0.105 0.14-0.271 0.284-0.498 0.432s-0.476 0.284-0.747 0.406-0.555 0.218-0.851 0.288c-0.297 0.070-0.559 0.105-0.786 0.105-0.157 0-0.306-0.061-0.445-0.183s-0.236-0.253-0.288-0.393h-0.026c-0.192-0.541-0.52-1.009-0.982-1.402s-1-0.589-1.611-0.589c-0.594 0-1.131 0.197-1.611 0.589s-0.816 0.851-1.009 1.375c-0.087 0.21-0.218 0.362-0.393 0.458s-0.367 0.144-0.576 0.144c-0.244 0-0.52-0.044-0.825-0.131s-0.611-0.197-0.917-0.327c-0.306-0.131-0.581-0.284-0.825-0.458s-0.428-0.349-0.55-0.524c-0.087-0.122-0.135-0.266-0.144-0.432s0.057-0.397 0.197-0.694c0.192-0.402 0.266-0.86 0.223-1.375s-0.266-0.991-0.668-1.428c-0.244-0.262-0.541-0.432-0.891-0.511s-0.681-0.109-0.995-0.092c-0.367 0.017-0.742 0.087-1.127 0.21-0.244 0.070-0.489 0.052-0.734-0.052-0.192-0.070-0.371-0.231-0.537-0.485s-0.314-0.533-0.445-0.838c-0.131-0.306-0.231-0.62-0.301-0.943s-0.087-0.59-0.052-0.799c0.052-0.384 0.227-0.629 0.524-0.734 0.524-0.21 0.995-0.555 1.415-1.035s0.629-1.017 0.629-1.611c0-0.611-0.21-1.144-0.629-1.598s-0.891-0.786-1.415-0.996c-0.157-0.052-0.288-0.179-0.393-0.38s-0.157-0.406-0.157-0.616c0-0.227 0.035-0.48 0.105-0.76s0.162-0.55 0.275-0.812 0.244-0.502 0.393-0.72c0.148-0.218 0.31-0.38 0.485-0.485 0.14-0.087 0.275-0.122 0.406-0.105s0.275 0.052 0.432 0.105c0.524 0.21 1.070 0.275 1.637 0.197s1.070-0.327 1.506-0.747c0.21-0.209 0.362-0.467 0.458-0.773s0.157-0.607 0.183-0.904c0.026-0.297 0.026-0.568 0-0.812s-0.048-0.419-0.065-0.524c-0.035-0.105-0.066-0.227-0.092-0.367s-0.013-0.262 0.039-0.367c0.105-0.244 0.293-0.458 0.563-0.642s0.563-0.336 0.878-0.458c0.314-0.122 0.62-0.214 0.917-0.275s0.533-0.092 0.707-0.092c0.227 0 0.406 0.074 0.537 0.223s0.223 0.301 0.275 0.458c0.192 0.471 0.507 0.886 0.943 1.244s0.952 0.537 1.546 0.537c0.611 0 1.153-0.17 1.624-0.511s0.803-0.773 0.996-1.297c0.070-0.14 0.179-0.284 0.327-0.432s0.301-0.223 0.458-0.223c0.244 0 0.511 0.035 0.799 0.105s0.572 0.166 0.851 0.288c0.279 0.122 0.537 0.279 0.773 0.472s0.423 0.402 0.563 0.629c0.087 0.14 0.113 0.293 0.079 0.458s-0.070 0.284-0.105 0.354c-0.227 0.506-0.297 1.039-0.21 1.598s0.341 1.048 0.76 1.467c0.419 0.419 0.934 0.651 1.546 0.694s1.179-0.057 1.703-0.301c0.14-0.087 0.31-0.122 0.511-0.105s0.371 0.096 0.511 0.236c0.262 0.244 0.493 0.616 0.694 1.113s0.336 1 0.406 1.506c0.035 0.297-0.013 0.528-0.144 0.694s-0.266 0.275-0.406 0.327c-0.542 0.192-1.004 0.528-1.388 1.009s-0.576 1.026-0.576 1.637c0 0.594 0.162 1.113 0.485 1.559s0.747 0.764 1.27 0.956c0.122 0.070 0.227 0.14 0.314 0.21 0.192 0.157 0.323 0.358 0.393 0.602v0zM16.451 19.462c0.786 0 1.528-0.149 2.227-0.445s1.305-0.707 1.821-1.231c0.515-0.524 0.921-1.131 1.218-1.821s0.445-1.428 0.445-2.214c0-0.786-0.148-1.524-0.445-2.214s-0.703-1.292-1.218-1.808c-0.515-0.515-1.122-0.921-1.821-1.218s-1.441-0.445-2.227-0.445c-0.786 0-1.524 0.148-2.214 0.445s-1.292 0.703-1.808 1.218c-0.515 0.515-0.921 1.118-1.218 1.808s-0.445 1.428-0.445 2.214c0 0.786 0.149 1.524 0.445 2.214s0.703 1.297 1.218 1.821c0.515 0.524 1.118 0.934 1.808 1.231s1.428 0.445 2.214 0.445v0z']\n };\n this.getSVG = (type) => {\n return `\n \n \n \n \n `;\n };\n\n this.isMobile = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i);\n // compatibility: some mobile browsers don't suppose autoplay\n if (this.isMobile) {\n option.autoplay = false;\n }\n\n // default options\n const defaultOption = {\n element: document.getElementsByClassName('dplayer')[0],\n autoplay: false,\n theme: '#b7daff',\n loop: false\n };\n for (let defaultKey in defaultOption) {\n if (defaultOption.hasOwnProperty(defaultKey) && !option.hasOwnProperty(defaultKey)) {\n option[defaultKey] = defaultOption[defaultKey];\n }\n }\n\n this.option = option;\n this.loop = option.loop;\n\n /**\n * Parse second to 00:00 format\n *\n * @param {Number} second\n * @return {String} 00:00 format\n */\n this.secondToTime = (second) => {\n const add0 = (num) => {\n return num < 10 ? '0' + num : '' + num;\n };\n const min = parseInt(second / 60);\n const sec = parseInt(second - min * 60);\n return add0(min) + ':' + add0(sec);\n };\n\n /**\n * Update progress bar, including loading progress bar and play progress bar\n *\n * @param {String} type - Point out which bar it is, should be played loaded or volume\n * @param {Number} percentage\n * @param {String} direction - Point out the direction of this bar, Should be height or width\n */\n this.updateBar = (type, percentage, direction) => {\n percentage = percentage > 0 ? percentage : 0;\n percentage = percentage < 1 ? percentage : 1;\n this[type + 'Bar'].style[direction] = percentage * 100 + '%';\n };\n\n // define DPlayer events\n this.eventTypes = ['play', 'pause', 'canplay', 'playing', 'ended', 'error'];\n this.event = {};\n for (let type of this.eventTypes) {\n this.event[type] = [];\n }\n this.trigger = (type) => {\n for (let func of this.event[type]) {\n func();\n }\n }\n };\n\n /**\n * AutoLink initialization function\n */\n init() {\n this.element = this.option.element;\n\n let eleHTML = `\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 \n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n `;\n this.element.innerHTML = eleHTML;\n\n // get this audio object\n this.audio = this.element.getElementsByClassName('dplayer-video')[0];\n\n // play and pause button\n this.playButton = this.element.getElementsByClassName('dplayer-play-icon')[0];\n this.toggle = () => {\n if (this.audio.paused) {\n this.play();\n }\n else {\n this.pause();\n }\n };\n this.playButton.addEventListener('click', this.toggle);\n this.audio.addEventListener('click', this.toggle);\n this.element.getElementsByClassName('dplayer-controller-mask')[0].addEventListener('click', this.toggle);\n\n // control play progress\n this.playedBar = this.element.getElementsByClassName('dplayer-played')[0];\n this.loadedBar = this.element.getElementsByClassName('dplayer-loaded')[0];\n this.thumb = this.element.getElementsByClassName('dplayer-thumb')[0];\n this.bar = this.element.getElementsByClassName('dplayer-bar-wrap')[0];\n let barWidth;\n this.bar.addEventListener('click', (event) => {\n const e = event || window.event;\n barWidth = this.bar.clientWidth;\n let percentage = (e.clientX - getElementViewLeft(this.bar)) / barWidth;\n percentage = percentage > 0 ? percentage : 0;\n percentage = percentage < 1 ? percentage : 1;\n this.updateBar('played', percentage, 'width');\n this.element.getElementsByClassName('dplayer-ptime')[0].innerHTML = this.secondToTime(percentage * this.audio.duration);\n this.audio.currentTime = parseFloat(this.playedBar.style.width) / 100 * this.audio.duration;\n });\n\n const thumbMove = (event) => {\n const e = event || window.event;\n let percentage = (e.clientX - getElementViewLeft(this.bar)) / barWidth;\n percentage = percentage > 0 ? percentage : 0;\n percentage = percentage < 1 ? percentage : 1;\n this.updateBar('played', percentage, 'width');\n this.element.getElementsByClassName('dplayer-ptime')[0].innerHTML = this.secondToTime(percentage * this.audio.duration);\n };\n\n const thumbUp = () => {\n document.removeEventListener('mouseup', thumbUp);\n document.removeEventListener('mousemove', thumbMove);\n this.audio.currentTime = parseFloat(this.playedBar.style.width) / 100 * this.audio.duration;\n this.playedTime = setInterval(() => {\n this.updateBar('played', this.audio.currentTime / this.audio.duration, 'width');\n this.element.getElementsByClassName('dplayer-ptime')[0].innerHTML = this.secondToTime(this.audio.currentTime);\n this.trigger('playing');\n }, 100);\n };\n\n this.bar.addEventListener('mousedown', () => {\n barWidth = this.bar.clientWidth;\n clearInterval(this.playedTime);\n document.addEventListener('mousemove', thumbMove);\n document.addEventListener('mouseup', thumbUp);\n });\n\n // control volume\n this.volumeBar = this.element.getElementsByClassName('dplayer-volume-bar-inner')[0];\n const volumeEle = this.element.getElementsByClassName('dplayer-volume')[0];\n const volumeBarWrapWrap = this.element.getElementsByClassName('dplayer-volume-bar-wrap')[0];\n const volumeBarWrap = this.element.getElementsByClassName('dplayer-volume-bar')[0];\n const volumeicon = this.element.getElementsByClassName('dplayer-volume-icon')[0];\n const vWidth = 35;\n const switchVolumeIcon = () => {\n if (this.audio.volume >= 0.8) {\n volumeicon.innerHTML = this.getSVG('volume-up');\n }\n else if (this.audio.volume > 0) {\n volumeicon.innerHTML = this.getSVG('volume-down');\n }\n else {\n volumeicon.innerHTML = this.getSVG('volume-off');\n }\n };\n const volumeMove = (event) => {\n const e = event || window.event;\n let percentage = (e.clientX - getElementViewLeft(volumeBarWrap) - 5.5) / vWidth;\n percentage = percentage > 0 ? percentage : 0;\n percentage = percentage < 1 ? percentage : 1;\n this.updateBar('volume', percentage, 'width');\n this.audio.volume = percentage;\n if (this.audio.muted) {\n this.audio.muted = false;\n }\n switchVolumeIcon();\n };\n const volumeUp = () => {\n document.removeEventListener('mouseup', volumeUp);\n document.removeEventListener('mousemove', volumeMove);\n volumeEle.classList.remove('dplayer-volume-active');\n };\n\n volumeBarWrapWrap.addEventListener('click', (event) => {\n const e = event || window.event;\n let percentage = (e.clientX - getElementViewLeft(volumeBarWrap) - 5.5) / vWidth;\n percentage = percentage > 0 ? percentage : 0;\n percentage = percentage < 1 ? percentage : 1;\n this.updateBar('volume', percentage, 'width');\n this.audio.volume = percentage;\n if (this.audio.muted) {\n this.audio.muted = false;\n }\n switchVolumeIcon();\n });\n volumeBarWrapWrap.addEventListener('mousedown', () => {\n document.addEventListener('mousemove', volumeMove);\n document.addEventListener('mouseup', volumeUp);\n volumeEle.classList.add('dplayer-volume-active');\n });\n volumeicon.addEventListener('click', () => {\n if (this.audio.muted) {\n this.audio.muted = false;\n switchVolumeIcon();\n this.updateBar('volume', this.audio.volume, 'width');\n }\n else {\n this.audio.muted = true;\n volumeicon.innerHTML = this.getSVG('volume-off');\n this.updateBar('volume', 0, 'width');\n }\n });\n\n // get element's view position\n function getElementViewLeft(element) {\n let actualLeft = element.offsetLeft;\n let current = element.offsetParent;\n let elementScrollLeft;\n while (current !== null) {\n actualLeft += current.offsetLeft;\n current = current.offsetParent;\n }\n elementScrollLeft = document.body.scrollLeft + document.documentElement.scrollLeft;\n return actualLeft - elementScrollLeft;\n }\n\n function getElementViewTop(element) {\n let actualTop = element.offsetTop;\n let current = element.offsetParent;\n let elementScrollTop;\n while (current !== null) {\n actualTop += current.offsetTop;\n current = current.offsetParent;\n }\n elementScrollTop = document.body.scrollTop + document.documentElement.scrollTop;\n return actualTop - elementScrollTop;\n }\n\n // loop control\n // const loopEle = this.element.getElementsByClassName('dplayer-loop-icon')[0];\n // loopEle.addEventListener('click', () => {\n // if (this.loop) {\n // loopEle.classList.add('dplayer-noloop');\n // this.loop = false;\n // this.audio.loop = this.loop;\n // }\n // else {\n // loopEle.classList.remove('dplayer-noloop');\n // this.loop = true;\n // this.audio.loop = this.loop;\n // }\n // });\n\n // full screen\n this.element.getElementsByClassName('dplayer-full-icon')[0].addEventListener('click', () => {\n if (this.element.requestFullscreen) {\n this.element.requestFullscreen();\n }\n else if (this.element.mozRequestFullScreen) {\n this.element.mozRequestFullScreen();\n }\n else if (this.element.webkitRequestFullscreen) {\n this.element.webkitRequestFullscreen();\n }\n });\n\n // show audio time: the metadata has loaded or changed\n this.audio.addEventListener('durationchange', () => {\n if (this.audio.duration !== 1) { // compatibility: Android browsers will output 1 at first\n this.element.getElementsByClassName('dplayer-dtime')[0].innerHTML = this.secondToTime(this.audio.duration);\n }\n });\n\n // show audio loaded bar: to inform interested parties of progress downloading the media\n this.audio.addEventListener('progress', () => {\n const percentage = this.audio.buffered.length ? this.audio.buffered.end(this.audio.buffered.length - 1) / this.audio.duration : 0;\n this.updateBar('loaded', percentage, 'width');\n });\n\n // audio download error: an error occurs\n this.audio.addEventListener('error', () => {\n this.element.getElementsByClassName('dplayer-author')[0].innerHTML = ` - Error happens ╥﹏╥`;\n this.trigger('pause');\n });\n\n // audio can play: enough data is available that the media can be played\n this.audio.addEventListener('canplay', () => {\n this.trigger('canplay');\n });\n\n // multiple music play\n this.ended = false;\n this.audio.addEventListener('ended', () => {\n this.updateBar('played', 1, 'width');\n if (!this.loop) {\n this.ended = true;\n this.pause();\n this.trigger('ended');\n }\n });\n\n // control volume\n this.audio.volume = parseInt(this.element.getElementsByClassName('dplayer-volume-bar-inner')[0].style.width) / 100;\n\n // loop\n this.audio.loop = this.loop;\n\n // set duration time\n if (this.audio.duration !== 1) { // compatibility: Android browsers will output 1 at first\n this.element.getElementsByClassName('dplayer-dtime')[0].innerHTML = this.audio.duration ? this.secondToTime(this.audio.duration) : '00:00';\n }\n\n // autoplay\n if (this.option.autoplay && !this.isMobile) {\n this.play();\n }\n this.option.autoplay = true; // autoplay next music\n\n if (this.isMobile) {\n this.pause();\n }\n }\n\n /**\n * Play music\n */\n play() {\n if (this.audio.paused) {\n this.playButton.innerHTML = this.getSVG('pause');\n\n this.audio.play();\n if (this.playedTime) {\n clearInterval(this.playedTime);\n }\n this.playedTime = setInterval(() => {\n this.updateBar('played', this.audio.currentTime / this.audio.duration, 'width');\n this.element.getElementsByClassName('dplayer-ptime')[0].innerHTML = this.secondToTime(this.audio.currentTime);\n this.trigger('playing');\n }, 100);\n this.element.classList.add('dplayer-playing');\n this.trigger('play');\n }\n }\n\n /**\n * Pause music\n */\n pause() {\n if (!this.audio.paused || this.ended) {\n this.ended = false;\n this.playButton.innerHTML = this.getSVG('play');\n this.audio.pause();\n clearInterval(this.playedTime);\n this.element.classList.remove('dplayer-playing');\n this.trigger('pause');\n }\n }\n\n /**\n * attach event\n */\n on(name, func) {\n if (typeof func === 'function') {\n this.event[name].push(func);\n }\n }\n}\n\nif (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {\n module.exports = DPlayer\n}\nelse {\n window.DPlayer = DPlayer;\n}\n})();"],"sourceRoot":"/source/"} \ No newline at end of file +{"version":3,"sources":["DPlayer.js"],"names":["_classCallCheck","instance","Constructor","TypeError","_createClass","defineProperties","target","props","i","length","descriptor","enumerable","configurable","writable","Object","defineProperty","key","protoProps","staticProps","prototype","DPlayer","option","_this","this","svg","play","pause","volume-up","volume-down","volume-off","loop","full","setting","getSVG","type","isMobile","navigator","userAgent","match","autoplay","defaultOption","element","document","getElementsByClassName","theme","defaultKey","hasOwnProperty","secondToTime","second","add0","num","min","parseInt","sec","updateBar","percentage","direction","style","eventTypes","event","_iteratorNormalCompletion","_didIteratorError","_iteratorError","undefined","_step","_iterator","Symbol","iterator","next","done","value","err","trigger","_iteratorNormalCompletion2","_didIteratorError2","_iteratorError2","_step2","_iterator2","func","getElementViewLeft","actualLeft","offsetLeft","current","offsetParent","elementScrollLeft","body","scrollLeft","documentElement","_this2","eleHTML","video","pic","url","innerHTML","audio","hideTime","hideController","classList","remove","clearTimeout","setTimeout","played","add","addEventListener","playButton","toggle","paused","playedBar","loadedBar","thumb","bar","barWidth","e","window","clientWidth","clientX","duration","currentTime","parseFloat","width","thumbMove","thumbUp","removeEventListener","playedTime","setInterval","clearInterval","volumeBar","volumeEle","volumeBarWrapWrap","volumeBarWrap","volumeicon","vWidth","switchVolumeIcon","volume","volumeMove","muted","volumeUp","requestFullscreen","mozRequestFullScreen","webkitRequestFullscreen","buffered","end","ended","_this3","name","push","module","exports"],"mappings":"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","file":"DPlayer.min.js","sourcesContent":["(() => {\n\n class DPlayer {\n /**\n * DPlayer constructor function\n *\n * @param {Object} option - See README\n * @constructor\n */\n constructor(option) {\n this.svg = {\n 'play': ['0 0 16 32', 'M15.552 15.168q0.448 0.32 0.448 0.832 0 0.448-0.448 0.768l-13.696 8.512q-0.768 0.512-1.312 0.192t-0.544-1.28v-16.448q0-0.96 0.544-1.28t1.312 0.192z'],\n 'pause': ['0 0 17 32', 'M14.080 4.8q2.88 0 2.88 2.048v18.24q0 2.112-2.88 2.112t-2.88-2.112v-18.24q0-2.048 2.88-2.048zM2.88 4.8q2.88 0 2.88 2.048v18.24q0 2.112-2.88 2.112t-2.88-2.112v-18.24q0-2.048 2.88-2.048z'],\n 'volume-up': ['0 0 21 32', 'M13.728 6.272v19.456q0 0.448-0.352 0.8t-0.8 0.32-0.8-0.32l-5.952-5.952h-4.672q-0.48 0-0.8-0.352t-0.352-0.8v-6.848q0-0.48 0.352-0.8t0.8-0.352h4.672l5.952-5.952q0.32-0.32 0.8-0.32t0.8 0.32 0.352 0.8zM20.576 16q0 1.344-0.768 2.528t-2.016 1.664q-0.16 0.096-0.448 0.096-0.448 0-0.8-0.32t-0.32-0.832q0-0.384 0.192-0.64t0.544-0.448 0.608-0.384 0.512-0.64 0.192-1.024-0.192-1.024-0.512-0.64-0.608-0.384-0.544-0.448-0.192-0.64q0-0.48 0.32-0.832t0.8-0.32q0.288 0 0.448 0.096 1.248 0.48 2.016 1.664t0.768 2.528zM25.152 16q0 2.72-1.536 5.056t-4 3.36q-0.256 0.096-0.448 0.096-0.48 0-0.832-0.352t-0.32-0.8q0-0.704 0.672-1.056 1.024-0.512 1.376-0.8 1.312-0.96 2.048-2.4t0.736-3.104-0.736-3.104-2.048-2.4q-0.352-0.288-1.376-0.8-0.672-0.352-0.672-1.056 0-0.448 0.32-0.8t0.8-0.352q0.224 0 0.48 0.096 2.496 1.056 4 3.36t1.536 5.056zM29.728 16q0 4.096-2.272 7.552t-6.048 5.056q-0.224 0.096-0.448 0.096-0.48 0-0.832-0.352t-0.32-0.8q0-0.64 0.704-1.056 0.128-0.064 0.384-0.192t0.416-0.192q0.8-0.448 1.44-0.896 2.208-1.632 3.456-4.064t1.216-5.152-1.216-5.152-3.456-4.064q-0.64-0.448-1.44-0.896-0.128-0.096-0.416-0.192t-0.384-0.192q-0.704-0.416-0.704-1.056 0-0.448 0.32-0.8t0.832-0.352q0.224 0 0.448 0.096 3.776 1.632 6.048 5.056t2.272 7.552z'],\n 'volume-down': ['0 0 21 32', 'M13.728 6.272v19.456q0 0.448-0.352 0.8t-0.8 0.32-0.8-0.32l-5.952-5.952h-4.672q-0.48 0-0.8-0.352t-0.352-0.8v-6.848q0-0.48 0.352-0.8t0.8-0.352h4.672l5.952-5.952q0.32-0.32 0.8-0.32t0.8 0.32 0.352 0.8zM20.576 16q0 1.344-0.768 2.528t-2.016 1.664q-0.16 0.096-0.448 0.096-0.448 0-0.8-0.32t-0.32-0.832q0-0.384 0.192-0.64t0.544-0.448 0.608-0.384 0.512-0.64 0.192-1.024-0.192-1.024-0.512-0.64-0.608-0.384-0.544-0.448-0.192-0.64q0-0.48 0.32-0.832t0.8-0.32q0.288 0 0.448 0.096 1.248 0.48 2.016 1.664t0.768 2.528z'],\n 'volume-off': ['0 0 21 32', 'M13.728 6.272v19.456q0 0.448-0.352 0.8t-0.8 0.32-0.8-0.32l-5.952-5.952h-4.672q-0.48 0-0.8-0.352t-0.352-0.8v-6.848q0-0.48 0.352-0.8t0.8-0.352h4.672l5.952-5.952q0.32-0.32 0.8-0.32t0.8 0.32 0.352 0.8z'],\n 'loop': ['0 0 32 32', 'M1.882 16.941c0 4.152 3.221 7.529 7.177 7.529v1.882c-4.996 0-9.060-4.222-9.060-9.412s4.064-9.412 9.060-9.412h7.96l-3.098-3.098 1.331-1.331 5.372 5.37-5.37 5.372-1.333-1.333 3.1-3.098h-7.962c-3.957 0-7.177 3.377-7.177 7.529zM22.94 7.529v1.882c3.957 0 7.177 3.377 7.177 7.529s-3.221 7.529-7.177 7.529h-7.962l3.098-3.098-1.331-1.331-5.37 5.37 5.372 5.372 1.331-1.331-3.1-3.1h7.96c4.998 0 9.062-4.222 9.062-9.412s-4.064-9.412-9.060-9.412z'],\n 'full': ['0 0 32 33', 'M6.667 28h-5.333c-0.8 0-1.333-0.533-1.333-1.333v-5.333c0-0.8 0.533-1.333 1.333-1.333s1.333 0.533 1.333 1.333v4h4c0.8 0 1.333 0.533 1.333 1.333s-0.533 1.333-1.333 1.333zM30.667 28h-5.333c-0.8 0-1.333-0.533-1.333-1.333s0.533-1.333 1.333-1.333h4v-4c0-0.8 0.533-1.333 1.333-1.333s1.333 0.533 1.333 1.333v5.333c0 0.8-0.533 1.333-1.333 1.333zM30.667 12c-0.8 0-1.333-0.533-1.333-1.333v-4h-4c-0.8 0-1.333-0.533-1.333-1.333s0.533-1.333 1.333-1.333h5.333c0.8 0 1.333 0.533 1.333 1.333v5.333c0 0.8-0.533 1.333-1.333 1.333zM1.333 12c-0.8 0-1.333-0.533-1.333-1.333v-5.333c0-0.8 0.533-1.333 1.333-1.333h5.333c0.8 0 1.333 0.533 1.333 1.333s-0.533 1.333-1.333 1.333h-4v4c0 0.8-0.533 1.333-1.333 1.333z'],\n 'setting': ['0 0 32 29', 'M28.633 17.104c0.035 0.21 0.026 0.463-0.026 0.76s-0.14 0.598-0.262 0.904c-0.122 0.306-0.271 0.581-0.445 0.825s-0.367 0.419-0.576 0.524c-0.209 0.105-0.393 0.157-0.55 0.157s-0.332-0.035-0.524-0.105c-0.175-0.052-0.393-0.1-0.655-0.144s-0.528-0.052-0.799-0.026c-0.271 0.026-0.541 0.083-0.812 0.17s-0.502 0.236-0.694 0.445c-0.419 0.437-0.664 0.934-0.734 1.493s0.009 1.092 0.236 1.598c0.175 0.349 0.148 0.699-0.079 1.048-0.105 0.14-0.271 0.284-0.498 0.432s-0.476 0.284-0.747 0.406-0.555 0.218-0.851 0.288c-0.297 0.070-0.559 0.105-0.786 0.105-0.157 0-0.306-0.061-0.445-0.183s-0.236-0.253-0.288-0.393h-0.026c-0.192-0.541-0.52-1.009-0.982-1.402s-1-0.589-1.611-0.589c-0.594 0-1.131 0.197-1.611 0.589s-0.816 0.851-1.009 1.375c-0.087 0.21-0.218 0.362-0.393 0.458s-0.367 0.144-0.576 0.144c-0.244 0-0.52-0.044-0.825-0.131s-0.611-0.197-0.917-0.327c-0.306-0.131-0.581-0.284-0.825-0.458s-0.428-0.349-0.55-0.524c-0.087-0.122-0.135-0.266-0.144-0.432s0.057-0.397 0.197-0.694c0.192-0.402 0.266-0.86 0.223-1.375s-0.266-0.991-0.668-1.428c-0.244-0.262-0.541-0.432-0.891-0.511s-0.681-0.109-0.995-0.092c-0.367 0.017-0.742 0.087-1.127 0.21-0.244 0.070-0.489 0.052-0.734-0.052-0.192-0.070-0.371-0.231-0.537-0.485s-0.314-0.533-0.445-0.838c-0.131-0.306-0.231-0.62-0.301-0.943s-0.087-0.59-0.052-0.799c0.052-0.384 0.227-0.629 0.524-0.734 0.524-0.21 0.995-0.555 1.415-1.035s0.629-1.017 0.629-1.611c0-0.611-0.21-1.144-0.629-1.598s-0.891-0.786-1.415-0.996c-0.157-0.052-0.288-0.179-0.393-0.38s-0.157-0.406-0.157-0.616c0-0.227 0.035-0.48 0.105-0.76s0.162-0.55 0.275-0.812 0.244-0.502 0.393-0.72c0.148-0.218 0.31-0.38 0.485-0.485 0.14-0.087 0.275-0.122 0.406-0.105s0.275 0.052 0.432 0.105c0.524 0.21 1.070 0.275 1.637 0.197s1.070-0.327 1.506-0.747c0.21-0.209 0.362-0.467 0.458-0.773s0.157-0.607 0.183-0.904c0.026-0.297 0.026-0.568 0-0.812s-0.048-0.419-0.065-0.524c-0.035-0.105-0.066-0.227-0.092-0.367s-0.013-0.262 0.039-0.367c0.105-0.244 0.293-0.458 0.563-0.642s0.563-0.336 0.878-0.458c0.314-0.122 0.62-0.214 0.917-0.275s0.533-0.092 0.707-0.092c0.227 0 0.406 0.074 0.537 0.223s0.223 0.301 0.275 0.458c0.192 0.471 0.507 0.886 0.943 1.244s0.952 0.537 1.546 0.537c0.611 0 1.153-0.17 1.624-0.511s0.803-0.773 0.996-1.297c0.070-0.14 0.179-0.284 0.327-0.432s0.301-0.223 0.458-0.223c0.244 0 0.511 0.035 0.799 0.105s0.572 0.166 0.851 0.288c0.279 0.122 0.537 0.279 0.773 0.472s0.423 0.402 0.563 0.629c0.087 0.14 0.113 0.293 0.079 0.458s-0.070 0.284-0.105 0.354c-0.227 0.506-0.297 1.039-0.21 1.598s0.341 1.048 0.76 1.467c0.419 0.419 0.934 0.651 1.546 0.694s1.179-0.057 1.703-0.301c0.14-0.087 0.31-0.122 0.511-0.105s0.371 0.096 0.511 0.236c0.262 0.244 0.493 0.616 0.694 1.113s0.336 1 0.406 1.506c0.035 0.297-0.013 0.528-0.144 0.694s-0.266 0.275-0.406 0.327c-0.542 0.192-1.004 0.528-1.388 1.009s-0.576 1.026-0.576 1.637c0 0.594 0.162 1.113 0.485 1.559s0.747 0.764 1.27 0.956c0.122 0.070 0.227 0.14 0.314 0.21 0.192 0.157 0.323 0.358 0.393 0.602v0zM16.451 19.462c0.786 0 1.528-0.149 2.227-0.445s1.305-0.707 1.821-1.231c0.515-0.524 0.921-1.131 1.218-1.821s0.445-1.428 0.445-2.214c0-0.786-0.148-1.524-0.445-2.214s-0.703-1.292-1.218-1.808c-0.515-0.515-1.122-0.921-1.821-1.218s-1.441-0.445-2.227-0.445c-0.786 0-1.524 0.148-2.214 0.445s-1.292 0.703-1.808 1.218c-0.515 0.515-0.921 1.118-1.218 1.808s-0.445 1.428-0.445 2.214c0 0.786 0.149 1.524 0.445 2.214s0.703 1.297 1.218 1.821c0.515 0.524 1.118 0.934 1.808 1.231s1.428 0.445 2.214 0.445v0z']\n };\n this.getSVG = (type) => {\n return `\n \n \n \n \n `;\n };\n\n this.isMobile = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i);\n // compatibility: some mobile browsers don't suppose autoplay\n if (this.isMobile) {\n option.autoplay = false;\n }\n\n // default options\n const defaultOption = {\n element: document.getElementsByClassName('dplayer')[0],\n autoplay: false,\n theme: '#b7daff',\n loop: false\n };\n for (let defaultKey in defaultOption) {\n if (defaultOption.hasOwnProperty(defaultKey) && !option.hasOwnProperty(defaultKey)) {\n option[defaultKey] = defaultOption[defaultKey];\n }\n }\n\n this.option = option;\n this.loop = option.loop;\n\n /**\n * Parse second to 00:00 format\n *\n * @param {Number} second\n * @return {String} 00:00 format\n */\n this.secondToTime = (second) => {\n const add0 = (num) => {\n return num < 10 ? '0' + num : '' + num;\n };\n const min = parseInt(second / 60);\n const sec = parseInt(second - min * 60);\n return add0(min) + ':' + add0(sec);\n };\n\n /**\n * Update progress bar, including loading progress bar and play progress bar\n *\n * @param {String} type - Point out which bar it is, should be played loaded or volume\n * @param {Number} percentage\n * @param {String} direction - Point out the direction of this bar, Should be height or width\n */\n this.updateBar = (type, percentage, direction) => {\n percentage = percentage > 0 ? percentage : 0;\n percentage = percentage < 1 ? percentage : 1;\n this[type + 'Bar'].style[direction] = percentage * 100 + '%';\n };\n\n // define DPlayer events\n this.eventTypes = ['play', 'pause', 'canplay', 'playing', 'ended', 'error'];\n this.event = {};\n for (let type of this.eventTypes) {\n this.event[type] = [];\n }\n this.trigger = (type) => {\n for (let func of this.event[type]) {\n func();\n }\n }\n };\n\n /**\n * AutoLink initialization function\n */\n init() {\n this.element = this.option.element;\n\n let eleHTML = `\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 \n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n `;\n this.element.innerHTML = eleHTML;\n\n // get this audio object\n this.audio = this.element.getElementsByClassName('dplayer-video')[0];\n\n // hide controller if mouse stops for 3 seconds\n let hideTime = 0;\n const hideController = () => {\n this.element.classList.remove('dplayer-hide-controller');\n clearTimeout(hideTime);\n hideTime = setTimeout(() => {\n if (this.audio.played.length) {\n this.element.classList.add('dplayer-hide-controller');\n }\n }, 3000);\n };\n this.element.addEventListener('mousemove', hideController);\n this.element.addEventListener('click', hideController);\n\n // play and pause button\n this.playButton = this.element.getElementsByClassName('dplayer-play-icon')[0];\n this.toggle = () => {\n if (this.audio.paused) {\n this.play();\n }\n else {\n this.pause();\n }\n };\n this.playButton.addEventListener('click', this.toggle);\n this.audio.addEventListener('click', this.toggle);\n this.element.getElementsByClassName('dplayer-controller-mask')[0].addEventListener('click', this.toggle);\n\n // control play progress\n this.playedBar = this.element.getElementsByClassName('dplayer-played')[0];\n this.loadedBar = this.element.getElementsByClassName('dplayer-loaded')[0];\n this.thumb = this.element.getElementsByClassName('dplayer-thumb')[0];\n this.bar = this.element.getElementsByClassName('dplayer-bar-wrap')[0];\n let barWidth;\n this.bar.addEventListener('click', (event) => {\n const e = event || window.event;\n barWidth = this.bar.clientWidth;\n let percentage = (e.clientX - getElementViewLeft(this.bar)) / barWidth;\n percentage = percentage > 0 ? percentage : 0;\n percentage = percentage < 1 ? percentage : 1;\n this.updateBar('played', percentage, 'width');\n this.element.getElementsByClassName('dplayer-ptime')[0].innerHTML = this.secondToTime(percentage * this.audio.duration);\n this.audio.currentTime = parseFloat(this.playedBar.style.width) / 100 * this.audio.duration;\n });\n\n const thumbMove = (event) => {\n const e = event || window.event;\n let percentage = (e.clientX - getElementViewLeft(this.bar)) / barWidth;\n percentage = percentage > 0 ? percentage : 0;\n percentage = percentage < 1 ? percentage : 1;\n this.updateBar('played', percentage, 'width');\n this.element.getElementsByClassName('dplayer-ptime')[0].innerHTML = this.secondToTime(percentage * this.audio.duration);\n };\n\n const thumbUp = () => {\n document.removeEventListener('mouseup', thumbUp);\n document.removeEventListener('mousemove', thumbMove);\n this.audio.currentTime = parseFloat(this.playedBar.style.width) / 100 * this.audio.duration;\n this.playedTime = setInterval(() => {\n this.updateBar('played', this.audio.currentTime / this.audio.duration, 'width');\n this.element.getElementsByClassName('dplayer-ptime')[0].innerHTML = this.secondToTime(this.audio.currentTime);\n this.trigger('playing');\n }, 100);\n };\n\n this.bar.addEventListener('mousedown', () => {\n barWidth = this.bar.clientWidth;\n clearInterval(this.playedTime);\n document.addEventListener('mousemove', thumbMove);\n document.addEventListener('mouseup', thumbUp);\n });\n\n // control volume\n this.volumeBar = this.element.getElementsByClassName('dplayer-volume-bar-inner')[0];\n const volumeEle = this.element.getElementsByClassName('dplayer-volume')[0];\n const volumeBarWrapWrap = this.element.getElementsByClassName('dplayer-volume-bar-wrap')[0];\n const volumeBarWrap = this.element.getElementsByClassName('dplayer-volume-bar')[0];\n const volumeicon = this.element.getElementsByClassName('dplayer-volume-icon')[0];\n const vWidth = 35;\n const switchVolumeIcon = () => {\n if (this.audio.volume >= 0.8) {\n volumeicon.innerHTML = this.getSVG('volume-up');\n }\n else if (this.audio.volume > 0) {\n volumeicon.innerHTML = this.getSVG('volume-down');\n }\n else {\n volumeicon.innerHTML = this.getSVG('volume-off');\n }\n };\n const volumeMove = (event) => {\n const e = event || window.event;\n let percentage = (e.clientX - getElementViewLeft(volumeBarWrap) - 5.5) / vWidth;\n percentage = percentage > 0 ? percentage : 0;\n percentage = percentage < 1 ? percentage : 1;\n this.updateBar('volume', percentage, 'width');\n this.audio.volume = percentage;\n if (this.audio.muted) {\n this.audio.muted = false;\n }\n switchVolumeIcon();\n };\n const volumeUp = () => {\n document.removeEventListener('mouseup', volumeUp);\n document.removeEventListener('mousemove', volumeMove);\n volumeEle.classList.remove('dplayer-volume-active');\n };\n\n volumeBarWrapWrap.addEventListener('click', (event) => {\n const e = event || window.event;\n let percentage = (e.clientX - getElementViewLeft(volumeBarWrap) - 5.5) / vWidth;\n percentage = percentage > 0 ? percentage : 0;\n percentage = percentage < 1 ? percentage : 1;\n this.updateBar('volume', percentage, 'width');\n this.audio.volume = percentage;\n if (this.audio.muted) {\n this.audio.muted = false;\n }\n switchVolumeIcon();\n });\n volumeBarWrapWrap.addEventListener('mousedown', () => {\n document.addEventListener('mousemove', volumeMove);\n document.addEventListener('mouseup', volumeUp);\n volumeEle.classList.add('dplayer-volume-active');\n });\n volumeicon.addEventListener('click', () => {\n if (this.audio.muted) {\n this.audio.muted = false;\n switchVolumeIcon();\n this.updateBar('volume', this.audio.volume, 'width');\n }\n else {\n this.audio.muted = true;\n volumeicon.innerHTML = this.getSVG('volume-off');\n this.updateBar('volume', 0, 'width');\n }\n });\n\n // get element's view position\n function getElementViewLeft(element) {\n let actualLeft = element.offsetLeft;\n let current = element.offsetParent;\n let elementScrollLeft;\n while (current !== null) {\n actualLeft += current.offsetLeft;\n current = current.offsetParent;\n }\n elementScrollLeft = document.body.scrollLeft + document.documentElement.scrollLeft;\n return actualLeft - elementScrollLeft;\n }\n\n function getElementViewTop(element) {\n let actualTop = element.offsetTop;\n let current = element.offsetParent;\n let elementScrollTop;\n while (current !== null) {\n actualTop += current.offsetTop;\n current = current.offsetParent;\n }\n elementScrollTop = document.body.scrollTop + document.documentElement.scrollTop;\n return actualTop - elementScrollTop;\n }\n\n // loop control\n // const loopEle = this.element.getElementsByClassName('dplayer-loop-icon')[0];\n // loopEle.addEventListener('click', () => {\n // if (this.loop) {\n // loopEle.classList.add('dplayer-noloop');\n // this.loop = false;\n // this.audio.loop = this.loop;\n // }\n // else {\n // loopEle.classList.remove('dplayer-noloop');\n // this.loop = true;\n // this.audio.loop = this.loop;\n // }\n // });\n\n // full screen\n this.element.getElementsByClassName('dplayer-full-icon')[0].addEventListener('click', () => {\n if (this.element.requestFullscreen) {\n this.element.requestFullscreen();\n }\n else if (this.element.mozRequestFullScreen) {\n this.element.mozRequestFullScreen();\n }\n else if (this.element.webkitRequestFullscreen) {\n this.element.webkitRequestFullscreen();\n }\n });\n\n // show audio time: the metadata has loaded or changed\n this.audio.addEventListener('durationchange', () => {\n if (this.audio.duration !== 1) { // compatibility: Android browsers will output 1 at first\n this.element.getElementsByClassName('dplayer-dtime')[0].innerHTML = this.secondToTime(this.audio.duration);\n }\n });\n\n // show audio loaded bar: to inform interested parties of progress downloading the media\n this.audio.addEventListener('progress', () => {\n const percentage = this.audio.buffered.length ? this.audio.buffered.end(this.audio.buffered.length - 1) / this.audio.duration : 0;\n this.updateBar('loaded', percentage, 'width');\n });\n\n // audio download error: an error occurs\n this.audio.addEventListener('error', () => {\n this.element.getElementsByClassName('dplayer-author')[0].innerHTML = ` - Error happens ╥﹏╥`;\n this.trigger('pause');\n });\n\n // audio can play: enough data is available that the media can be played\n this.audio.addEventListener('canplay', () => {\n this.trigger('canplay');\n });\n\n // multiple music play\n this.ended = false;\n this.audio.addEventListener('ended', () => {\n this.updateBar('played', 1, 'width');\n if (!this.loop) {\n this.ended = true;\n this.pause();\n this.trigger('ended');\n }\n });\n\n // control volume\n this.audio.volume = parseInt(this.element.getElementsByClassName('dplayer-volume-bar-inner')[0].style.width) / 100;\n\n // loop\n this.audio.loop = this.loop;\n\n // set duration time\n if (this.audio.duration !== 1) { // compatibility: Android browsers will output 1 at first\n this.element.getElementsByClassName('dplayer-dtime')[0].innerHTML = this.audio.duration ? this.secondToTime(this.audio.duration) : '00:00';\n }\n\n // autoplay\n if (this.option.autoplay && !this.isMobile) {\n this.play();\n }\n this.option.autoplay = true; // autoplay next music\n\n if (this.isMobile) {\n this.pause();\n }\n }\n\n /**\n * Play music\n */\n play() {\n if (this.audio.paused) {\n this.playButton.innerHTML = this.getSVG('pause');\n\n this.audio.play();\n if (this.playedTime) {\n clearInterval(this.playedTime);\n }\n this.playedTime = setInterval(() => {\n this.updateBar('played', this.audio.currentTime / this.audio.duration, 'width');\n this.element.getElementsByClassName('dplayer-ptime')[0].innerHTML = this.secondToTime(this.audio.currentTime);\n this.trigger('playing');\n }, 100);\n this.element.classList.add('dplayer-playing');\n this.trigger('play');\n }\n }\n\n /**\n * Pause music\n */\n pause() {\n if (!this.audio.paused || this.ended) {\n this.ended = false;\n this.playButton.innerHTML = this.getSVG('play');\n this.audio.pause();\n clearInterval(this.playedTime);\n this.element.classList.remove('dplayer-playing');\n this.trigger('pause');\n }\n }\n\n /**\n * attach event\n */\n on(name, func) {\n if (typeof func === 'function') {\n this.event[name].push(func);\n }\n }\n}\n\nif (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {\n module.exports = DPlayer\n}\nelse {\n window.DPlayer = DPlayer;\n}\n})();"],"sourceRoot":"/source/"} \ No newline at end of file diff --git a/src/DPlayer.js b/src/DPlayer.js index d18279e..37f44c6 100644 --- a/src/DPlayer.js +++ b/src/DPlayer.js @@ -15,8 +15,8 @@ 'volume-down': ['0 0 21 32', 'M13.728 6.272v19.456q0 0.448-0.352 0.8t-0.8 0.32-0.8-0.32l-5.952-5.952h-4.672q-0.48 0-0.8-0.352t-0.352-0.8v-6.848q0-0.48 0.352-0.8t0.8-0.352h4.672l5.952-5.952q0.32-0.32 0.8-0.32t0.8 0.32 0.352 0.8zM20.576 16q0 1.344-0.768 2.528t-2.016 1.664q-0.16 0.096-0.448 0.096-0.448 0-0.8-0.32t-0.32-0.832q0-0.384 0.192-0.64t0.544-0.448 0.608-0.384 0.512-0.64 0.192-1.024-0.192-1.024-0.512-0.64-0.608-0.384-0.544-0.448-0.192-0.64q0-0.48 0.32-0.832t0.8-0.32q0.288 0 0.448 0.096 1.248 0.48 2.016 1.664t0.768 2.528z'], 'volume-off': ['0 0 21 32', 'M13.728 6.272v19.456q0 0.448-0.352 0.8t-0.8 0.32-0.8-0.32l-5.952-5.952h-4.672q-0.48 0-0.8-0.352t-0.352-0.8v-6.848q0-0.48 0.352-0.8t0.8-0.352h4.672l5.952-5.952q0.32-0.32 0.8-0.32t0.8 0.32 0.352 0.8z'], 'loop': ['0 0 32 32', 'M1.882 16.941c0 4.152 3.221 7.529 7.177 7.529v1.882c-4.996 0-9.060-4.222-9.060-9.412s4.064-9.412 9.060-9.412h7.96l-3.098-3.098 1.331-1.331 5.372 5.37-5.37 5.372-1.333-1.333 3.1-3.098h-7.962c-3.957 0-7.177 3.377-7.177 7.529zM22.94 7.529v1.882c3.957 0 7.177 3.377 7.177 7.529s-3.221 7.529-7.177 7.529h-7.962l3.098-3.098-1.331-1.331-5.37 5.37 5.372 5.372 1.331-1.331-3.1-3.1h7.96c4.998 0 9.062-4.222 9.062-9.412s-4.064-9.412-9.060-9.412z'], - 'full': ['0 0 32 32', 'M6.667 28h-5.333c-0.8 0-1.333-0.533-1.333-1.333v-5.333c0-0.8 0.533-1.333 1.333-1.333s1.333 0.533 1.333 1.333v4h4c0.8 0 1.333 0.533 1.333 1.333s-0.533 1.333-1.333 1.333zM30.667 28h-5.333c-0.8 0-1.333-0.533-1.333-1.333s0.533-1.333 1.333-1.333h4v-4c0-0.8 0.533-1.333 1.333-1.333s1.333 0.533 1.333 1.333v5.333c0 0.8-0.533 1.333-1.333 1.333zM30.667 12c-0.8 0-1.333-0.533-1.333-1.333v-4h-4c-0.8 0-1.333-0.533-1.333-1.333s0.533-1.333 1.333-1.333h5.333c0.8 0 1.333 0.533 1.333 1.333v5.333c0 0.8-0.533 1.333-1.333 1.333zM1.333 12c-0.8 0-1.333-0.533-1.333-1.333v-5.333c0-0.8 0.533-1.333 1.333-1.333h5.333c0.8 0 1.333 0.533 1.333 1.333s-0.533 1.333-1.333 1.333h-4v4c0 0.8-0.533 1.333-1.333 1.333z'], - 'setting': ['0 0 32 27', 'M28.633 17.104c0.035 0.21 0.026 0.463-0.026 0.76s-0.14 0.598-0.262 0.904c-0.122 0.306-0.271 0.581-0.445 0.825s-0.367 0.419-0.576 0.524c-0.209 0.105-0.393 0.157-0.55 0.157s-0.332-0.035-0.524-0.105c-0.175-0.052-0.393-0.1-0.655-0.144s-0.528-0.052-0.799-0.026c-0.271 0.026-0.541 0.083-0.812 0.17s-0.502 0.236-0.694 0.445c-0.419 0.437-0.664 0.934-0.734 1.493s0.009 1.092 0.236 1.598c0.175 0.349 0.148 0.699-0.079 1.048-0.105 0.14-0.271 0.284-0.498 0.432s-0.476 0.284-0.747 0.406-0.555 0.218-0.851 0.288c-0.297 0.070-0.559 0.105-0.786 0.105-0.157 0-0.306-0.061-0.445-0.183s-0.236-0.253-0.288-0.393h-0.026c-0.192-0.541-0.52-1.009-0.982-1.402s-1-0.589-1.611-0.589c-0.594 0-1.131 0.197-1.611 0.589s-0.816 0.851-1.009 1.375c-0.087 0.21-0.218 0.362-0.393 0.458s-0.367 0.144-0.576 0.144c-0.244 0-0.52-0.044-0.825-0.131s-0.611-0.197-0.917-0.327c-0.306-0.131-0.581-0.284-0.825-0.458s-0.428-0.349-0.55-0.524c-0.087-0.122-0.135-0.266-0.144-0.432s0.057-0.397 0.197-0.694c0.192-0.402 0.266-0.86 0.223-1.375s-0.266-0.991-0.668-1.428c-0.244-0.262-0.541-0.432-0.891-0.511s-0.681-0.109-0.995-0.092c-0.367 0.017-0.742 0.087-1.127 0.21-0.244 0.070-0.489 0.052-0.734-0.052-0.192-0.070-0.371-0.231-0.537-0.485s-0.314-0.533-0.445-0.838c-0.131-0.306-0.231-0.62-0.301-0.943s-0.087-0.59-0.052-0.799c0.052-0.384 0.227-0.629 0.524-0.734 0.524-0.21 0.995-0.555 1.415-1.035s0.629-1.017 0.629-1.611c0-0.611-0.21-1.144-0.629-1.598s-0.891-0.786-1.415-0.996c-0.157-0.052-0.288-0.179-0.393-0.38s-0.157-0.406-0.157-0.616c0-0.227 0.035-0.48 0.105-0.76s0.162-0.55 0.275-0.812 0.244-0.502 0.393-0.72c0.148-0.218 0.31-0.38 0.485-0.485 0.14-0.087 0.275-0.122 0.406-0.105s0.275 0.052 0.432 0.105c0.524 0.21 1.070 0.275 1.637 0.197s1.070-0.327 1.506-0.747c0.21-0.209 0.362-0.467 0.458-0.773s0.157-0.607 0.183-0.904c0.026-0.297 0.026-0.568 0-0.812s-0.048-0.419-0.065-0.524c-0.035-0.105-0.066-0.227-0.092-0.367s-0.013-0.262 0.039-0.367c0.105-0.244 0.293-0.458 0.563-0.642s0.563-0.336 0.878-0.458c0.314-0.122 0.62-0.214 0.917-0.275s0.533-0.092 0.707-0.092c0.227 0 0.406 0.074 0.537 0.223s0.223 0.301 0.275 0.458c0.192 0.471 0.507 0.886 0.943 1.244s0.952 0.537 1.546 0.537c0.611 0 1.153-0.17 1.624-0.511s0.803-0.773 0.996-1.297c0.070-0.14 0.179-0.284 0.327-0.432s0.301-0.223 0.458-0.223c0.244 0 0.511 0.035 0.799 0.105s0.572 0.166 0.851 0.288c0.279 0.122 0.537 0.279 0.773 0.472s0.423 0.402 0.563 0.629c0.087 0.14 0.113 0.293 0.079 0.458s-0.070 0.284-0.105 0.354c-0.227 0.506-0.297 1.039-0.21 1.598s0.341 1.048 0.76 1.467c0.419 0.419 0.934 0.651 1.546 0.694s1.179-0.057 1.703-0.301c0.14-0.087 0.31-0.122 0.511-0.105s0.371 0.096 0.511 0.236c0.262 0.244 0.493 0.616 0.694 1.113s0.336 1 0.406 1.506c0.035 0.297-0.013 0.528-0.144 0.694s-0.266 0.275-0.406 0.327c-0.542 0.192-1.004 0.528-1.388 1.009s-0.576 1.026-0.576 1.637c0 0.594 0.162 1.113 0.485 1.559s0.747 0.764 1.27 0.956c0.122 0.070 0.227 0.14 0.314 0.21 0.192 0.157 0.323 0.358 0.393 0.602v0zM16.451 19.462c0.786 0 1.528-0.149 2.227-0.445s1.305-0.707 1.821-1.231c0.515-0.524 0.921-1.131 1.218-1.821s0.445-1.428 0.445-2.214c0-0.786-0.148-1.524-0.445-2.214s-0.703-1.292-1.218-1.808c-0.515-0.515-1.122-0.921-1.821-1.218s-1.441-0.445-2.227-0.445c-0.786 0-1.524 0.148-2.214 0.445s-1.292 0.703-1.808 1.218c-0.515 0.515-0.921 1.118-1.218 1.808s-0.445 1.428-0.445 2.214c0 0.786 0.149 1.524 0.445 2.214s0.703 1.297 1.218 1.821c0.515 0.524 1.118 0.934 1.808 1.231s1.428 0.445 2.214 0.445v0z'] + 'full': ['0 0 32 33', 'M6.667 28h-5.333c-0.8 0-1.333-0.533-1.333-1.333v-5.333c0-0.8 0.533-1.333 1.333-1.333s1.333 0.533 1.333 1.333v4h4c0.8 0 1.333 0.533 1.333 1.333s-0.533 1.333-1.333 1.333zM30.667 28h-5.333c-0.8 0-1.333-0.533-1.333-1.333s0.533-1.333 1.333-1.333h4v-4c0-0.8 0.533-1.333 1.333-1.333s1.333 0.533 1.333 1.333v5.333c0 0.8-0.533 1.333-1.333 1.333zM30.667 12c-0.8 0-1.333-0.533-1.333-1.333v-4h-4c-0.8 0-1.333-0.533-1.333-1.333s0.533-1.333 1.333-1.333h5.333c0.8 0 1.333 0.533 1.333 1.333v5.333c0 0.8-0.533 1.333-1.333 1.333zM1.333 12c-0.8 0-1.333-0.533-1.333-1.333v-5.333c0-0.8 0.533-1.333 1.333-1.333h5.333c0.8 0 1.333 0.533 1.333 1.333s-0.533 1.333-1.333 1.333h-4v4c0 0.8-0.533 1.333-1.333 1.333z'], + 'setting': ['0 0 32 29', 'M28.633 17.104c0.035 0.21 0.026 0.463-0.026 0.76s-0.14 0.598-0.262 0.904c-0.122 0.306-0.271 0.581-0.445 0.825s-0.367 0.419-0.576 0.524c-0.209 0.105-0.393 0.157-0.55 0.157s-0.332-0.035-0.524-0.105c-0.175-0.052-0.393-0.1-0.655-0.144s-0.528-0.052-0.799-0.026c-0.271 0.026-0.541 0.083-0.812 0.17s-0.502 0.236-0.694 0.445c-0.419 0.437-0.664 0.934-0.734 1.493s0.009 1.092 0.236 1.598c0.175 0.349 0.148 0.699-0.079 1.048-0.105 0.14-0.271 0.284-0.498 0.432s-0.476 0.284-0.747 0.406-0.555 0.218-0.851 0.288c-0.297 0.070-0.559 0.105-0.786 0.105-0.157 0-0.306-0.061-0.445-0.183s-0.236-0.253-0.288-0.393h-0.026c-0.192-0.541-0.52-1.009-0.982-1.402s-1-0.589-1.611-0.589c-0.594 0-1.131 0.197-1.611 0.589s-0.816 0.851-1.009 1.375c-0.087 0.21-0.218 0.362-0.393 0.458s-0.367 0.144-0.576 0.144c-0.244 0-0.52-0.044-0.825-0.131s-0.611-0.197-0.917-0.327c-0.306-0.131-0.581-0.284-0.825-0.458s-0.428-0.349-0.55-0.524c-0.087-0.122-0.135-0.266-0.144-0.432s0.057-0.397 0.197-0.694c0.192-0.402 0.266-0.86 0.223-1.375s-0.266-0.991-0.668-1.428c-0.244-0.262-0.541-0.432-0.891-0.511s-0.681-0.109-0.995-0.092c-0.367 0.017-0.742 0.087-1.127 0.21-0.244 0.070-0.489 0.052-0.734-0.052-0.192-0.070-0.371-0.231-0.537-0.485s-0.314-0.533-0.445-0.838c-0.131-0.306-0.231-0.62-0.301-0.943s-0.087-0.59-0.052-0.799c0.052-0.384 0.227-0.629 0.524-0.734 0.524-0.21 0.995-0.555 1.415-1.035s0.629-1.017 0.629-1.611c0-0.611-0.21-1.144-0.629-1.598s-0.891-0.786-1.415-0.996c-0.157-0.052-0.288-0.179-0.393-0.38s-0.157-0.406-0.157-0.616c0-0.227 0.035-0.48 0.105-0.76s0.162-0.55 0.275-0.812 0.244-0.502 0.393-0.72c0.148-0.218 0.31-0.38 0.485-0.485 0.14-0.087 0.275-0.122 0.406-0.105s0.275 0.052 0.432 0.105c0.524 0.21 1.070 0.275 1.637 0.197s1.070-0.327 1.506-0.747c0.21-0.209 0.362-0.467 0.458-0.773s0.157-0.607 0.183-0.904c0.026-0.297 0.026-0.568 0-0.812s-0.048-0.419-0.065-0.524c-0.035-0.105-0.066-0.227-0.092-0.367s-0.013-0.262 0.039-0.367c0.105-0.244 0.293-0.458 0.563-0.642s0.563-0.336 0.878-0.458c0.314-0.122 0.62-0.214 0.917-0.275s0.533-0.092 0.707-0.092c0.227 0 0.406 0.074 0.537 0.223s0.223 0.301 0.275 0.458c0.192 0.471 0.507 0.886 0.943 1.244s0.952 0.537 1.546 0.537c0.611 0 1.153-0.17 1.624-0.511s0.803-0.773 0.996-1.297c0.070-0.14 0.179-0.284 0.327-0.432s0.301-0.223 0.458-0.223c0.244 0 0.511 0.035 0.799 0.105s0.572 0.166 0.851 0.288c0.279 0.122 0.537 0.279 0.773 0.472s0.423 0.402 0.563 0.629c0.087 0.14 0.113 0.293 0.079 0.458s-0.070 0.284-0.105 0.354c-0.227 0.506-0.297 1.039-0.21 1.598s0.341 1.048 0.76 1.467c0.419 0.419 0.934 0.651 1.546 0.694s1.179-0.057 1.703-0.301c0.14-0.087 0.31-0.122 0.511-0.105s0.371 0.096 0.511 0.236c0.262 0.244 0.493 0.616 0.694 1.113s0.336 1 0.406 1.506c0.035 0.297-0.013 0.528-0.144 0.694s-0.266 0.275-0.406 0.327c-0.542 0.192-1.004 0.528-1.388 1.009s-0.576 1.026-0.576 1.637c0 0.594 0.162 1.113 0.485 1.559s0.747 0.764 1.27 0.956c0.122 0.070 0.227 0.14 0.314 0.21 0.192 0.157 0.323 0.358 0.393 0.602v0zM16.451 19.462c0.786 0 1.528-0.149 2.227-0.445s1.305-0.707 1.821-1.231c0.515-0.524 0.921-1.131 1.218-1.821s0.445-1.428 0.445-2.214c0-0.786-0.148-1.524-0.445-2.214s-0.703-1.292-1.218-1.808c-0.515-0.515-1.122-0.921-1.821-1.218s-1.441-0.445-2.227-0.445c-0.786 0-1.524 0.148-2.214 0.445s-1.292 0.703-1.808 1.218c-0.515 0.515-0.921 1.118-1.218 1.808s-0.445 1.428-0.445 2.214c0 0.786 0.149 1.524 0.445 2.214s0.703 1.297 1.218 1.821c0.515 0.524 1.118 0.934 1.808 1.231s1.428 0.445 2.214 0.445v0z'] }; this.getSVG = (type) => { return ` @@ -145,6 +145,20 @@ // get this audio object this.audio = this.element.getElementsByClassName('dplayer-video')[0]; + // hide controller if mouse stops for 3 seconds + let hideTime = 0; + const hideController = () => { + this.element.classList.remove('dplayer-hide-controller'); + clearTimeout(hideTime); + hideTime = setTimeout(() => { + if (this.audio.played.length) { + this.element.classList.add('dplayer-hide-controller'); + } + }, 3000); + }; + this.element.addEventListener('mousemove', hideController); + this.element.addEventListener('click', hideController); + // play and pause button this.playButton = this.element.getElementsByClassName('dplayer-play-icon')[0]; this.toggle = () => { diff --git a/src/DPlayer.scss b/src/DPlayer.scss index 6706154..d58ff94 100644 --- a/src/DPlayer.scss +++ b/src/DPlayer.scss @@ -25,6 +25,15 @@ } } + &.dplayer-hide-controller { + .dplayer-controller-mask { + opacity: 0 !important; + } + .dplayer-controller { + opacity: 0 !important; + } + } + .dplayer-video-wrap { background: #000; font-size: 0;