diff --git a/dist/artplayer.css b/dist/artplayer.css index ae9cae01f..59b216479 100644 --- a/dist/artplayer.css +++ b/dist/artplayer.css @@ -1,16 +1,17 @@ .artplayer-video-player{position:relative;width:100%;height:100%;overflow:hidden;outline:0;font-family:Roboto,Arial,Helvetica,sans-serif;color:#eee;text-align:left;direction:ltr;font-size:14px;line-height:1.3;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:manipulation;-ms-high-contrast-adjust:none}.artplayer-video-player *{box-sizing:border-box}.artplayer-video-player .art-icon{display:inline-block;line-height:1.5}.artplayer-video-player .art-icon svg{fill:#fff} -.artplayer-video-player .artplayer-subtitle{position:absolute;z-index:20;bottom:40px;width:100%;padding:0 20px;text-align:center;color:#fff;text-shadow:.5px .5px .5px rgba(0,0,0,.5);font-size:20px;pointer-events:none}.artplayer-video-player .artplayer-subtitle p{margin:5px 0} .artplayer-video-player .artplayer-video{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;width:100%;height:100%;background-color:#000;outline:0;cursor:pointer} +.artplayer-video-player .artplayer-subtitle{position:absolute;z-index:20;bottom:40px;width:100%;padding:0 20px;text-align:center;color:#fff;text-shadow:.5px .5px .5px rgba(0,0,0,.5);font-size:20px;pointer-events:none}.artplayer-video-player .artplayer-subtitle p{margin:5px 0} +.artplayer-video-player .artplayer-layers{position:absolute;z-index:40;left:0;top:0;right:0;bottom:0;width:100%;height:100%;pointer-events:none}.artplayer-video-player .artplayer-layers .art-layer{position:absolute;pointer-events:all} .artplayer-video-player .artplayer-danmu{position:absolute;z-index:30;left:0;top:0;right:0;bottom:0;width:100%;height:100%;pointer-events:none} .artplayer-video-player .artplayer-mask{display:none;position:absolute;z-index:50;left:0;top:0;right:0;bottom:0;width:100%;height:100%;pointer-events:none}.artplayer-video-player .artplayer-mask .art-icon-playBig{position:absolute;right:30px;bottom:65px;opacity:.6} -.artplayer-video-player .artplayer-layers{position:absolute;z-index:40;left:0;top:0;right:0;bottom:0;width:100%;height:100%;pointer-events:none}.artplayer-video-player .artplayer-layers .art-layer{position:absolute;pointer-events:all} .artplayer-video-player .artplayer-loading{display:none;position:absolute;z-index:70;left:0;top:0;right:0;bottom:0;width:100%;height:100%;align-items:center;justify-content:center;pointer-events:none} -.artplayer-video-player .artplayer-notice{display:none;font-size:14px;position:absolute;z-index:80;left:0;top:0;padding:10px;width:100%;pointer-events:none}.artplayer-video-player .artplayer-notice .artplayer-notice-inner{display:inline-block;padding:5px 10px;color:#fff;background:rgba(0,0,0,.6);border-radius:3px} .artplayer-video-player .artplayer-bottom{position:absolute;z-index:60;left:0;right:0;bottom:0;height:100px;padding:60px 10px 0;opacity:0;visibility:hidden;transition:all .2s ease-in-out;pointer-events:none;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom}.artplayer-video-player .artplayer-bottom .artplayer-progress{position:relative;pointer-events:all}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress{position:relative;height:5px;padding:1px 0;cursor:pointer}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner{position:relative;height:100%;background:hsla(0,0%,100%,.2)}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-loaded{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;height:100%;width:0;background:hsla(0,0%,100%,.4)}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-played{position:absolute;z-index:20;left:0;top:0;right:0;bottom:0;height:100%;width:0}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-highlight{position:absolute;z-index:30;left:0;top:0;right:0;bottom:0;height:0}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-highlight span{display:inline-block;position:absolute;left:0;top:0;width:7px;height:3px;background:#fff;border-radius:3px}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-indicator{display:none;position:absolute;z-index:40;top:-5px;left:-6.5px;width:13px;height:13px;border-radius:50%}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-indicator.show-indicator{display:block}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress .art-control-progress-inner .art-progress-tip{display:none;position:absolute;z-index:50;top:-25px;left:0;height:20px;padding:0 5px;line-height:20px;color:#fff;font-size:12px;text-align:center;background:rgba(0,0,0,.7);border-radius:3px;font-weight:700}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress:hover .art-progress-indicator,.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-progress:hover .art-progress-tip{display:block}.artplayer-video-player .artplayer-bottom .artplayer-progress .art-control-thumbnails{display:none;position:absolute;bottom:8px;left:0;pointer-events:none;background-color:rgba(0,0,0,.7)}.artplayer-video-player .artplayer-bottom .artplayer-controls{position:relative;pointer-events:all;display:flex;align-items:center;justify-content:space-between;height:36px}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control{opacity:.9;float:left;font-size:12px;height:36px;line-height:36px;cursor:pointer}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control .art-icon{display:flex;align-items:center;justify-content:center;float:left;height:36px;width:36px;padding:7px}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control:hover{opacity:1}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel{position:relative;float:left;width:0;height:100%;transition:margin .2s cubic-bezier(.4,0,1,1),width .2s cubic-bezier(.4,0,1,1);overflow:hidden}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle{position:absolute;top:50%;left:0;width:12px;height:12px;border-radius:12px;margin-top:-6px;background:#fff}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:before{left:-54px;background:#fff}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:after{left:6px;background:hsla(0,0%,100%,.2)}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:after,.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel .art-volume-slider-handle:before{content:"";position:absolute;display:block;top:50%;height:3px;margin-top:-2px;width:60px}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-volume .art-volume-panel.art-volume-panel-hover{width:60px}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-time{padding:0 10px}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-quality{position:relative;z-index:30;padding:0 10px}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-quality .art-qualitys{display:none;position:absolute;left:-15px;bottom:35px;width:100px;padding:5px 0;text-align:center;color:#fff;background:rgba(0,0,0,.7);border-radius:3px}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-quality .art-qualitys .art-quality-item{height:30px;line-height:30px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 0 2px rgba(0,0,0,.5)}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-quality .art-qualitys .art-quality-item:hover{background-color:hsla(0,0%,100%,.1)}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control-quality.hover .art-qualitys{display:block}.artplayer-video-player.artplayer-controls-show .artplayer-bottom,.artplayer-video-player.artplayer-hover .artplayer-bottom{opacity:1;visibility:visible}.artplayer-video-player.artplayer-destroy .art-progress-indicator,.artplayer-video-player.artplayer-destroy .art-progress-tip,.artplayer-video-player.artplayer-error .art-progress-indicator,.artplayer-video-player.artplayer-error .art-progress-tip{display:none!important} -.artplayer-video-player .artplayer-contextmenu{position:absolute;z-index:100;left:0;top:0;min-width:200px;padding:5px 0;background:rgba(0,0,0,.8);border-radius:3px}.artplayer-video-player .artplayer-contextmenu .art-menu{cursor:pointer;font-size:13px;display:block;color:#fff;padding:7px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 0 2px rgba(0,0,0,.5);border-bottom:1px solid hsla(0,0%,100%,.1)}.artplayer-video-player .artplayer-contextmenu .art-menu a{color:#fff;text-decoration:none}.artplayer-video-player .artplayer-contextmenu .art-menu span{display:inline-block;padding:0 7px}.artplayer-video-player .artplayer-contextmenu .art-menu span.current,.artplayer-video-player .artplayer-contextmenu .art-menu span:hover{color:#00c9ff}.artplayer-video-player .artplayer-contextmenu .art-menu:hover{background-color:hsla(0,0%,100%,.1)}.artplayer-video-player .artplayer-contextmenu .art-menu:last-child{border-bottom:none} -.artplayer-video-player .artplayer-info{display:none;position:absolute;left:10px;top:10px;z-index:100;width:350px;min-height:150px;padding:10px;color:#fff;font-size:12px;font-family:Noto Sans CJK SC DemiLight,Roboto,Segoe UI,Tahoma,Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;background:rgba(0,0,0,.7)}.artplayer-video-player .artplayer-info .art-info-item{display:flex;margin-bottom:5px}.artplayer-video-player .artplayer-info .art-info-item .art-info-title{width:100px;text-align:right}.artplayer-video-player .artplayer-info .art-info-item .art-info-content{flex:1;padding-left:5px}.artplayer-video-player .artplayer-info .artplayer-info-close{position:absolute;top:5px;right:5px;cursor:pointer} +.artplayer-video-player .artplayer-notice{display:none;font-size:14px;position:absolute;z-index:80;left:0;top:0;padding:10px;width:100%;pointer-events:none}.artplayer-video-player .artplayer-notice .artplayer-notice-inner{display:inline-block;padding:5px 10px;color:#fff;background:rgba(0,0,0,.6);border-radius:3px} +.artplayer-video-player .artplayer-contextmenu{position:absolute;z-index:110;left:0;top:0;min-width:200px;padding:5px 0;background:rgba(0,0,0,.8);border-radius:3px}.artplayer-video-player .artplayer-contextmenu .art-menu{cursor:pointer;font-size:13px;display:block;color:#fff;padding:7px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 0 2px rgba(0,0,0,.5);border-bottom:1px solid hsla(0,0%,100%,.1)}.artplayer-video-player .artplayer-contextmenu .art-menu a{color:#fff;text-decoration:none}.artplayer-video-player .artplayer-contextmenu .art-menu span{display:inline-block;padding:0 7px}.artplayer-video-player .artplayer-contextmenu .art-menu span.current,.artplayer-video-player .artplayer-contextmenu .art-menu span:hover{color:#00c9ff}.artplayer-video-player .artplayer-contextmenu .art-menu:hover{background-color:hsla(0,0%,100%,.1)}.artplayer-video-player .artplayer-contextmenu .art-menu:last-child{border-bottom:none} .artplayer-video-player .artplayer-setting{display:none;position:absolute;z-index:90;left:0;top:0;height:100%;width:100%;align-items:center;justify-content:center;pointer-events:none}.artplayer-video-player .artplayer-setting .artplayer-setting-inner{position:relative;width:350px;height:250px;font-size:12px;background:rgba(0,0,0,.8);border-radius:3px;pointer-events:all;overflow:hidden}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body{overflow-x:hidden;overflow-y:auto;width:365px;height:100%}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting{border-bottom:1px solid hsla(0,0%,100%,.1);padding:12px 35px 12px 20px}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting .art-setting-header{color:#fff;margin-bottom:10px}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-body .art-setting .art-setting-body{color:hsla(0,0%,100%,.8)}.artplayer-video-player .artplayer-setting .artplayer-setting-inner .artplayer-setting-close{position:absolute;top:0;right:0;width:20px;height:20px;line-height:20px;text-align:center;color:hsla(0,0%,100%,.8);background:rgba(0,0,0,.5);font-size:20px;cursor:pointer} +.artplayer-video-player .artplayer-info{display:none;position:absolute;left:10px;top:10px;z-index:100;width:350px;min-height:150px;padding:10px;color:#fff;font-size:12px;font-family:Noto Sans CJK SC DemiLight,Roboto,Segoe UI,Tahoma,Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;background:rgba(0,0,0,.7)}.artplayer-video-player .artplayer-info .art-info-item{display:flex;margin-bottom:5px}.artplayer-video-player .artplayer-info .art-info-item .art-info-title{width:100px;text-align:right}.artplayer-video-player .artplayer-info .art-info-item .art-info-content{flex:1;padding-left:5px}.artplayer-video-player .artplayer-info .artplayer-info-close{position:absolute;top:5px;right:5px;cursor:pointer} .artplayer-video-player.artplayer-hide-cursor *{cursor:none!important} .artplayer-video-player[data-aspect-ratio] video{box-sizing:content-box;-o-object-fit:fill;object-fit:fill} .artplayer-video-player.artplayer-web-fullscreen{position:fixed;z-index:9999;width:100%;height:100%;left:0;top:0;right:0;bottom:0} +.artplayer-video-player .artplayer-pip-header{display:none;position:absolute;z-index:120;left:0;top:0;right:0;height:35px;line-height:35px;color:#fff;background:rgba(0,0,0,.5);align-items:center;justify-content:space-between}.artplayer-video-player .artplayer-pip-header .artplayer-pip-title{flex:1;padding:0 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.artplayer-video-player .artplayer-pip-header .artplayer-pip-close{width:35px;text-align:center;font-size:22px;cursor:pointer}.artplayer-video-player.is-dragging{opacity:.7}.artplayer-video-player.artplayer-pip{position:fixed;right:20px;bottom:20px;width:400px;height:225px;box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 3px 6px 0 rgba(0,0,0,.2)}.artplayer-video-player.artplayer-pip .artplayer-pip-header{display:flex}.artplayer-video-player.artplayer-pip .artplayer-mask{align-items:center;justify-content:center}.artplayer-video-player.artplayer-pip .artplayer-mask .art-icon-playBig{position:static}.artplayer-video-player.artplayer-pip .artplayer-bottom,.artplayer-video-player.artplayer-pip .artplayer-contextmenu,.artplayer-video-player.artplayer-pip .artplayer-danmu,.artplayer-video-player.artplayer-pip .artplayer-info,.artplayer-video-player.artplayer-pip .artplayer-layers,.artplayer-video-player.artplayer-pip .artplayer-notice,.artplayer-video-player.artplayer-pip .artplayer-setting,.artplayer-video-player.artplayer-pip .artplayer-subtitle{display:none!important} button[data-balloon]{overflow:visible}[data-balloon]{position:relative;cursor:pointer}[data-balloon]:after{font-family:sans-serif!important;font-weight:400!important;font-style:normal!important;text-shadow:none!important;font-size:12px!important;background:rgba(17,17,17,.9);border-radius:4px;color:#fff;content:attr(data-balloon);padding:.5em 1em;white-space:nowrap}[data-balloon]:after,[data-balloon]:before{filter:alpha(opactiy=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";-moz-opacity:0;-khtml-opacity:0;opacity:0;pointer-events:none;transition:all .18s ease-out .18s;position:absolute;z-index:10}[data-balloon]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17,17,17,0.9)' d='M2.658 0h32.004c-6 0-11.627 12.002-16.002 12.002C14.285 12.002 8.594 0 2.658 0z'/%3E%3C/svg%3E");background-size:100% auto;width:18px;height:6px;content:""}[data-balloon]:hover:after,[data-balloon]:hover:before,[data-balloon][data-balloon-visible]:after,[data-balloon][data-balloon-visible]:before{filter:alpha(opactiy=100);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";-moz-opacity:1;-khtml-opacity:1;opacity:1;pointer-events:auto}[data-balloon].font-awesome:after{font-family:FontAwesome}[data-balloon][data-balloon-break]:after{white-space:pre}[data-balloon][data-balloon-blunt]:after,[data-balloon][data-balloon-blunt]:before{transition:none}[data-balloon][data-balloon-pos=up]:after{margin-bottom:11px}[data-balloon][data-balloon-pos=up]:after,[data-balloon][data-balloon-pos=up]:before{bottom:100%;left:50%;-webkit-transform:translate(-50%,10px);transform:translate(-50%,10px);-webkit-transform-origin:top;transform-origin:top}[data-balloon][data-balloon-pos=up]:before{margin-bottom:5px}[data-balloon][data-balloon-pos=up]:hover:after,[data-balloon][data-balloon-pos=up]:hover:before,[data-balloon][data-balloon-pos=up][data-balloon-visible]:after,[data-balloon][data-balloon-pos=up][data-balloon-visible]:before{-webkit-transform:translate(-50%);transform:translate(-50%)}[data-balloon][data-balloon-pos=up-left]:after{left:0;margin-bottom:11px}[data-balloon][data-balloon-pos=up-left]:after,[data-balloon][data-balloon-pos=up-left]:before{bottom:100%;-webkit-transform:translateY(10px);transform:translateY(10px);-webkit-transform-origin:top;transform-origin:top}[data-balloon][data-balloon-pos=up-left]:before{left:5px;margin-bottom:5px}[data-balloon][data-balloon-pos=up-left]:hover:after,[data-balloon][data-balloon-pos=up-left]:hover:before,[data-balloon][data-balloon-pos=up-left][data-balloon-visible]:after,[data-balloon][data-balloon-pos=up-left][data-balloon-visible]:before{-webkit-transform:translate(0);transform:translate(0)}[data-balloon][data-balloon-pos=up-right]:after{right:0;margin-bottom:11px}[data-balloon][data-balloon-pos=up-right]:after,[data-balloon][data-balloon-pos=up-right]:before{bottom:100%;-webkit-transform:translateY(10px);transform:translateY(10px);-webkit-transform-origin:top;transform-origin:top}[data-balloon][data-balloon-pos=up-right]:before{right:5px;margin-bottom:5px}[data-balloon][data-balloon-pos=up-right]:hover:after,[data-balloon][data-balloon-pos=up-right]:hover:before,[data-balloon][data-balloon-pos=up-right][data-balloon-visible]:after,[data-balloon][data-balloon-pos=up-right][data-balloon-visible]:before{-webkit-transform:translate(0);transform:translate(0)}[data-balloon][data-balloon-pos=down]:after{margin-top:11px}[data-balloon][data-balloon-pos=down]:after,[data-balloon][data-balloon-pos=down]:before{left:50%;top:100%;-webkit-transform:translate(-50%,-10px);transform:translate(-50%,-10px)}[data-balloon][data-balloon-pos=down]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17,17,17,0.9)' d='M33.342 12H1.338c6 0 11.627-12.002 16.002-12.002C21.715-.002 27.406 12 33.342 12z'/%3E%3C/svg%3E");background-size:100% auto;width:18px;height:6px;margin-top:5px}[data-balloon][data-balloon-pos=down]:hover:after,[data-balloon][data-balloon-pos=down]:hover:before,[data-balloon][data-balloon-pos=down][data-balloon-visible]:after,[data-balloon][data-balloon-pos=down][data-balloon-visible]:before{-webkit-transform:translate(-50%);transform:translate(-50%)}[data-balloon][data-balloon-pos=down-left]:after{left:0;margin-top:11px;top:100%;-webkit-transform:translateY(-10px);transform:translateY(-10px)}[data-balloon][data-balloon-pos=down-left]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17,17,17,0.9)' d='M33.342 12H1.338c6 0 11.627-12.002 16.002-12.002C21.715-.002 27.406 12 33.342 12z'/%3E%3C/svg%3E");background-size:100% auto;width:18px;height:6px;left:5px;margin-top:5px;top:100%;-webkit-transform:translateY(-10px);transform:translateY(-10px)}[data-balloon][data-balloon-pos=down-left]:hover:after,[data-balloon][data-balloon-pos=down-left]:hover:before,[data-balloon][data-balloon-pos=down-left][data-balloon-visible]:after,[data-balloon][data-balloon-pos=down-left][data-balloon-visible]:before{-webkit-transform:translate(0);transform:translate(0)}[data-balloon][data-balloon-pos=down-right]:after{right:0;margin-top:11px;top:100%;-webkit-transform:translateY(-10px);transform:translateY(-10px)}[data-balloon][data-balloon-pos=down-right]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17,17,17,0.9)' d='M33.342 12H1.338c6 0 11.627-12.002 16.002-12.002C21.715-.002 27.406 12 33.342 12z'/%3E%3C/svg%3E");background-size:100% auto;width:18px;height:6px;right:5px;margin-top:5px;top:100%;-webkit-transform:translateY(-10px);transform:translateY(-10px)}[data-balloon][data-balloon-pos=down-right]:hover:after,[data-balloon][data-balloon-pos=down-right]:hover:before,[data-balloon][data-balloon-pos=down-right][data-balloon-visible]:after,[data-balloon][data-balloon-pos=down-right][data-balloon-visible]:before{-webkit-transform:translate(0);transform:translate(0)}[data-balloon][data-balloon-pos=left]:after{margin-right:11px;right:100%;top:50%;-webkit-transform:translate(10px,-50%);transform:translate(10px,-50%)}[data-balloon][data-balloon-pos=left]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='36'%3E%3Cpath fill='rgba(17,17,17,0.9)' d='M0 33.342V1.338c0 6 12.002 11.627 12.002 16.002C12.002 21.715 0 27.406 0 33.342z'/%3E%3C/svg%3E");background-size:100% auto;width:6px;height:18px;margin-right:5px;right:100%;top:50%;-webkit-transform:translate(10px,-50%);transform:translate(10px,-50%)}[data-balloon][data-balloon-pos=left]:hover:after,[data-balloon][data-balloon-pos=left]:hover:before,[data-balloon][data-balloon-pos=left][data-balloon-visible]:after,[data-balloon][data-balloon-pos=left][data-balloon-visible]:before{-webkit-transform:translateY(-50%);transform:translateY(-50%)}[data-balloon][data-balloon-pos=right]:after{left:100%;margin-left:11px;top:50%;-webkit-transform:translate(-10px,-50%);transform:translate(-10px,-50%)}[data-balloon][data-balloon-pos=right]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='36'%3E%3Cpath fill='rgba(17,17,17,0.9)' d='M12 2.658v32.004c0-6-12.002-11.627-12.002-16.002C-.002 14.285 12 8.594 12 2.658z'/%3E%3C/svg%3E");background-size:100% auto;width:6px;height:18px;left:100%;margin-left:5px;top:50%;-webkit-transform:translate(-10px,-50%);transform:translate(-10px,-50%)}[data-balloon][data-balloon-pos=right]:hover:after,[data-balloon][data-balloon-pos=right]:hover:before,[data-balloon][data-balloon-pos=right][data-balloon-visible]:after,[data-balloon][data-balloon-pos=right][data-balloon-visible]:before{-webkit-transform:translateY(-50%);transform:translateY(-50%)}[data-balloon][data-balloon-length=small]:after{white-space:normal;width:80px}[data-balloon][data-balloon-length=medium]:after{white-space:normal;width:150px}[data-balloon][data-balloon-length=large]:after{white-space:normal;width:260px}[data-balloon][data-balloon-length=xlarge]:after{white-space:normal;width:380px}@media screen and (max-width:768px){[data-balloon][data-balloon-length=xlarge]:after{white-space:normal;width:90vw}}[data-balloon][data-balloon-length=fit]:after{white-space:normal;width:100%} \ No newline at end of file diff --git a/dist/artplayer.js b/dist/artplayer.js index 14dc65ab2..a296d282b 100644 --- a/dist/artplayer.js +++ b/dist/artplayer.js @@ -1 +1,8 @@ -!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e(t.artplayer={})}(this,function(t){"use strict";"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;function e(t,e){return t(e={exports:{}},e.exports),e.exports}var o=e(function(n){function i(t,e){return n.exports=i=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t},i(t,e)}n.exports=i}),r=e(function(i){function r(t,e,n){return!function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(t){return!1}}()?i.exports=r=function(t,e,n){var i=[null];i.push.apply(i,e);var r=new(Function.bind.apply(t,i));return n&&o(r,n.prototype),r}:i.exports=r=Reflect.construct,r.apply(null,arguments)}i.exports=r});var n=function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e\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
[x]
\n
\n \n ',n.$player=n.$container.querySelector(".artplayer-video-player"),n.$video=n.$container.querySelector(".artplayer-video"),n.$subtitle=n.$container.querySelector(".artplayer-subtitle"),n.$bottom=n.$container.querySelector(".artplayer-bottom"),n.$progress=n.$container.querySelector(".artplayer-progress"),n.$controls=n.$container.querySelector(".artplayer-controls"),n.$controlsLeft=n.$container.querySelector(".artplayer-controls-left"),n.$controlsRight=n.$container.querySelector(".artplayer-controls-right"),n.$layers=n.$container.querySelector(".artplayer-layers"),n.$danmu=n.$container.querySelector(".artplayer-danmu"),n.$loading=n.$container.querySelector(".artplayer-loading"),n.$notice=n.$container.querySelector(".artplayer-notice"),n.$noticeInner=n.$container.querySelector(".artplayer-notice-inner"),n.$mask=n.$container.querySelector(".artplayer-mask"),n.$setting=n.$container.querySelector(".artplayer-setting"),n.$settingInner=n.$container.querySelector(".artplayer-setting-inner"),n.$settingBody=n.$container.querySelector(".artplayer-setting-body"),n.$settingClose=n.$container.querySelector(".artplayer-setting-close"),n.$info=n.$container.querySelector(".artplayer-info"),n.$infoPanel=n.$container.querySelector(".artplayer-info-panel"),n.$infoClose=n.$container.querySelector(".artplayer-info-close")},A={"zh-cn":{"About author":"关于作者","Video info":"视频统计信息",Close:"关闭","Video load failed":"视频加载失败",Volume:"音量",Play:"播放",Pause:"暂停",Rate:"速度",Mute:"静音",Reconnect:"重新连接","Hide subtitle":"隐藏字幕","Show subtitle":"显示字幕","Hide danmu":"隐藏弹幕","Show danmu":"显示弹幕",Screenshot:"截图","Play speed":"播放速度","Aspect ratio":"画面比例",Default:"默认",Normal:"正常","Switch video":"切换","Switch subtitle":"切换字幕",Fullscreen:"全屏","Exit fullscreen":"退出全屏","Web fullscreen":"网页全屏","Exit web fullscreen":"退出网页全屏",Common:"常规","Hide setting":"隐藏设置","Show setting":"显示设置"},"zh-tw":{"About author":"關於作者","Video info":"影片統計訊息",Close:"關閉","Video load failed":"影片載入失敗",Volume:"音量",Play:"播放",Pause:"暫停",Rate:"速度",Mute:"靜音",Reconnect:"重新連接","Hide subtitle":"隱藏字幕","Show subtitle":"顯示字幕","Hide danmu":"隱藏彈幕","Show danmu":"顯示彈幕",Screenshot:"截圖","Play speed":"播放速度","Aspect ratio":"畫面比例",Default:"默認",Normal:"正常","Switch video":"切換","Switch subtitle":"切換字幕",Fullscreen:"全屏","Exit fullscreen":"退出全屏","Web fullscreen":"網頁全屏","Exit web fullscreen":"退出網頁全屏",Common:"常規","Hide setting":"隱藏設置","Show setting":"顯示設置"}},M=function(){function n(t){var e=t.option;R(this,n),this.option=e,this.init()}return c(n,[{key:"init",value:function(){this.language=A[this.option.lang.toLowerCase()]||{}}},{key:"get",value:function(t){return this.language[t]||t}},{key:"update",value:function(t){A=t(A),this.init()}}]),n}();function V(s,t){Object.defineProperty(t,"volume",{value:function(t){var e,n,i,r=s.refs.$video,o=s.i18n,a=s.notice;return void 0!==t&&(r.volume=j(t,0,1),a.show("".concat(o.get("Volume"),": ").concat(parseInt(100*r.volume))),0!==r.volume&&(e="volume",n=r.volume,i=Object.assign({},x(),v({},e,n)),localStorage.setItem("artplayer_settings",JSON.stringify(i))),s.emit("volume",r.volume)),r.volume||0}})}var O=function t(e){var n,i,r,o,a,s,c,l,u,d,h,f,p,v,y,m,g,b,w,$,x,k,S,E,C,L,T,P,A,M,O;R(this,t),this.reconnectTime=0,this.maxReconnectTime=5,i=(n=e).option,r=n.refs.$video,Object.keys(i.moreVideoAttr).forEach(function(t){r[t]=i.moreVideoAttr[t]}),r.volume=j(i.volume,0,1),r.poster=i.poster,r.autoplay=i.autoplay,r.src=i.url,a=this,s=(o=e).option,c=o.events.proxy,l=o.refs,u=l.$player,d=l.$video,h=o.i18n,f=o.notice,p=!1,c(d,"click",function(){a.toggle()}),z.video.events.forEach(function(t){c(d,t,function(t){o.emit("video:".concat(t.type),t)})}),o.on("video:loadstart",function(){o.loading.show()}),o.on("video:loadeddata",function(){o.loading.hide()}),o.on("video:waiting",function(){o.loading.show()}),o.on("video:seeking",function(){o.loading.show()}),o.on("video:canplay",function(){p||(p=!0,o.emit("firstCanplay")),o.controls.show(),o.mask.show(),o.loading.hide(),s.autoplay&&a.play()}),o.on("video:playing",function(){o.isPlaying=!0,o.controls.hide(),o.mask.hide()}),o.on("video:pause",function(){o.isPlaying=!1,o.controls.show(),o.mask.show()}),o.on("video:ended",function(){o.isPlaying=!1,o.controls.show(),o.mask.show(),s.loop&&(a.seek(0),a.play())}),o.on("video:error",function(){a.reconnectTime\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',playBig:'\n \n \n \n \n',play:'\n \n',pause:'\n \n',volume:'\n \n',volumeClose:'\n \n \n',subtitle:'\n \n \n',screenshot:'\n\t\n\t\t\n\t\n\n',danmu:'\r\n\t\r\n\r\n',setting:'\n \n \n',fullscreen:'\r\n\r\n\t\r\n\t\t\r\n\t\r\n\r\n\r\n\t\r\n\t\t\r\n\t\r\n\r\n\r\n\t\r\n\t\t\r\n\t\r\n\r\n\r\n\t\r\n\t\t\r\n\t\r\n\r\n\r\n',fullscreenWeb:'\r\n\t\r\n\t\r\n\t\r\n\t\r\n\t\r\n\r\n'},U={},Object.keys(N).forEach(function(t){var e=document.createElement("div");e.innerHTML='').concat(N[t],"");var n=D(e.childNodes,1);U[t]=n[0]}),U),Z=function(){function e(t){R(this,e),this.option=t}return c(e,[{key:"apply",value:function(t,e){var n=this,i=t.events.proxy,r=t.i18n,o=t.danmu;this.$danmu=w(e,Y.danmu),k(this.$danmu,r.get("Hide danmu")),i(e,"click",function(){o.isOpen?(o.hide(),H(n.$danmu,"opacity","1"),k(n.$danmu,r.get("Show danmu"))):(o.show(),H(n.$danmu,"opacity","0.8"),k(n.$danmu,r.get("Hide danmu")))})}}]),e}(),G=e(function(t){var o,e,n,i,r,a;o="undefined"!=typeof window&&void 0!==window.document?window.document:{},e=t.exports,n="undefined"!=typeof Element&&"ALLOW_KEYBOARD_INPUT"in Element,i=function(){for(var t,e=[["requestFullscreen","exitFullscreen","fullscreenElement","fullscreenEnabled","fullscreenchange","fullscreenerror"],["webkitRequestFullscreen","webkitExitFullscreen","webkitFullscreenElement","webkitFullscreenEnabled","webkitfullscreenchange","webkitfullscreenerror"],["webkitRequestFullScreen","webkitCancelFullScreen","webkitCurrentFullScreenElement","webkitCancelFullScreen","webkitfullscreenchange","webkitfullscreenerror"],["mozRequestFullScreen","mozCancelFullScreen","mozFullScreenElement","mozFullScreenEnabled","mozfullscreenchange","mozfullscreenerror"],["msRequestFullscreen","msExitFullscreen","msFullscreenElement","msFullscreenEnabled","MSFullscreenChange","MSFullscreenError"]],n=0,i=e.length,r={};n\n
\n
\n
\n
\n
\n \n ')),this.$loaded=e.querySelector(".art-progress-loaded"),this.$played=e.querySelector(".art-progress-played"),this.$highlight=e.querySelector(".art-progress-highlight"),this.$indicator=e.querySelector(".art-progress-indicator"),this.$tip=e.querySelector(".art-progress-tip"),this.set("loaded",this.getLoaded()),i.forEach(function(t){var e=Number(t.time)/s.duration;w(r.$highlight,''))}),this.art.on("video:progress",function(){r.set("loaded",r.getLoaded())}),this.art.on("video:timeupdate",function(){r.set("played",r.getPlayed())}),this.art.on("video:ended",function(){r.set("played",1)}),a(e,"mousemove",function(t){H(r.$tip,"display","block"),-1this.$control.clientWidth-r/2?H(this.$tip,"left","".concat(this.$control.clientWidth-r,"px")):H(this.$tip,"left","".concat(n-r/2,"px"))}},{key:"getPlayed",value:function(){var t=this.art.refs.$video;return t.currentTime/t.duration}},{key:"getLoaded",value:function(){var t=this.art.refs.$video;return t.buffered.length?t.buffered.end(t.buffered.length-1)/t.duration:0}},{key:"getPosFromEvent",value:function(t){var e=this.art.refs,n=e.$video,i=e.$progress,r=i.getBoundingClientRect().left,o=j(t.x-r,0,i.clientWidth),a=o/i.clientWidth*n.duration;return{second:a,time:q(a),width:o,percentage:j(o/i.clientWidth,0,1)}}},{key:"set",value:function(t,e){H(this["$".concat(t)],"width","".concat(100*e,"%")),"played"===t&&H(this.$indicator,"left","calc(".concat(100*e,"% - 6.5px)"))}}]),e}(),et=function(){function e(t){R(this,e),this.option=t}return c(e,[{key:"apply",value:function(t,e){var n=this,i=t.events.proxy,r=t.i18n,o=t.subtitle;this.$subtitle=w(e,Y.subtitle),k(this.$subtitle,r.get("Hide subtitle")),i(e,"click",function(){o.isOpen?(o.hide(),H(n.$subtitle,"opacity","1"),k(n.$subtitle,r.get("Show subtitle")),t.emit("subtitle:hide")):(o.show(),H(n.$subtitle,"opacity","0.8"),k(n.$subtitle,r.get("Hide subtitle")),t.emit("subtitle:show"))})}}]),e}(),nt=function(){function e(t){R(this,e),this.option=t}return c(e,[{key:"apply",value:function(t,e){var n=this;this.art=t,(this.$control=e).innerHTML="00:00 / 00:00",this.art.on("video:canplay",function(){n.getTime()}),this.art.on("video:timeupdate",function(){n.getTime()}),this.art.on("video:seeking",function(){n.getTime()})}},{key:"getTime",value:function(){var t=this.art.player;this.$control.innerHTML="".concat(q(t.currentTime())," / ").concat(q(t.duration()))}}]),e}(),it=function(){function e(t){R(this,e),this.option=t,this.isDroging=!1}return c(e,[{key:"apply",value:function(t,e){this.art=t,this.$control=e,this.init()}},{key:"init",value:function(){var e=this,t=this.art,n=t.events.proxy,i=t.player,r=t.i18n;this.$volume=w(this.$control,Y.volume),this.$volumeClose=w(this.$control,Y.volumeClose),this.$volumePanel=w(this.$control,'
'),this.$volumeHandle=w(this.$volumePanel,'
'),k(this.$volume,r.get("Mute")),H(this.$volumeClose,"display","none");var o=x("volume");this.setVolumeHandle(o),i.volume(o),n(this.$volume,"click",function(){H(e.$volume,"display","none"),H(e.$volumeClose,"display","block"),i.volume(0)}),n(this.$volumeClose,"click",function(){H(e.$volume,"display","block"),H(e.$volumeClose,"display","none"),i.volume(x("volume"))}),n(this.$control,"mouseenter",function(){e.$volumePanel.classList.add("art-volume-panel-hover"),setTimeout(function(){e.setVolumeHandle(i.volume())},200)}),n(this.$control,"mouseleave",function(){e.$volumePanel.classList.remove("art-volume-panel-hover")}),n(this.$volumePanel,"click",function(t){e.volumeChangeFromEvent(t)}),n(this.$volumeHandle,"mousedown",function(){e.isDroging=!0}),n(this.$volumeHandle,"mousemove",function(t){e.isDroging&&e.volumeChangeFromEvent(t)}),n(document,"mouseup",function(){e.isDroging&&(e.isDroging=!1)}),this.art.on("video:volumechange",function(){var t=i.volume();e.setVolumeHandle(t),0===t?(H(e.$volume,"display","none"),H(e.$volumeClose,"display","block")):(H(e.$volume,"display","block"),H(e.$volumeClose,"display","none"))})}},{key:"volumeChangeFromEvent",value:function(t){var e=this.art.player,n=this.$volumePanel.getBoundingClientRect(),i=n.left,r=n.width,o=this.$volumeHandle.getBoundingClientRect().width,a=j(t.x-i-o/2,0,r-o/2)/(r-o);e.volume(a)}},{key:"setVolumeHandle",value:function(){var t=0n.clientWidth-s/2?H(this.$control,"left","".concat(n.clientWidth-s,"px")):H(this.$control,"left","".concat(i-s/2,"px"))}}]),e}(),at=function(){function e(t){R(this,e),this.option=t}return c(e,[{key:"apply",value:function(t,e){var n=this;this.art=t;var i=this.art,r=i.events.proxy,o=i.i18n,a=i.notice;this.$screenshot=w(e,Y.screenshot),k(this.$screenshot,o.get("Screenshot")),r(this.$screenshot,"click",function(){try{n.captureFrame(),t.emit("screenshot")}catch(t){a.show(t)}})}},{key:"captureFrame",value:function(){var t=this.art.refs.$video,e=document.createElement("canvas");e.width=t.videoWidth,e.height=t.videoHeight,e.getContext("2d").drawImage(t,0,0);var n=e.toDataURL("image/png"),i=document.createElement("a");H(i,"display","none"),i.href=n,i.download="ArtPlayer_".concat(q(t.currentTime),".png"),document.body.appendChild(i),i.click(),document.body.removeChild(i)}}]),e}(),st=function(){function e(t){R(this,e),this.option=t,this.playIndex=-1}return c(e,[{key:"apply",value:function(t,e){var o=this,a=t.option,n=t.events,i=n.proxy,r=n.hover,s=t.player,c=a.quality.find(function(t){return t.default})||a.quality[0];this.playIndex=a.quality.indexOf(c);var l=w(e,'
'.concat(c.name,"
")),u=a.quality.map(function(t,e){return'
').concat(t.name,"
")}).join(""),d=w(e,'
'.concat(u,"
"));r(e,function(){e.classList.add("hover")},function(){e.classList.remove("hover")}),i(d,"click",function(t){var e=Number(t.target.dataset.index),n=a.quality[e],i=n.url,r=n.name;i&&r&&o.playIndex!==e&&(s.switch(i,r),l.innerHTML=r,o.playIndex=e)})}}]),e}(),ct=0,lt=function(){function n(t){var e=this;R(this,n),this.art=t,this.$map={},this.art.on("firstCanplay",function(){e.init(),e.mount()})}return c(n,[{key:"init",value:function(){var e=this;this.add(new tt({name:"progress",disable:!1,position:"top",index:10})),this.add(new ot({name:"thumbnails",disable:!this.art.option.thumbnails.url,position:"top",index:20})),this.add(new Q({name:"playAndPause",disable:!1,position:"left",index:10})),this.add(new it({name:"volume",disable:!1,position:"left",index:20})),this.add(new nt({name:"time",disable:!1,position:"left",index:30})),this.add(new st({name:"quality",disable:0===this.art.option.quality.length,position:"right",index:10})),this.add(new Z({name:"danmu",disable:!1,position:"right",index:20})),this.add(new at({name:"screenshot",disable:!this.art.option.screenshot,position:"right",index:30})),this.add(new et({name:"subtitle",disable:!this.art.option.subtitle.url,position:"right",index:40})),this.add(new rt({name:"setting",disable:!this.art.option.setting,position:"right",index:50})),this.add(new X({name:"pip",disable:!this.art.option.pip,position:"right",index:60})),this.add(new K({name:"fullscreenWeb",disable:!this.art.option.fullscreenWeb,position:"right",index:70})),this.add(new J({name:"fullscreen",disable:!this.art.option.fullscreen,position:"right",index:80})),this.art.option.controls.forEach(function(t){e.add(t)})}},{key:"add",value:function(t){var e=t.option;if(e&&!e.disable){ct++;var n=e.name||t.constructor.name.toLowerCase()||"control".concat(ct),i=document.createElement("div");i.setAttribute("class","art-control art-control-".concat(n)),i.dataset.controlIndex=e.index||ct,this.commonMethod(t),(this.$map[e.position]||(this.$map[e.position]=[])).push(i),t.apply&&t.apply(this.art,i),this[n]=t}}},{key:"mount",value:function(){var t=this,e=this.art.refs,n=e.$progress,i=e.$controlsLeft,r=e.$controlsRight;Object.keys(this.$map).forEach(function(e){t.$map[e].sort(function(t,e){return Number(t.dataset.controlIndex)-Number(e.dataset.controlIndex)}).forEach(function(t){switch(e){case"top":w(n,t);break;case"left":w(i,t);break;case"right":w(r,t)}})})}},{key:"commonMethod",value:function(t){var e=this;Object.defineProperty(t,"hide",{value:function(){H(t.option.$control,"display","none"),e.art.emit("control:hide",t.option.$control)}}),Object.defineProperty(t,"show",{value:function(){H(t.option.$control,"display","block"),e.art.emit("control:show",t.option.$control)}})}},{key:"show",value:function(){this.art.refs.$player.classList.add("artplayer-controls-show")}},{key:"hide",value:function(){this.art.refs.$player.classList.remove("artplayer-controls-show")}}]),n}();function ut(t){var e=t.option,n=t.i18n,i=t.player,r=t.contextmenu;return{disable:!e.playbackRate,name:"playbackRate",index:10,html:"\n ".concat(n.get("Play speed"),':\n 0.5\n 0.75\n ').concat(n.get("Normal"),'\n 1.25\n 1.5\n 2.0\n '),click:function(t){var e=t.target,n=e.dataset.rate;n&&(i.playbackRate(Number(n)),F(e).forEach(function(t){return t.classList.remove("current")}),e.classList.add("current"),r.hide())}}}function dt(t){var e=t.option,n=t.i18n,i=t.player,r=t.contextmenu;return{disable:!e.aspectRatio,name:"aspectRatio",index:20,html:"\n ".concat(n.get("Aspect ratio"),':\n ').concat(n.get("Default"),'\n 4:3\n 16:9\n '),click:function(t){var e=t.target,n=e.dataset.ratio;n&&(i.aspectRatio(n.split(":")),F(e).forEach(function(t){return t.classList.remove("current")}),e.classList.add("current"),r.hide())}}}function ht(t){return{disable:!1,name:"info",index:30,html:t.i18n.get("Video info"),click:function(){t.info.show(),t.contextmenu.hide()}}}var ft={disable:!1,name:"version",index:40,html:'ArtPlayer 1.0.0'};function pt(t){return{disable:!1,name:"close",index:50,html:t.i18n.get("Close"),click:function(){t.contextmenu.hide()}}}var vt=0,yt=function(){function e(t){R(this,e),this.art=t,this.init()}return c(e,[{key:"init",value:function(){var e=this,t=this.art,n=t.option,i=t.refs,r=t.events.proxy;n.contextmenu.push(ut,dt,ht,ft,pt),r(i.$player,"contextmenu",function(t){t.preventDefault(),i.$contextmenu||e.creatMenu(),e.show(),e.setPos(t)}),r(i.$player,"click",function(t){i.$contextmenu&&!t.path.includes(i.$contextmenu)&&e.hide()})}},{key:"creatMenu",value:function(){var i=this,t=this.art,e=t.option,n=t.refs,r=t.events.proxy;n.$contextmenu=document.createElement("div"),n.$contextmenu.classList.add("artplayer-contextmenu"),e.contextmenu.filter(function(t){return!t.disable}).map(function(t){vt++;var e="function"==typeof t?t(i.art):t,n=document.createElement("div");return n.dataset.artMenuId=e.index||vt,n.setAttribute("class","art-menu art-menu-".concat(e.name||vt)),w(n,e.html),$(n,e.style||{}),e.click&&r(n,"click",function(t){t.preventDefault(),e.click.call(i,t),i.art.emit("contextmenu:click",n)}),i["$".concat(e.name||vt)]=n}).sort(function(t,e){return Number(t.dataset.artMenuId)-Number(e.dataset.artMenuId)}).forEach(function(t){w(n.$contextmenu,t)}),w(n.$player,n.$contextmenu)}},{key:"setPos",value:function(t){var e=this.art.refs,n=t.clientX,i=t.clientY,r=e.$player.getBoundingClientRect(),o=r.height,a=r.width,s=r.left,c=r.top,l=e.$contextmenu.getBoundingClientRect(),u=l.height,d=l.width,h=n-s,f=i-c;s+a\n
Player version:
\n
1.0.0
\n \n '),t.push('\n
\n
Video url:
\n
\n
\n '),t.push('\n
\n
Video type:
\n
\n
\n '),t.push('\n
\n
Video size:
\n
\n
\n '),t.push('\n
\n
Video volume:
\n
\n
\n '),t.push('\n
\n
Video time:
\n
\n
\n '),t.push('\n
\n
Video duration:
\n
\n
\n '),t.push('\n
\n
Video resolution:
\n
\n x \n
\n
\n '),t.join("")}},{key:"getHeader",value:function(){var t=this.art.refs,e=t.$infoPanel,n=t.$video.src,i=Array.from(e.querySelectorAll("[data-head]"));i.forEach(function(t){t.innerHTML="loading..."}),fetch(n,{method:"HEAD"}).then(function(n){i.forEach(function(t){var e=n.headers.get(t.dataset.head);t.innerHTML=void 0!==e?e:"unknown"})}).catch(function(){i.forEach(function(t){t.innerHTML="unknown"})})}},{key:"readInfo",value:function(){var t=this.art.refs,e=t.$infoPanel,n=t.$video;Array.from(e.querySelectorAll("[data-video]")).forEach(function(t){var e=n[t.dataset.video];t.innerHTML=void 0!==e?e:"unknown"})}},{key:"loop",value:function(){var t=this;this.readInfo(),this.timer=setTimeout(function(){t.readInfo(),t.loop()},1e3)}},{key:"hide",value:function(){var t=this.art.refs.$info;H(t,"display","none"),clearTimeout(this.timer),this.art.emit("info:hide",t)}}]),e}(),bt=function(){function n(t){R(this,n),this.art=t,this.isOpen=!0;var e=this.art.option.subtitle.url;e&&(this.checkExt(e),this.init())}return c(n,[{key:"init",value:function(){var i=this,t=this.art,e=t.events.proxy,n=t.option.subtitle,r=t.refs,o=r.$video,a=r.$subtitle;$(a,n.style||{});var s=document.createElement("track");s.default=!0,s.kind="metadata",this.load(n.url).then(function(t){if(s.src=t,o.appendChild(s),i.art.refs.$track=s,o.textTracks&&o.textTracks[0]){var n=D(o.textTracks,1)[0];e(n,"cuechange",function(){var t=D(n.activeCues,1)[0];if(a.innerHTML="",t){var e=document.createElement("div");e.appendChild(t.getCueAsHTML()),a.innerHTML=e.innerHTML.split(/\r?\n/).map(function(t){return"

".concat(t,"

")}).join("")}i.art.emit("subtitle:update",a)})}})}},{key:"load",value:function(e){var n,i=this,r=this.art.notice;return fetch(e).then(function(t){return n=t.headers.get("Content-Type"),t.text()}).then(function(t){return/x-subrip/gi.test(n)?i.srtToVtt(t):e}).catch(function(t){throw r.show(t),t})}},{key:"srtToVtt",value:function(t){var e="WEBVTT \r\n\r\n".concat(t.replace(/\{\\([ibu])\}/g,"").replace(/\{\\([ibu])1\}/g,"<$1>").replace(/\{([ibu])\}/g,"<$1>").replace(/\{\/([ibu])\}/g,"").replace(/(\d\d:\d\d:\d\d),(\d\d\d)/g,"$1.$2").concat("\r\n\r\n"));return URL.createObjectURL(new Blob([e],{type:"text/vtt"}))}},{key:"checkExt",value:function(t){var e=function t(e){return e.includes("?")?t(e.split("?")[0]):e.includes("#")?t(e.split("#")[0]):e.trim().toLowerCase().split(".").pop()}(t);b("vtt"===e||"srt"===e,"'subtitle.url' option require 'vtt' or 'srt' format, but got '".concat(e,"'."))}},{key:"show",value:function(){var t=this.art,e=t.refs.$subtitle,n=t.i18n,i=t.notice;H(e,"display","block"),this.isOpen=!0,i.show(n.get("Show subtitle")),this.art.emit("subtitle:show",e)}},{key:"hide",value:function(){var t=this.art,e=t.refs.$subtitle,n=t.i18n,i=t.notice;H(e,"display","none"),this.isOpen=!1,i.show(n.get("Hide subtitle")),this.art.emit("subtitle:hide",e)}},{key:"switch",value:function(e){var n=this,i=1'.concat(this.art.i18n.get(i),"")),w(r,'
'),this.$settings.push(r),t.apply&&t.apply(this.art,r),this[n]=t}}},{key:"mount",value:function(){var e=this;this.$settings.sort(function(t,e){return Number(t.dataset.settingIndex)-Number(e.dataset.settingIndex)}).forEach(function(t){w(e.art.refs.$settingBody,t)})}},{key:"show",value:function(){var t=this.art,e=t.refs.$setting,n=t.i18n,i=t.notice;H(e,"display","flex"),this.isOpen=!0,i.show(n.get("Show setting")),this.art.emit("setting:show",e)}},{key:"hide",value:function(){var t=this.art,e=t.refs.$setting,n=t.i18n,i=t.notice;H(e,"display","none"),this.isOpen=!1,i.show(n.get("Hide setting")),this.art.emit("setting:hide",e)}}]),e}(),At=0,Mt=[],Ot=function(t){function n(t){var e;return R(this,n),(e=h(this,f(n).call(this))).emit("init:start"),e.option=function t(){for(var e=function(t){return null!==t&&"object"===d(t)},n={},i=arguments.length,r=new Array(i),o=0;o\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
[x]
\n
\n
\n
\n
×
\n
\n \n ',n.$player=n.$container.querySelector(".artplayer-video-player"),n.$video=n.$container.querySelector(".artplayer-video"),n.$subtitle=n.$container.querySelector(".artplayer-subtitle"),n.$bottom=n.$container.querySelector(".artplayer-bottom"),n.$progress=n.$container.querySelector(".artplayer-progress"),n.$controls=n.$container.querySelector(".artplayer-controls"),n.$controlsLeft=n.$container.querySelector(".artplayer-controls-left"),n.$controlsRight=n.$container.querySelector(".artplayer-controls-right"),n.$layers=n.$container.querySelector(".artplayer-layers"),n.$danmu=n.$container.querySelector(".artplayer-danmu"),n.$loading=n.$container.querySelector(".artplayer-loading"),n.$notice=n.$container.querySelector(".artplayer-notice"),n.$noticeInner=n.$container.querySelector(".artplayer-notice-inner"),n.$mask=n.$container.querySelector(".artplayer-mask"),n.$setting=n.$container.querySelector(".artplayer-setting"),n.$settingInner=n.$container.querySelector(".artplayer-setting-inner"),n.$settingBody=n.$container.querySelector(".artplayer-setting-body"),n.$settingClose=n.$container.querySelector(".artplayer-setting-close"),n.$info=n.$container.querySelector(".artplayer-info"),n.$infoPanel=n.$container.querySelector(".artplayer-info-panel"),n.$infoClose=n.$container.querySelector(".artplayer-info-close"),n.$pipHeader=n.$container.querySelector(".artplayer-pip-header"),n.$pipTitle=n.$container.querySelector(".artplayer-pip-title"),n.$pipClose=n.$container.querySelector(".artplayer-pip-close")},C={"zh-cn":{"About author":"关于作者","Video info":"视频统计信息",Close:"关闭","Video load failed":"视频加载失败",Volume:"音量",Play:"播放",Pause:"暂停",Rate:"速度",Mute:"静音",Reconnect:"重新连接","Hide subtitle":"隐藏字幕","Show subtitle":"显示字幕","Hide danmu":"隐藏弹幕","Show danmu":"显示弹幕",Screenshot:"截图","Play speed":"播放速度","Aspect ratio":"画面比例",Default:"默认",Normal:"正常","Switch video":"切换","Switch subtitle":"切换字幕",Fullscreen:"全屏","Exit fullscreen":"退出全屏","Web fullscreen":"网页全屏","Exit web fullscreen":"退出网页全屏",Common:"常规","Hide setting":"隐藏设置","Show setting":"显示设置","Mini player":"迷你播放器"},"zh-tw":{"About author":"關於作者","Video info":"影片統計訊息",Close:"關閉","Video load failed":"影片載入失敗",Volume:"音量",Play:"播放",Pause:"暫停",Rate:"速度",Mute:"靜音",Reconnect:"重新連接","Hide subtitle":"隱藏字幕","Show subtitle":"顯示字幕","Hide danmu":"隱藏彈幕","Show danmu":"顯示彈幕",Screenshot:"截圖","Play speed":"播放速度","Aspect ratio":"畫面比例",Default:"默認",Normal:"正常","Switch video":"切換","Switch subtitle":"切換字幕",Fullscreen:"全屏","Exit fullscreen":"退出全屏","Web fullscreen":"網頁全屏","Exit web fullscreen":"退出網頁全屏",Common:"常規","Hide setting":"隱藏設置","Show setting":"顯示設置","Mini player":"迷你播放器"}},M=function(){function n(t){var e=t.option;kt(this,n),this.option=e,this.init()}return l(n,[{key:"init",value:function(){this.language=C[this.option.lang.toLowerCase()]||{}}},{key:"get",value:function(t){return this.language[t]||t}},{key:"update",value:function(t){C=t(C),this.init()}}]),n}();function Mt(o,t){var r=o.refs.$video,a=o.i18n,s=o.notice;Object.defineProperty(t,"volume",{value:function(t){var e,n,i;return void 0!==t&&(r.volume=Et(t,0,1),s.show("".concat(a.get("Volume"),": ").concat(parseInt(100*r.volume))),0!==r.volume&&(e="volume",n=r.volume,i=Object.assign({},$(),y({},e,n)),localStorage.setItem("artplayer_settings",JSON.stringify(i))),o.emit("volume",r.volume)),r.volume||0}})}function Ot(o,t){var e=o.notice;Object.defineProperty(t,"screenshot",{value:function(){try{!function(){var t=o.refs.$video,e=document.createElement("canvas");e.width=t.videoWidth,e.height=t.videoHeight,e.getContext("2d").drawImage(t,0,0);var n=e.toDataURL("image/png"),i=document.createElement("a");Pt(i,"display","none"),i.href=n,i.download="ArtPlayer_".concat(Tt(t.currentTime),".png"),document.body.appendChild(i),i.click(),document.body.removeChild(i)}(),o.emit("screenshot")}catch(t){e.show(t),console.warn(t)}}})}var Rt=e(function(t){var r,e,n,i,o,a;r="undefined"!=typeof window&&void 0!==window.document?window.document:{},e=t.exports,n="undefined"!=typeof Element&&"ALLOW_KEYBOARD_INPUT"in Element,i=function(){for(var t,e=[["requestFullscreen","exitFullscreen","fullscreenElement","fullscreenEnabled","fullscreenchange","fullscreenerror"],["webkitRequestFullscreen","webkitExitFullscreen","webkitFullscreenElement","webkitFullscreenEnabled","webkitfullscreenchange","webkitfullscreenerror"],["webkitRequestFullScreen","webkitCancelFullScreen","webkitCurrentFullScreenElement","webkitCancelFullScreen","webkitfullscreenchange","webkitfullscreenerror"],["mozRequestFullScreen","mozCancelFullScreen","mozFullScreenElement","mozFullScreenEnabled","mozfullscreenchange","mozfullscreenerror"],["msRequestFullscreen","msExitFullscreen","msFullscreenElement","msFullscreenEnabled","MSFullscreenChange","MSFullscreenError"]],n=0,i=e.length,o={};n