diff --git a/packages/artplayer-plugin-subtitle/dist/artplayer-plugin-subtitle.js b/packages/artplayer-plugin-subtitle/dist/artplayer-plugin-subtitle.js
new file mode 100644
index 000000000..a1511c335
--- /dev/null
+++ b/packages/artplayer-plugin-subtitle/dist/artplayer-plugin-subtitle.js
@@ -0,0 +1,8 @@
+/*!
+ * artplayer-plugin-subtitle.js v1.0.3
+ * Github: https://github.com/zhw2590582/ArtPlayer#readme
+ * (c) 2017-2018 Harvey Zack
+ * Released under the MIT License.
+ */
+
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e(t["artplayer-plugin-subtitle"]={})}(this,function(t){"use strict";function e(i){var t=i.i18n,a=i.events.proxy;return{title:"Subtitle",name:"subtitle",index:20,html:'\n
\n \n \n
\n '),mounted:function(t){var e=t.querySelector(".art-subtitle-range"),n=t.querySelector(".art-subtitle-value");a(e,"change",function(){var t=e.value;n.innerText=t,i.plugins.artplayerPluginSubtitle.set(Number(t))}),i.on("subtitle:switch",function(){e.value=0,n.innerText=0}),i.on("artplayerPluginSubtitle:set",function(t){e.value!==t&&(e.value=t,n.innerText=t)})}}}function n(i){var a=i.constructor.utils.clamp,t=i.setting,r=i.notice,u=i.refs,o=i.i18n;o.update({"zh-cn":{"Subtitle offset time":"字幕偏移时间"},"zh-tw":{"Subtitle offset time":"字幕偏移時間"}}),t.add(e);var s=[];return i.on("subtitle:switch",function(){s=[]}),{set:function(t){var e=Array.from(u.$track.track.cues),n=a(t,-5,5);e.forEach(function(t,e){s[e]||(s[e]={startTime:t.startTime,endTime:t.endTime}),t.startTime=s[e].startTime+n,t.endTime=s[e].endTime+n}),r.show("".concat(o.get("Subtitle offset time"),": ").concat(t,"s")),i.emit("artplayerPluginSubtitle:set",t)}}}window.artplayerPluginSubtitle=n,t.default=n,Object.defineProperty(t,"__esModule",{value:!0})});
diff --git a/packages/artplayer/dist/artplayer.css b/packages/artplayer/dist/artplayer.css
index 35551cbdc..2cb2d490c 100644
--- a/packages/artplayer/dist/artplayer.css
+++ b/packages/artplayer/dist/artplayer.css
@@ -1,18 +1,18 @@
-.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 .art-hide{display:none!important}
-.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:30;left:0;top:0;right:0;bottom:0;width:100%;height:100%;pointer-events:none}.artplayer-video-player .artplayer-layers .art-layer{pointer-events:all}
-.artplayer-video-player .artplayer-mask{display:none;position:absolute;z-index:40;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-loading{display:none;position:absolute;z-index:60;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-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{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-mask{display:none;position:absolute;z-index:40;left:0;top:0;right:0;bottom:0;width:100%;height:100%;pointer-events:none}.artplayer-video-player .artplayer-mask .art-playBig{position:absolute;right:30px;bottom:65px;opacity:.6}
+.artplayer-video-player .artplayer-layers{position:absolute;z-index:30;left:0;top:0;right:0;bottom:0;width:100%;height:100%;pointer-events:none}.artplayer-video-player .artplayer-layers .art-layer{pointer-events:all}
.artplayer-video-player .artplayer-bottom{position:absolute;z-index:50;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.art-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 .artplayer-controls-left,.artplayer-video-player .artplayer-bottom .artplayer-controls .artplayer-controls-right{display:flex}.artplayer-video-player .artplayer-bottom .artplayer-controls .art-control{opacity:.9;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}.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:hover .art-volume-panel{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-notice{display:none;font-size:14px;position:absolute;z-index:70;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{display:none;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-contextmenu{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-contextmenu a{color:#fff;text-decoration:none}.artplayer-video-player .artplayer-contextmenu .art-contextmenu span{display:inline-block;padding:0 7px}.artplayer-video-player .artplayer-contextmenu .art-contextmenu span.current,.artplayer-video-player .artplayer-contextmenu .art-contextmenu span:hover{color:#00c9ff}.artplayer-video-player .artplayer-contextmenu .art-contextmenu:hover{background-color:hsla(0,0%,100%,.1)}.artplayer-video-player .artplayer-contextmenu .art-contextmenu:last-child{border-bottom:none}
.artplayer-video-player.artplayer-hide-cursor *{cursor:none!important}
-.artplayer-video-player .artplayer-info{display:none;position:absolute;left:10px;top:10px;z-index:90;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-info{display:none;position:absolute;left:10px;top:10px;z-index:90;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;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:5px}.artplayer-video-player .artplayer-info .artplayer-info-close{position:absolute;top:5px;right:5px;cursor:pointer}
.artplayer-video-player .artplayer-setting{display:none;position:absolute;z-index:80;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:300px;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-y:auto;width:100%;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 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-setting .art-setting-btns{display:flex;margin-left:-4px;margin-right:-4px}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn{flex:1;padding:0 4px}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn span{display:block;height:20px;line-height:20px;text-align:center;color:#fff;background:hsla(0,0%,100%,.3);border-radius:2px;cursor:pointer}.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn.current span,.artplayer-video-player .artplayer-setting .art-setting-btns .art-setting-btn:hover span{color:#fff;background:#00a1d6}
.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:100;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;opacity:0;visibility:hidden;transition:all .2s ease-in-out}.artplayer-video-player .artplayer-pip-header .artplayer-pip-title{flex:1;padding:0 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:move}.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;z-index:9999;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-hover .artplayer-pip-header{opacity:1;visibility:visible}.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}
+.artplayer-video-player .artplayer-pip-header{display:none;position:absolute;z-index:100;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;opacity:0;visibility:hidden;transition:all .2s ease-in-out}.artplayer-video-player .artplayer-pip-header .artplayer-pip-title{flex:1;padding:0 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:move}.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;z-index:9999;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-hover .artplayer-pip-header{opacity:1;visibility:visible}.artplayer-video-player.artplayer-pip .artplayer-mask{display:flex;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}
.artplayer-auto-size{display:flex;align-items:center;justify-content:center}
.artplayer-video-player[data-flip=horizontal] .artplayer-video{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.artplayer-video-player[data-flip=vertical] .artplayer-video{-webkit-transform:scaleY(-1);transform:scaleY(-1)}
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/packages/artplayer/dist/artplayer.js b/packages/artplayer/dist/artplayer.js
index a7b300b6a..83ee41002 100644
--- a/packages/artplayer/dist/artplayer.js
+++ b/packages/artplayer/dist/artplayer.js
@@ -5,4 +5,4 @@
* Released under the MIT License.
*/
-!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";var e=function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e=Number(n)});return r?r.insertAdjacentElement("beforebegin",e):R(t,e),e}function At(t,e,n){return t.style[e]=n,t}function j(e,n){return Object.keys(n).forEach(function(t){At(e,t,n[t])}),e}function C(t,e){var n=!(2\n \n \n \n \n \n \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.$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"),n.$contextmenu=n.$container.querySelector(".artplayer-contextmenu")},B={"zh-cn":{"About author":"关于作者","Video info":"视频统计信息",Close:"关闭","Video load failed":"视频加载失败",Volume:"音量",Play:"播放",Pause:"暂停",Rate:"速度",Mute:"静音",Flip:"视频翻转",Horizontal:"水平",Vertical:"垂直",Reconnect:"重新连接","Hide subtitle":"隐藏字幕","Show subtitle":"显示字幕","Hide danmu":"隐藏弹幕","Show danmu":"显示弹幕","Show setting":"显示设置","Hide setting":"隐藏设置",Screenshot:"截图","Play speed":"播放速度","Aspect ratio":"画面比例",Default:"默认",Normal:"正常","Switch video":"切换","Switch subtitle":"切换字幕",Fullscreen:"全屏","Exit fullscreen":"退出全屏","Web fullscreen":"网页全屏","Exit web fullscreen":"退出网页全屏","Mini player":"迷你播放器"},"zh-tw":{"About author":"關於作者","Video info":"影片統計訊息",Close:"關閉","Video load failed":"影片載入失敗",Volume:"音量",Play:"播放",Pause:"暫停",Rate:"速度",Mute:"靜音",Flip:"影片翻轉",Horizontal:"水平",Vertical:"垂直",Reconnect:"重新連接","Hide subtitle":"隱藏字幕","Show subtitle":"顯示字幕","Show setting":"顯示设置","Hide setting":"隱藏设置","Hide danmu":"隱藏彈幕","Show danmu":"顯示彈幕",Screenshot:"截圖","Play speed":"播放速度","Aspect ratio":"畫面比例",Default:"默認",Normal:"正常","Switch video":"切換","Switch subtitle":"切換字幕",Fullscreen:"全屏","Exit fullscreen":"退出全屏","Web fullscreen":"網頁全屏","Exit web fullscreen":"退出網頁全屏","Mini player":"迷你播放器"}},F=function(){function n(t){var e=t.option;Ct(this,n),this.option=e,this.init()}return a(n,[{key:"init",value:function(){this.language=B[this.option.lang.toLowerCase()]||{}}},{key:"get",value:function(t){return this.language[t]||t}},{key:"update",value:function(t){B=t(B),this.init()}}]),n}();function Dt(n,t){var i=n.option,r=n.notice,o=n.refs.$video;Object.defineProperty(t,"screenshot",{value:function(){var t=o.crossOrigin;try{o.crossOrigin="anonymous";var e=function(){var t=document.createElement("canvas");t.width=o.videoWidth,t.height=o.videoHeight,t.getContext("2d").drawImage(o,0,0);var e=t.toDataURL("image/png"),n=document.createElement("a");return At(n,"display","none"),n.href=e,n.download="".concat(i.title||"artplayer","_").concat(zt(o.currentTime),".png"),document.body.appendChild(n),n.click(),document.body.removeChild(n),e}();n.emit("screenshot",e)}catch(t){r.show(t),console.warn(t)}finally{o.crossOrigin=t}}})}var Ht=l(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 \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:'',play:'',pause:'',volume:'',volumeClose:'',subtitle:'',screenshot:'\n',setting:'',fullscreen:'',fullscreenWeb:'',pip:'',prev:'',next:''},it={},Object.keys(nt).forEach(function(t){var e=document.createElement("div");e.innerHTML='').concat(nt[t],"");var n=et(e.childNodes,1);it[t]=n[0]}),it);function ot(t,e){var n=t.refs.$progress,i=t.player,r=n.getBoundingClientRect().left,o=Mt(e.x-r,0,n.clientWidth),a=o/n.clientWidth*i.duration;return{second:a,time:zt(a),width:o,percentage:Mt(o/n.clientWidth,0,1)}}function at(i){return function(u){var t=u.option,e=t.highlight,n=t.theme,d=u.events.proxy,f=u.player;return Z({},i,{html:'\n \n '),mounted:function(o){var r=!1,n=o.querySelector(".art-progress-loaded"),i=o.querySelector(".art-progress-played"),a=o.querySelector(".art-progress-highlight"),s=o.querySelector(".art-progress-indicator"),c=o.querySelector(".art-progress-tip");function l(t,e){"loaded"===t&&At(n,"width","".concat(100*e,"%")),"played"===t&&(At(i,"width","".concat(100*e,"%")),At(s,"left","calc(".concat(100*e,"% - ").concat(C(s,"width")/2,"px)")))}e.forEach(function(t){var e=Mt(t.time,0,f.duration)/f.duration*100;R(a,''))}),l("loaded",f.loaded),u.on("video:progress",function(){l("loaded",f.loaded)}),u.on("video:timeupdate",function(){l("played",f.played)}),u.on("video:ended",function(){l("played",1)}),d(o,"mousemove",function(t){var e,n,i,r;At(c,"display","block"),-1o.clientWidth-r/2?At(c,"left","".concat(o.clientWidth-r,"px")):At(c,"left","".concat(n-r/2,"px")))}),d(o,"mouseout",function(){At(c,"display","none")}),d(o,"click",function(t){if(t.target!==s){var e=ot(u,t),n=e.second;l("played",e.percentage),f.seek(n)}}),d(s,"mousedown",function(){r=!0}),d(document,"mousemove",function(t){if(r){var e=ot(u,t),n=e.second,i=e.percentage;s.classList.add("art-show-indicator"),l("played",i),f.seek(n)}}),d(document,"mouseup",function(){r&&(r=!1,s.classList.remove("art-show-indicator"))})}})}}function st(t){return function(m){return Z({},t,{mounted:function(f){var h=m.refs.$progress,t=m.events,e=t.proxy,p=t.loadImg,v=!1,y=!1;e(h,"mousemove",function(t){var e,n,i,r,o,a,s,c,l,u,d;v||(v=!0,p(m.option.thumbnails.url).then(function(){y=!0})),y&&(At(f,"display","block"),e=ot(m,t).width,n=m.option.thumbnails,i=n.url,r=n.height,o=n.width,a=n.number,s=n.column,c=h.clientWidth/a,l=Math.ceil(e/c),u=Math.ceil(l/s)-1,d=l%s||s-1,At(f,"backgroundImage","url(".concat(i,")")),At(f,"height","".concat(r,"px")),At(f,"width","".concat(o,"px")),At(f,"backgroundPosition","-".concat(d*o,"px -").concat(u*r,"px")),e<=o/2?At(f,"left",0):e>h.clientWidth-o/2?At(f,"left","".concat(h.clientWidth-o,"px")):At(f,"left","".concat(e-o/2,"px")))}),e(h,"mouseout",function(){At(f,"display","none")})}})}}var ct=function(){function n(t){var e=this;Ct(this,n),this.id=0,this.art=t,this.art.on("firstCanplay",function(){e.init()})}return a(n,[{key:"init",value:function(){var t,e,n,i,r,a,s,o,c,l,u=this,d=this.art.option;this.add(at({name:"progress",disable:!1,position:"top",index:10})),this.add(st({name:"thumbnails",disable:!d.thumbnails.url,position:"top",index:20})),this.add((t={name:"playAndPause",disable:!1,position:"left",index:10},function(a){return Z({},t,{mounted:function(t){var e=a.events.proxy,n=a.player,i=a.i18n,r=R(t,rt.play),o=R(t,rt.pause);L(r,i.get("Play")),L(o,i.get("Pause")),At(o,"display","none"),e(r,"click",function(){n.play()}),e(o,"click",function(){n.pause()}),a.on("video:playing",function(){At(r,"display","none"),At(o,"display","flex")}),a.on("video:pause",function(){At(r,"display","flex"),At(o,"display","none")})}})})),this.add((e={name:"volume",disable:!1,position:"left",index:20},function(d){return Z({},e,{mounted:function(t){var e=d.events.proxy,r=d.player,n=d.i18n,i=!1,o=R(t,rt.volume),a=R(t,rt.volumeClose),s=R(t,''),c=R(s,'');function l(t){var e=s.getBoundingClientRect(),n=e.left,i=e.width,r=c.getBoundingClientRect().width;return Mt(t.x-n-r/2,0,i-r/2)/(i-r)}function u(){var t=0'.concat(n.name,"")),i=o.quality.map(function(t,e){return'').concat(t.name,"
")}).join("");e(R(t,''.concat(i,"
")),"click",function(t){var e=Number(t.target.dataset.index),n=o.quality[e],i=n.url,r=n.name;i&&r&&s!==e&&(a.switchQuality(i,r),c.innerHTML=r,s=e)})}})})),this.add((r={name:"screenshot",disable:!d.screenshot,position:"right",index:20},function(o){return Z({},r,{mounted:function(t){var e=o.events.proxy,n=o.i18n,i=o.player,r=R(t,rt.screenshot);L(r,n.get("Screenshot")),e(r,"click",function(){i.screenshot()})}})})),this.add((a={name:"subtitle",disable:!d.subtitle.url,position:"right",index:30},function(o){return Z({},a,{mounted:function(t){var e=o.events.proxy,n=o.i18n,i=o.subtitle,r=R(t,rt.subtitle);L(r,n.get("Hide subtitle")),e(t,"click",function(){i.toggle()}),o.on("subtitle:show",function(){At(r,"opacity","1"),L(r,n.get("Hide subtitle"))}),o.on("subtitle:hide",function(){At(r,"opacity","0.8"),L(r,n.get("Show subtitle"))})}})})),this.add((s={name:"setting",disable:!d.setting,position:"right",index:40},function(o){return Z({},s,{mounted:function(t){var e=o.events.proxy,n=o.i18n,i=o.setting,r=R(t,rt.setting);L(r,n.get("Show setting")),e(t,"click",function(){i.toggle()}),o.on("setting:show",function(){At(r,"opacity","0.8"),L(r,n.get("Hide setting"))}),o.on("setting:hide",function(){At(r,"opacity","1"),L(r,n.get("Show setting"))})}})})),this.add((o={name:"pip",disable:!d.pip,position:"right",index:50},function(r){return Z({},o,{mounted:function(t){var e=r.events.proxy,n=r.i18n,i=r.player;L(R(t,rt.pip),n.get("Mini player")),e(t,"click",function(){i.pipEnabled()})}})})),this.add((c={name:"fullscreenWeb",disable:!d.fullscreenWeb,position:"right",index:60},function(o){return Z({},c,{mounted:function(t){var e=o.events.proxy,n=o.i18n,i=o.player,r=R(t,rt.fullscreenWeb);L(r,n.get("Web fullscreen")),e(t,"click",function(){i.fullscreenWebToggle()}),o.on("fullscreenWeb:enabled",function(){At(r,"opacity","0.8"),L(r,n.get("Exit web fullscreen"))}),o.on("fullscreenWeb:exit",function(){At(r,"opacity","1"),L(r,n.get("Web fullscreen"))})}})})),this.add((l={name:"fullscreen",disable:!d.fullscreen,position:"right",index:70},function(o){return Z({},l,{mounted:function(t){var e=o.events.proxy,n=o.i18n,i=o.player,r=R(t,rt.fullscreen);L(r,n.get("Fullscreen")),e(t,"click",function(){i.fullscreenToggle()}),o.on("fullscreen:enabled",function(){At(r,"opacity","0.8"),L(r,n.get("Exit fullscreen"))}),o.on("fullscreen:exit",function(){At(r,"opacity","1"),L(r,n.get("Fullscreen"))})}})})),d.controls.forEach(function(t){u.add(t)})}},{key:"add",value:function(t,e){var n,i="function"==typeof t?t(this.art):t,r=this.art.refs,o=r.$progress,a=r.$controlsLeft,s=r.$controlsRight;switch(i.position){case"top":n=o;break;case"left":n=a;break;case"right":n=s}n&&J(this.art,this,n,i,e,"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}();var lt=function(){function n(t){var e=this;Ct(this,n),this.id=0,this.art=t,this.art.on("firstCanplay",function(){e.init()})}return a(n,[{key:"init",value:function(){var e,r,n,i,o=this,t=this.art,a=t.option,s=t.refs,c=s.$player,l=s.$contextmenu,u=t.events.proxy;this.add((e={disable:!a.playbackRate,name:"playbackRate",index:10},function(n){var t=n.i18n,i=n.player;return Z({},e,{html:"\n ".concat(t.get("Play speed"),':\n 0.5\n 0.75\n ').concat(t.get("Normal"),'\n 1.25\n 1.5\n 2.0\n '),click:function(t){var e=t.target.dataset.rate;e&&(i.playbackRate(Number(e)),n.contextmenu.hide())},mounted:function(t){n.on("playbackRateChange",function(e){A(Array.from(t.querySelectorAll("span")).find(function(t){return Number(t.dataset.rate)===e}),"current")})}})})),this.add((r={disable:!a.aspectRatio,name:"aspectRatio",index:20},function(n){var t=n.i18n,i=n.player;return Z({},r,{html:"\n ".concat(t.get("Aspect ratio"),':\n ').concat(t.get("Default"),'\n 4:3\n 16:9\n '),click:function(t){var e=t.target.dataset.ratio;e&&(i.aspectRatio(e.split(":")),n.contextmenu.hide())},mounted:function(t){n.on("aspectRatioChange",function(e){A(Array.from(t.querySelectorAll("span")).find(function(t){return t.dataset.ratio===e.join(":")}),"current")})}})})),this.add((n={disable:!1,name:"info",index:30},function(t){return Z({},n,{html:t.i18n.get("Video info"),click:function(){t.info.show(),t.contextmenu.hide()}})})),this.add(Z({},{disable:!1,name:"version",index:40},{html:'ArtPlayer 1.0.3'})),this.add((i={disable:!1,name:"close",index:50},function(t){return Z({},i,{html:t.i18n.get("Close"),click:function(){t.contextmenu.hide()}})})),a.contextmenu.forEach(function(t){o.add(t)}),u(c,"contextmenu",function(t){t.preventDefault(),o.show(),o.setPos(t)}),u(c,"click",function(t){t.composedPath().includes(l)||o.hide()})}},{key:"add",value:function(t,e){var n=this.art.refs.$contextmenu;J(this.art,this,n,t,e,"contextmenu")}},{key:"setPos",value:function(t){var e=this.art.refs,n=e.$player,i=e.$contextmenu,r=t.clientX,o=t.clientY,a=n.getBoundingClientRect(),s=a.height,c=a.width,l=a.left,u=a.top,d=i.getBoundingClientRect(),f=d.height,h=d.width,p=r-l,v=o-u;l+c\n Player version:
\n 1.0.3
\n \n '),t.push('\n \n '),t.push('\n \n '),t.push('\n \n '),t.push('\n \n '),t.push('\n \n '),t.push('\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;At(t,"display","none"),clearTimeout(this.timer),this.art.emit("info:hide",t)}}]),e}(),dt=function(){function n(t){Ct(this,n),this.art=t,this.state=!0,this.vttText="";var e=this.art.option.subtitle.url;e&&(this.checkExt(e),this.init())}return a(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;j(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=et(o.textTracks,1)[0];e(n,"cuechange",function(){var t=et(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(t){var e,n=this,i=this.art.notice;return fetch(t).then(function(t){return e=t.headers.get("Content-Type"),t.text()}).then(function(t){return/x-subrip/gi.test(e)?n.vttText=n.srtToVtt(t):n.vttText=t,n.vttToBlob(n.vttText)}).catch(function(t){throw i.show(t),console.warn(t),t})}},{key:"srtToVtt",value:function(t){return"WEBVTT \r\n\r\n".concat(t.replace(/\{\\([ibu])\}/g,"$1>").replace(/\{\\([ibu])1\}/g,"<$1>").replace(/\{([ibu])\}/g,"<$1>").replace(/\{\/([ibu])\}/g,"$1>").replace(/(\d\d:\d\d:\d\d),(\d\d\d)/g,"$1.$2").concat("\r\n\r\n"))}},{key:"vttToBlob",value:function(t){return URL.createObjectURL(new Blob([t],{type:"text/vtt"}))}},{key:"checkExt",value:function(t){var e=O(t);Lt("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;At(e,"display","block"),this.state=!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;At(e,"display","none"),this.state=!1,i.show(n.get("Hide subtitle")),this.art.emit("subtitle:hide",e)}},{key:"toggle",value:function(){this.state?this.hide():this.show()}},{key:"switch",value:function(e){var n=this,i=this.art.refs.$track;this.checkExt(e),Lt(i,"You need to initialize the subtitle option first."),this.load(e).then(function(t){i.src=t,n.art.emit("subtitle:switch",e)})}}]),n}();var ft=l(function(t,e){Object.defineProperty(e,"__esModule",{value:!0});e.ContentRect=function(t){if("getBBox"in t){var e=t.getBBox();return Object.freeze({height:e.height,left:0,top:0,width:e.width})}var n=window.getComputedStyle(t);return Object.freeze({height:parseFloat(n.height||"0"),left:parseFloat(n.paddingLeft||"0"),top:parseFloat(n.paddingTop||"0"),width:parseFloat(n.width||"0")})}});c(ft);ft.ContentRect;var ht=l(function(t,e){Object.defineProperty(e,"__esModule",{value:!0});var n=function(){function t(t){this.target=t,this.$$broadcastWidth=this.$$broadcastHeight=0}return Object.defineProperty(t.prototype,"broadcastWidth",{get:function(){return this.$$broadcastWidth},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"broadcastHeight",{get:function(){return this.$$broadcastHeight},enumerable:!0,configurable:!0}),t.prototype.isActive=function(){var t=ft.ContentRect(this.target);return!!t&&(t.width!==this.broadcastWidth||t.height!==this.broadcastHeight)},t}();e.ResizeObservation=n});c(ht);ht.ResizeObservation;var pt=l(function(t,e){Object.defineProperty(e,"__esModule",{value:!0});var n=function(t){this.target=t,this.contentRect=ft.ContentRect(t)};e.ResizeObserverEntry=n});c(pt);pt.ResizeObserverEntry;var vt=l(function(t,e){Object.defineProperty(e,"__esModule",{value:!0});var n=[],i=function(){function t(t){this.$$observationTargets=[],this.$$activeTargets=[],this.$$skippedTargets=[];var e=function(t){if(void 0===t)return"Failed to construct 'ResizeObserver': 1 argument required, but only 0 present.";if("function"!=typeof t)return"Failed to construct 'ResizeObserver': The callback provided as parameter 1 is not a function."}(t);if(e)throw TypeError(e);this.$$callback=t,n.push(this)}return t.prototype.observe=function(t){var e=r("observe",t);if(e)throw TypeError(e);0