合并字幕插件

docs/docs/README.md

@@ -1124,11 +1124,11 @@ art.contextmenu.yourContextmenu.hide();
 
 -   Type: `Object`
 
-| propertie | type       | Description     |
+| propertie | type       | Description   |
-| --------- | ---------- | --------------- |
+| --------- | ---------- | ------------- |
-| `switch`  | `Function` | Switch subtitle |
+| `init`    | `Function` | Init subtitle |
-| `show`    | `Function` | Show subtitle   |
+| `show`    | `Function` | Show subtitle |
-| `hide`    | `Function` | Hide subtitle   |
+| `hide`    | `Function` | Hide subtitle |
 
 [Run Code](/)
 
@@ -1143,7 +1143,7 @@ var art = new Artplayer({
 });
 
 this.art.on('firstCanplay', () => {
-    art.subtitle.switch(url + '/subtitle/one-more-time-one-more-chance.vtt');
+    art.subtitle.init(url + '/subtitle/one-more-time-one-more-chance.vtt');
 });
 ```
 

docs/lab/index.html

@@ -40,10 +40,7 @@
     <script src="./plugins/consola.js"></script>
     <script src="./plugins/codemirror.js"></script>
     <script src="./plugins/javascript.js"></script>
-
     <script src="../uncompiled/artplayer.js"></script>
-    <script src="../uncompiled/artplayer-plugin-subtitle.js"></script>
-
     <script src="./js/common.js"></script>
     <script>
         var _hmt = _hmt || [];

docs/lab/js/example.js

@@ -107,8 +107,7 @@ var art = new Artplayer({
     ],
     icons: {
         loading: '<img src="https://static.hdslb.com/player/images/ploading.gif">',
-    },
+    }
-    plugins: [artplayerPluginSubtitle]
 });
 
 art.on('firstCanplay', () => {

docs/test/index.html

@@ -23,10 +23,7 @@
             window.mocha.setup('bdd');
             window.expect = window.chai.expect;
         </script>
-
         <script src="../compiled/artplayer.js"></script>
-        <script src="../compiled/artplayer-plugin-subtitle.js"></script>
-
         <script src="./index.test.js"></script>
         <script>
             mocha.checkLeaks();

docs/uncompiled/artplayer.css

@@ -4,14 +4,14 @@
 .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-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-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:Line truncated
 .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-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:Line truncated
 .artplayer-video-player.artplayer-hide-cursor *{cursor:none!important}
-.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 .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-web-fullscreen{position:fixed;z-index:9999;width:100%;height:100%;left:0;top:0;right:0;bottom:0}
+.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{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)}

docs/uncompiled/artplayer.js

@@ -565,6 +565,9 @@
 
     return parent.lastElementChild;
   }
+  function remove(child) {
+    return child.parentNode.removeChild(child);
+  }
   function insertByIndex(parent, child, index) {
     var childs = Array.from(parent.children);
     child.dataset.index = index;
@@ -632,6 +635,7 @@
     isElement: isElement,
     mergeDeep: mergeDeep,
     append: append,
+    remove: remove,
     insertByIndex: insertByIndex,
     setStyle: setStyle,
     setStyles: setStyles,
@@ -4262,7 +4266,7 @@
 
   function version(menuOption) {
     return objectSpread({}, menuOption, {
-      html: '<a href="https://github.com/zhw2590582/artplayer" target="_blank">ArtPlayer 1.0.4</a>'
+      html: '<a href="https://github.com/zhw2590582/artplayer" target="_blank">ArtPlayer 1.0.5</a>'
     });
   }
 
@@ -4444,7 +4448,7 @@
       key: "creatInfo",
       value: function creatInfo() {
         var infoHtml = [];
-        infoHtml.push("\n          <div class=\"art-info-item \">\n            <div class=\"art-info-title\">Player version:</div>\n            <div class=\"art-info-content\">1.0.4</div>\n          </div>\n        ");
+        infoHtml.push("\n          <div class=\"art-info-item \">\n            <div class=\"art-info-title\">Player version:</div>\n            <div class=\"art-info-content\">1.0.5</div>\n          </div>\n        ");
         infoHtml.push("\n          <div class=\"art-info-item\">\n            <div class=\"art-info-title\">Video url:</div>\n            <div class=\"art-info-content\">".concat(this.art.option.url, "</div>\n          </div>\n        "));
         infoHtml.push("\n          <div class=\"art-info-item\">\n            <div class=\"art-info-title\">Video volume:</div>\n            <div class=\"art-info-content\" data-video=\"volume\"></div>\n          </div>\n        ");
         infoHtml.push("\n          <div class=\"art-info-item\">\n            <div class=\"art-info-title\">Video time:</div>\n            <div class=\"art-info-content\" data-video=\"currentTime\"></div>\n          </div>\n        ");
@@ -4500,13 +4504,13 @@
       var url = this.art.option.subtitle.url;
 
       if (url) {
-        this.init();
+        this.init(url);
       }
     }
 
     createClass(Subtitle, [{
       key: "init",
-      value: function init() {
+      value: function init(url) {
         var _this = this;
 
         var _this$art = this.art,
@@ -4514,15 +4518,20 @@
             subtitle = _this$art.option.subtitle,
             _this$art$template = _this$art.template,
             $video = _this$art$template.$video,
-            $subtitle = _this$art$template.$subtitle;
+            $subtitle = _this$art$template.$subtitle,
+            $track = _this$art$template.$track;
         setStyles($subtitle, subtitle.style || {});
-        var $track = document.createElement('track');
+
-        $track.default = true;
+        if (!$track) {
-        $track.kind = 'metadata';
+          var $newTrack = document.createElement('track');
-        $video.appendChild($track);
+          $newTrack.default = true;
-        this.art.template.$track = $track;
+          $newTrack.kind = 'metadata';
-        this.load(subtitle.url).then(function (url) {
+          $video.appendChild($newTrack);
-          $track.src = url;
+          this.art.template.$track = $newTrack;
+        }
+
+        this.load(url).then(function (url) {
+          _this.art.template.$track.src = url;
 
           _this.art.emit('subtitle:load', url);
 
@@ -4605,19 +4614,6 @@
           this.show();
         }
       }
-    }, {
-      key: "switch",
-      value: function _switch(url) {
-        var _this2 = this;
-
-        var $track = this.art.template.$track;
-        errorHandle($track, 'You need to initialize the subtitle option first.');
-        this.load(url).then(function (url) {
-          $track.src = url;
-
-          _this2.art.emit('subtitle:switch', url);
-        });
-      }
     }]);
 
     return Subtitle;
@@ -5465,6 +5461,86 @@
     return Storage;
   }();
 
+  function i18nMix(i18n) {
+    i18n.update({
+      'zh-cn': {
+        'Subtitle offset time': '字幕偏移时间'
+      },
+      'zh-tw': {
+        'Subtitle offset time': '字幕偏移時間'
+      }
+    });
+  }
+
+  function settingMix(art) {
+    var i18n = art.i18n,
+        proxy = art.events.proxy;
+    return {
+      title: 'Subtitle',
+      name: 'subtitle',
+      index: 20,
+      html: "\n            <div class=\"art-setting-header\">\n                ".concat(i18n.get('Subtitle offset time'), ": <span class=\"art-subtitle-value\">0</span>s\n            </div>\n            <div class=\"art-setting-body\">\n                <input\n                    style=\"width: 100%;height: 3px;outline: none;appearance: none;-moz-appearance: none;-webkit-appearance: none;background-color: #fff;\"\n                    class=\"art-subtitle-range\"\n                    type=\"range\"\n                    min=\"-5\"\n                    max=\"5\"\n                    step=\"0.5\"\n                >\n            </div>\n        "),
+      mounted: function mounted($setting) {
+        var $range = $setting.querySelector('.art-subtitle-range');
+        var $value = $setting.querySelector('.art-subtitle-value');
+        proxy($range, 'change', function () {
+          var value = $range.value;
+          $value.innerText = value;
+          art.plugins.artplayerPluginSubtitle.offset(Number(value));
+        });
+        art.on('subtitle:switch', function () {
+          $range.value = 0;
+          $value.innerText = 0;
+        });
+        art.on('artplayerPluginSubtitle:set', function (value) {
+          if ($range.value !== value) {
+            $range.value = value;
+            $value.innerText = value;
+          }
+        });
+      }
+    };
+  }
+
+  function artplayerPluginSubtitle(art) {
+    var clamp = art.constructor.utils.clamp;
+    var setting = art.setting,
+        notice = art.notice,
+        template = art.template,
+        i18n = art.i18n;
+    i18nMix(i18n);
+    setting.add(settingMix);
+    var cuesCache = [];
+    art.on('subtitle:switch', function () {
+      cuesCache = [];
+    });
+    return {
+      offset: function offset(value) {
+        var cues = Array.from(template.$track.track.cues);
+        var time = clamp(value, -5, 5);
+        cues.forEach(function (cue, index) {
+          if (!cuesCache[index]) {
+            cuesCache[index] = {
+              startTime: cue.startTime,
+              endTime: cue.endTime
+            };
+          }
+
+          cue.startTime = cuesCache[index].startTime + time;
+          cue.endTime = cuesCache[index].endTime + time;
+        });
+        notice.show("".concat(i18n.get('Subtitle offset time'), ": ").concat(value, "s"));
+        art.emit('artplayerPluginSubtitle:set', value);
+      }
+    };
+  }
+
+  function artplayerPluginLocalPreview(art) {
+    var getExt = art.constructor.utils.getExt;
+    return {// TODO...
+    };
+  }
+
   var Plugins =
   /*#__PURE__*/
   function () {
@@ -5475,6 +5551,8 @@
 
       this.art = art;
       this.id = 0;
+      this.add(artplayerPluginSubtitle);
+      this.add(artplayerPluginLocalPreview);
       art.option.plugins.forEach(function (plugin) {
         _this.add(plugin);
       });
@@ -5613,7 +5691,7 @@
     }], [{
       key: "version",
       get: function get() {
-        return '1.0.4';
+        return '1.0.5';
       }
     }, {
       key: "env",

package.json

@@ -7,11 +7,9 @@
     "publish": "node ./node_modules/.bin/lerna publish",
     "dev:artplayer": "cross-env NODE_ENV=development cross-env TARGET=artplayer rollup -w -c scripts/config.js",
     "dev:artplayer-plugin-danmu": "cross-env NODE_ENV=development cross-env TARGET=artplayer-plugin-danmu rollup -w -c scripts/config.js",
-    "dev:artplayer-plugin-subtitle": "cross-env NODE_ENV=development cross-env TARGET=artplayer-plugin-subtitle rollup -w -c scripts/config.js",
     "build:artplayer": "cross-env NODE_ENV=production TARGET=artplayer rollup -c scripts/config.js",
     "build:artplayer-plugin-danmu": "cross-env NODE_ENV=production TARGET=artplayer-plugin-danmu rollup -c scripts/config.js",
-    "build:artplayer-plugin-subtitle": "cross-env NODE_ENV=production TARGET=artplayer-plugin-subtitle rollup -c scripts/config.js",
+    "build:all": "npm-run-all build:artplayer build:artplayer-plugin-danmu",
-    "build:all": "npm-run-all build:artplayer build:artplayer-plugin-danmu build:artplayer-plugin-subtitle",
     "test": "node ./node_modules/.bin/mocha-chrome ./docs/test/index.html --mocha '{\"ui\":\"bdd\"}'",
     "lint": "node ./node_modules/.bin/eslint packages/*/src"
   },

packages/artplayer-plugin-subtitle/.npmignore

@@ -1,9 +0,0 @@
-node_modules
-.DS_Store
-yarn.lock
-package-lock.json
-test
-coverage
-.nyc_output
-.cache
-docs

packages/artplayer-plugin-subtitle/.npmrc

@@ -1 +0,0 @@
-package-lock=false

packages/artplayer-plugin-subtitle/README.md

@@ -1,53 +0,0 @@
-# artplayer-plugin-subtitle
-
-Subtitle plugin for ArtPlayer
-
-## Install
-
-Install with `npm`
-
-```
-$ npm install artplayer-plugin-subtitle
-```
-
-Or install with `yarn`
-
-```
-$ yarn add artplayer-plugin-subtitle
-```
-
-```js
-import artplayerPluginSubtitle from 'artplayer-plugin-subtitle';
-```
-
-Or umd builds are also available
-
-```html
-<script src="path/to/artplayer-plugin-subtitle.js"></script>
-```
-
-Will expose the global variable to `window.artplayerPluginSubtitle`.
-
-## Usage
-
-```html
-<div class="artplayer-app"></div>
-```
-
-```js
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: 'path/to/video.mp4',
-    plugins: [
-        artplayerPluginSubtitle,
-    ],
-});
-
-// There will be a slider in the settings panel.
-// Or, you can set subtitle offset time by yourself, range from -5 to 5.
-art.artplayerPluginSubtitle.set(-1);
-```
-
-## License
-
-MIT © [Harvey Zack](https://www.zhw-island.com/)

packages/artplayer-plugin-subtitle/dist/artplayer-plugin-subtitle.js

@@ -1,8 +0,0 @@
-/*!
- * artplayer-plugin-subtitle.js v1.0.4
- * 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            <div class="art-setting-header">\n                '.concat(t.get("Subtitle offset time"),': <span class="art-subtitle-value">0</span>s\n            </div>\n            <div class="art-setting-body">\n                <input\n                    style="width: 100%;height: 3px;outline: none;appearance: none;-moz-appearance: none;-webkit-appearance: none;background-color: #fff;"\n                    class="art-subtitle-range"\n                    type="range"\n                    min="-5"\n                    max="5"\n                    step="0.5"\n                >\n            </div>\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.offset(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.template,o=i.i18n;o.update({"zh-cn":{"Subtitle offset time":"字幕偏移时间"},"zh-tw":{"Subtitle offset time":"字幕偏移時間"}}),t.add(e);var l=[];return i.on("subtitle:switch",function(){l=[]}),{offset:function(t){var e=Array.from(u.$track.track.cues),n=a(t,-5,5);e.forEach(function(t,e){l[e]||(l[e]={startTime:t.startTime,endTime:t.endTime}),t.startTime=l[e].startTime+n,t.endTime=l[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})});

packages/artplayer-plugin-subtitle/package.json

@@ -1,24 +0,0 @@
-{
-  "name": "artplayer-plugin-subtitle",
-  "version": "1.0.5",
-  "description": "Danmu plugin for ArtPlayer",
-  "main": "dist/artplayer-plugin-subtitle.js",
-  "style": "dist/artplayer-plugin-subtitle.css",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/zhw2590582/ArtPlayer.git"
-  },
-  "keywords": [
-    "video",
-    "player"
-  ],
-  "author": "Harvey Zack <laozhaochaguan@gmail.com>",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/zhw2590582/ArtPlayer/issues"
-  },
-  "homepage": "https://github.com/zhw2590582/ArtPlayer#readme"
-}

packages/artplayer/src/plugins/artplayer-plugin-localPreview.js

@@ -0,0 +1,7 @@
+export default function artplayerPluginLocalPreview(art) {
+    const { getExt } = art.constructor.utils;
+    const formats = ['mp4', 'ogg', 'webm', 'srt', 'vtt'];
+    return {
+        // TODO...
+    };
+}

packages/artplayer/src/plugins/artplayer-plugin-subtitle.js

@@ -57,7 +57,7 @@ function settingMix(art) {
     };
 }
 
-function artplayerPluginSubtitle(art) {
+export default function artplayerPluginSubtitle(art) {
     const { clamp } = art.constructor.utils;
     const { setting, notice, template, i18n } = art;
     i18nMix(i18n);
@@ -87,6 +87,3 @@ function artplayerPluginSubtitle(art) {
         },
     };
 }
-
-window.artplayerPluginSubtitle = artplayerPluginSubtitle;
-export default artplayerPluginSubtitle;

packages/artplayer/src/plugins/index.js

@@ -1,7 +1,13 @@
+import artplayerPluginSubtitle from './artplayer-plugin-subtitle';
+import artplayerPluginLocalPreview from './artplayer-plugin-localPreview';
+
 export default class Plugins {
     constructor(art) {
         this.art = art;
         this.id = 0;
+
+        this.add(artplayerPluginSubtitle);
+        this.add(artplayerPluginLocalPreview);
         art.option.plugins.forEach(plugin => {
             this.add(plugin);
         });

packages/artplayer/src/subtitle.js

@@ -1,4 +1,4 @@
-import { errorHandle, setStyles, setStyle, srtToVtt, vttToBlob } from './utils';
+import { setStyles, setStyle, srtToVtt, vttToBlob } from './utils';
 
 export default class Subtitle {
     constructor(art) {
@@ -6,26 +6,31 @@ export default class Subtitle {
         this.state = true;
         const { url } = this.art.option.subtitle;
         if (url) {
-            this.init();
+            this.init(url);
         }
     }
 
-    init() {
+    init(url) {
         const {
             events: { proxy },
             option: { subtitle },
-            template: { $video, $subtitle },
+            template: { $video, $subtitle, $track },
         } = this.art;
 
         setStyles($subtitle, subtitle.style || {});
-        const $track = document.createElement('track');
+
-        $track.default = true;
+        if (!$track) {
-        $track.kind = 'metadata';
+            const $newTrack = document.createElement('track');
-        $video.appendChild($track);
+            $newTrack.default = true;
-        this.art.template.$track = $track;
+            $newTrack.kind = 'metadata';
-        this.load(subtitle.url).then(url => {
+            $video.appendChild($newTrack);
-            $track.src = url;
+            this.art.template.$track = $newTrack;
+        }
+
+        this.load(url).then(url => {
+            this.art.template.$track.src = url;
             this.art.emit('subtitle:load', url);
+            
             if ($video.textTracks && $video.textTracks[0]) {
                 const [track] = $video.textTracks;
                 proxy(track, 'cuechange', () => {
@@ -100,13 +105,4 @@ export default class Subtitle {
             this.show();
         }
     }
-
-    switch(url) {
-        const { $track } = this.art.template;
-        errorHandle($track, 'You need to initialize the subtitle option first.');
-        this.load(url).then(url => {
-            $track.src = url;
-            this.art.emit('subtitle:switch', url);
-        });
-    }
 }

packages/artplayer/src/utils/index.js

@@ -104,6 +104,10 @@ export function append(parent, child) {
     return parent.lastElementChild;
 }
 
+export function remove(child) {
+    return child.parentNode.removeChild(child);
+}
+
 export function insertByIndex(parent, child, index) {
     const childs = Array.from(parent.children);
     child.dataset.index = index;